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 Show whitespace changes
Inline Side-by-side
Showing with 118 additions and 18 deletions
Gruntfile.js
View file @ 1a99905a
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
grunt.initConfig({ grunt.initConfig({
pkg: grunt.file.readJSON('package.json'), 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 // Paths
distFolder: 'dist/v<%= pkg.version %>', distFolder: 'dist/v<%= pkg.version %>',
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
'<%= mapboxThemeFolder %>/style.css', '<%= mapboxThemeFolder %>/style.css',
'<%= cedarmapsThemeFolder %>/style.css' '<%= cedarmapsThemeFolder %>/style.css'
], ],
dest: '<%= distFolder %>/cedarmaps.css' dest: '<%= distFolder %>/cedarmaps.uncompressed.css'
} }
}, },
...@@ -47,7 +47,7 @@ ...@@ -47,7 +47,7 @@
browserify: { browserify: {
mapboxStandalone: { mapboxStandalone: {
files: { files: {
'<%= distFolder %>/mapbox.standalone.uncompressed.js': ['<%= mapboxSourceFolder %>/index.js'] '<%= distFolder %>/mapbox.standalone.uncompressed.js': ['<%= mapboxSourceFolder %>/mapbox.js']
} }
}, },
cedarmaps: { cedarmaps: {
...@@ -65,7 +65,7 @@ ...@@ -65,7 +65,7 @@
banner: '<%= jsBanner %>' banner: '<%= jsBanner %>'
}, },
files: { files: {
'<%= distFolder %>/cedarmaps.standalone.uncompressed.js': ['<%= cedarmapsSourceFolder %>/cedarmaps.js'] '<%= distFolder %>/cedarmaps.standalone.uncompressed.js': ['<%= mapboxSourceFolder %>/mapbox.js', '<%= cedarmapsSourceFolder %>/cedarmaps.js']
} }
} }
}, },
...@@ -78,6 +78,18 @@ ...@@ -78,6 +78,18 @@
'<%= distFolder %>/cedarmaps.js': ['<%= browserify.cedarmaps.dest %>'] '<%= 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 @@ ...@@ -86,6 +98,7 @@
grunt.loadNpmTasks('grunt-contrib-concat'); grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-copy'); grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-cssmin');
// Registering Tasks // Registering Tasks
grunt.registerTask('build', [ grunt.registerTask('build', [
...@@ -93,6 +106,7 @@ ...@@ -93,6 +106,7 @@
'browserify:cedarmaps', 'browserify:cedarmaps',
'browserify:cedarmapsStandalone', 'browserify:cedarmapsStandalone',
'concat:css', 'concat:css',
'cssmin',
'copy:images', 'copy:images',
'uglify:cedarmaps' 'uglify:cedarmaps'
]); ]);
......
README.md
View file @ 1a99905a
...@@ -20,8 +20,8 @@ CedarMaps JS is a javascript library for building interactive maps. It's simply ...@@ -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. Recommended usage is via the CedarMaps CDN. Just include CSS and JavaScript files in `<head>` section of your HTML file.
```html ```html
<script src='http://api.cedarmaps.com/cedarmaps.js/v1.8.0/cedarmaps.js'></script> <script src='https://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' /> <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: and put the following code in the `<body>` of your HTML file:
...@@ -30,7 +30,7 @@ and put the following code in the `<body>` of your HTML file: ...@@ -30,7 +30,7 @@ and put the following code in the `<body>` of your HTML file:
<div id='map' style='width: 400px; height: 300px;'></div> <div id='map' style='width: 400px; height: 300px;'></div>
<script type="text/javascript"> <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 // 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;
...@@ -42,7 +42,7 @@ and put the following code in the `<body>` of your HTML file: ...@@ -42,7 +42,7 @@ and put the following code in the `<body>` of your HTML file:
</script> </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: 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 @@ ...@@ -3,12 +3,13 @@
<head> <head>
<meta charset=utf-8 /> <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='../dist/v1.8.0/cedarmaps.uncompressed.js'></script>
<script src='../access-token.js'></script>
<link href='../dist/v1.8.0/cedarmaps.css' rel='stylesheet' /> <link href='../dist/v1.8.0/cedarmaps.css' rel='stylesheet' />
<script src='../access-token.js'></script>
<style> <style>
body { body {
margin: 0; margin: 0;
...@@ -43,10 +44,15 @@ ...@@ -43,10 +44,15 @@
// initilizing map into div#map // initilizing map into div#map
var map = L.cedarmaps.map('map', tileJSONUrl, { var map = L.cedarmaps.map('map', tileJSONUrl, {
scrollWheelZoom: true scrollWheelZoom: true,
}).setView([35.757448286487595, 51.40876293182373], 15); 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 * 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 @@ ...@@ -11,6 +11,15 @@
<link href='../dist/v1.8.0/cedarmaps.css' rel='stylesheet' /> <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> <style>
body { body {
margin: 0; margin: 0;
...@@ -44,11 +53,25 @@ ...@@ -44,11 +53,25 @@
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 // initilizing map into div#map
// and also activating a context menu for our maps
var map = L.cedarmaps.map('map', tileJSONUrl, { var map = L.cedarmaps.map('map', tileJSONUrl, {
scrollWheelZoom: true scrollWheelZoom: true,
}).setView([35.757448286487595, 51.40876293182373], 15); 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 * 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
...@@ -21,9 +21,10 @@ ...@@ -21,9 +21,10 @@
"clean-css": "~2.0.7", "clean-css": "~2.0.7",
"expect.js": "0.3.1", "expect.js": "0.3.1",
"grunt": "^0.4.5", "grunt": "^0.4.5",
"grunt-browserify": "^3.3.0", "grunt-browserify": "^3.8.0",
"grunt-contrib-concat": "^0.5.0", "grunt-contrib-concat": "^0.5.0",
"grunt-contrib-copy": "^0.7.0", "grunt-contrib-copy": "^0.7.0",
"grunt-contrib-cssmin": "^2.2.1",
"grunt-contrib-uglify": "^0.7.0", "grunt-contrib-uglify": "^0.7.0",
"happen": "0.1.3", "happen": "0.1.3",
"jshint": "2.4.4", "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