Skip to content

cedarmaps-sdk-web-public
cedarmaps-sdk-web-public
Commit 1a99905a authored by Deployer's avatar Deployer
Browse files
Options

Improved demos and README

parent d9759ca1
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 124 additions and 24 deletions
Gruntfile.js
View file @ 1a99905a
......@@ -2,7 +2,7 @@
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
jsBanner: "/* Copyright 2015, Cedar Studios <www.cedar.ir> | v<%= pkg.version %> */",
jsBanner: "/* Copyright 2018, Cedar Studios <www.cedar.ir> | v<%= pkg.version %> */",
// Paths
distFolder: 'dist/v<%= pkg.version %>',
......@@ -20,7 +20,7 @@
'<%= mapboxThemeFolder %>/style.css',
'<%= cedarmapsThemeFolder %>/style.css'
],
dest: '<%= distFolder %>/cedarmaps.css'
dest: '<%= distFolder %>/cedarmaps.uncompressed.css'
}
},
......@@ -47,7 +47,7 @@
browserify: {
mapboxStandalone: {
files: {
'<%= distFolder %>/mapbox.standalone.uncompressed.js': ['<%= mapboxSourceFolder %>/index.js']
'<%= distFolder %>/mapbox.standalone.uncompressed.js': ['<%= mapboxSourceFolder %>/mapbox.js']
}
},
cedarmaps: {
......@@ -65,7 +65,7 @@
banner: '<%= jsBanner %>'
},
files: {
'<%= distFolder %>/cedarmaps.standalone.uncompressed.js': ['<%= cedarmapsSourceFolder %>/cedarmaps.js']
'<%= distFolder %>/cedarmaps.standalone.uncompressed.js': ['<%= mapboxSourceFolder %>/mapbox.js', '<%= cedarmapsSourceFolder %>/cedarmaps.js']
}
}
},
......@@ -78,6 +78,18 @@
'<%= distFolder %>/cedarmaps.js': ['<%= browserify.cedarmaps.dest %>']
}
}
},
cssmin: {
options: {
mergeIntoShorthands: false,
roundingPrecision: -1
},
target: {
files: {
'<%= distFolder %>/cedarmaps.css': ['<%= distFolder %>/cedarmaps.uncompressed.css']
}
}
}
});
......@@ -86,6 +98,7 @@
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-cssmin');
// Registering Tasks
grunt.registerTask('build', [
......@@ -93,6 +106,7 @@
'browserify:cedarmaps',
'browserify:cedarmapsStandalone',
'concat:css',
'cssmin',
'copy:images',
'uglify:cedarmaps'
]);
......
README.md
View file @ 1a99905a
......@@ -20,8 +20,8 @@ CedarMaps JS is a javascript library for building interactive maps. It's simply
Recommended usage is via the CedarMaps CDN. Just include CSS and JavaScript files in `<head>` section of your HTML file.
```html
<script src='http://api.cedarmaps.com/cedarmaps.js/v1.8.0/cedarmaps.js'></script>
<link href='http://api.cedarmaps.com/cedarmaps.js/v1.8.0/cedarmaps.css' rel='stylesheet' />
<script src='https://api.cedarmaps.com/cedarmaps.js/v1.8.0/cedarmaps.js'></script>
<link href='https://api.cedarmaps.com/cedarmaps.js/v1.8.0/cedarmaps.css' rel='stylesheet' />
```
and put the following code in the `<body>` of your HTML file:
......@@ -30,19 +30,19 @@ and put the following code in the `<body>` of your HTML file:
<div id='map' style='width: 400px; height: 300px;'></div>
<script type="text/javascript">
L.cedarmaps.accessToken = "YOUR_ACCESS_TOKEN";
L.cedarmaps.accessToken = "YOUR_ACCESS_TOKEN"; // See the note below on how to get an access token
// Getting maps info from a tileJSON source
var tileJSONUrl = 'https://api.cedarmaps.com/v1/tiles/cedarmaps.streets.json?access_token=' + L.cedarmaps.accessToken;
var tileJSONUrl = 'https://api.cedarmaps.com/v1/tiles/cedarmaps.streets.json?access_token=' + L.cedarmaps.accessToken;
// initilizing map into div#map
var map = L.cedarmaps.map('map', tileJSONUrl, {
scrollWheelZoom: true
}).setView([35.757448286487595, 51.40876293182373], 15);
// initilizing map into div#map
var map = L.cedarmaps.map('map', tileJSONUrl, {
scrollWheelZoom: true
}).setView([35.757448286487595, 51.40876293182373], 15);
</script>
```
**Note:** You can get an access token by filling out the demo account form in [Cedarmaps Website](https://www.cedarmaps.com).
**Note:** You can get an access token by filling out the demo account form in [Cedarmaps Website](https://www.cedarmaps.com/#demo).
If you prefer to have your local version of the libaray you can simply build it with the following commands:
......
demos/index.html → demos/basic-map-marker.html
View file @ 1a99905a
......@@ -3,12 +3,13 @@
<head>
<meta charset=utf-8 />
<title>CedarMaps - Simple Map Load</title>
<title>CedarMaps - Basic Map Load with a Marker</title>
<script src='../dist/v1.8.0/cedarmaps.uncompressed.js'></script>
<script src='../access-token.js'></script>
<link href='../dist/v1.8.0/cedarmaps.css' rel='stylesheet' />
<script src='../access-token.js'></script>
<style>
body {
margin: 0;
......@@ -43,10 +44,15 @@
// initilizing map into div#map
var map = L.cedarmaps.map('map', tileJSONUrl, {
scrollWheelZoom: true
}).setView([35.757448286487595, 51.40876293182373], 15);
scrollWheelZoom: true,
zoomControl: false,
minZoom: 7,
maxZoom: 17,
maxBounds: [[25.064, 44.039],[39.771, 63.322]], // Iran's bounding box
}).setView([35.757448286487595, 51.40876293182373], 7);
var zoomControl = new L.Control.Zoom({position:'topleft'});
zoomControl.addTo(map);
/**
* Adding a Leaflet marker with custom image
*/
......
demos/css/leaflet-contextmenu.css 0 → 100644
View file @ 1a99905a
.leaflet-contextmenu {
display: none;
box-shadow: 0 1px 7px rgba(0,0,0,0.4);
-webkit-border-radius: 4px;
border-radius: 4px;
padding: 4px 0;
background-color: #181f29;
cursor: default;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
font-family: "IRANSans", Arial, sans-serif;
}
.leaflet-contextmenu a.leaflet-contextmenu-item {
display: block;
color: #bebebe;
font-size: 12px;
line-height: 20px;
text-decoration: none;
padding: 3px 12px;
cursor: pointer;
outline: none;
direction: rtl;
text-align: right;
}
.leaflet-contextmenu a.leaflet-contextmenu-item-disabled {
direction: rtl;
text-align: right;
opacity: 0.5;
}
.leaflet-contextmenu a.leaflet-contextmenu-item.over {
background-color: #2c323a;
color: #fff;
}
.leaflet-contextmenu a.leaflet-contextmenu-item-disabled.over {
background-color: inherit;
}
.leaflet-contextmenu-icon {
margin: 0 0 0 8px;
width: 18px;
height: 18px;
border: 0;
vertical-align: bottom;
}
.leaflet-contextmenu-separator {
border-bottom: 1px solid #303942;
margin: 5px 0;
}
\ No newline at end of file
demos/drawing-kml.html
View file @ 1a99905a
......@@ -11,6 +11,15 @@
<link href='../dist/v1.8.0/cedarmaps.css' rel='stylesheet' />
<!-- In this demo we've intentioanlly used the standalone version of SDK along with leaflet source.
To have the packed and minified version please see other demo files in this folder -->
<script src='./js/leaflet-src.js'></script>
<script src='./js/leaflet.contextmenu.js'></script>
<script src='../dist/v1.8.0/cedarmaps.standalone.uncompressed.js'></script>
<script src='../access-token.js'></script>
<link href='../dist/v1.8.0/cedarmaps.css' rel='stylesheet' />
<link href='./css/leaflet-contextmenu.css' rel='stylesheet' />
<style>
body {
margin: 0;
......@@ -44,11 +53,25 @@
var tileJSONUrl = 'https://api.cedarmaps.com/v1/tiles/cedarmaps.streets.json?access_token=' + L.cedarmaps.accessToken;
// initilizing map into div#map
// and also activating a context menu for our maps
var map = L.cedarmaps.map('map', tileJSONUrl, {
scrollWheelZoom: true
}).setView([35.757448286487595, 51.40876293182373], 15);
scrollWheelZoom: true,
zoomControl: false,
minZoom: 7,
maxZoom: 17,
maxBounds: [[25.064, 44.039],[39.771, 63.322]], // Iran's bounding box
contextmenu: true,
contextmenuWidth: 230,
locateControl: true,
contextmenuItems: [
{
text: 'موقعیت نقشه',
callback: function(latlngObj, layerPoint, containerPoint) {
alert('You have clicked on: '+ latlngObj.latlng);
}.bind(this)
}
]
}).setView([35.757448286487595, 51.40876293182373], 7);
/**
* Drawing our KML data
......
demos/js/leaflet-src.js 0 → 100644
View file @ 1a99905a
This source diff could not be displayed because it is too large. You can view the blob instead.
demos/js/leaflet.contextmenu.js 0 → 100644
View file @ 1a99905a
This diff is collapsed.
package-lock.json
View file @ 1a99905a
This diff is collapsed.
package.json
View file @ 1a99905a
......@@ -11,7 +11,7 @@
"main": "src/index.js",
"dependencies": {
"corslite": "0.0.6",
"isarray": "0.0.1",
"isarray": "0.0.1",
"mapbox.js": "^3.1.1",
"mustache": "0.7.3",
"sanitize-caja": "0.1.3"
......@@ -21,9 +21,10 @@
"clean-css": "~2.0.7",
"expect.js": "0.3.1",
"grunt": "^0.4.5",
"grunt-browserify": "^3.3.0",
"grunt-browserify": "^3.8.0",
"grunt-contrib-concat": "^0.5.0",
"grunt-contrib-copy": "^0.7.0",
"grunt-contrib-cssmin": "^2.2.1",
"grunt-contrib-uglify": "^0.7.0",
"happen": "0.1.3",
"jshint": "2.4.4",
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment