Skip to content

cedarmaps-sdk-web-public
cedarmaps-sdk-web-public
Commit 55f163ca authored by Deployer's avatar Deployer
Browse files
Options

Updated dependencies and implemneted distance and static map image

parent c4aced11
Hide whitespace changes
Inline Side-by-side
Showing with 166 additions and 70 deletions
demos/geocoder-control.html
View file @ 55f163ca
...@@ -5,9 +5,9 @@ ...@@ -5,9 +5,9 @@
<meta charset=utf-8 /> <meta charset=utf-8 />
<title>CedarMaps - Sample Geocoder Control</title> <title>CedarMaps - Sample Geocoder Control</title>
<script src='../dist/v1.2.1/cedarmaps.js'></script> <script src='../dist/v1.3.0/cedarmaps.js'></script>
<script src='../access-token.js'></script> <script src='../access-token.js'></script>
<link href='../dist/v1.2.1/cedarmaps.css' rel='stylesheet' /> <link href='../dist/v1.3.0/cedarmaps.css' rel='stylesheet' />
<link href='css/styles.css' rel='stylesheet' /> <link href='css/styles.css' rel='stylesheet' />
...@@ -68,7 +68,7 @@ ...@@ -68,7 +68,7 @@
<div id='map' class='map'> </div> <div id='map' class='map'> </div>
<script> <script>
window.L.Icon.Default.imagePath = '../dist/v1.2.1/images/images'; window.L.Icon.Default.imagePath = '../dist/v1.3.0/images/images';
try { try {
L.cedarmaps.accessToken = accessToken; L.cedarmaps.accessToken = accessToken;
......
demos/index.html
View file @ 55f163ca
...@@ -4,80 +4,77 @@ ...@@ -4,80 +4,77 @@
<head> <head>
<meta charset=utf-8 /> <meta charset=utf-8 />
<title>CedarMaps - Simple Map Load</title> <title>CedarMaps - Simple Map Load</title>
<script src='../dist/v1.2.1/cedarmaps.js'></script> <script src='../dist/v1.3.0/cedarmaps.uncompressed.js'></script>
<script src='../access-token.js'></script> <script src='../access-token.js'></script>
<link href='../dist/v1.2.1/cedarmaps.css' rel='stylesheet' /> <link href='../dist/v1.3.0/cedarmaps.css' rel='stylesheet' />
<style> <style>
body { body {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.map {
position: absolute; .map {
top: 0; position: absolute;
bottom: 0; top: 0;
width: 100%; bottom: 0;
} width: 100%;
}
</style> </style>
</head> </head>
<body> <body>
<div id='map' class='map'> </div> <div id='map' class='map'> </div>
<script> <script>
try {
L.cedarmaps.accessToken = accessToken;
try { } catch (err) {
L.cedarmaps.accessToken = accessToken; throw new Error('You need to get an access token to be able to use cedarmaps SDK. ' +
} 'Send us an email to <info@cedar.ir>');
catch(err) { }
throw new Error('You need to get an access token to be able to use cedarmaps SDK. ' +
'Send us an email to <info@cedar.ir>');
}
/**
* Initilizing Map View
*/
// Getting maps info from a tileJSON source /**
var tileJSONUrl = 'https://api.cedarmaps.com/v1/tiles/cedarmaps.streets.json?access_token='+ L.cedarmaps.accessToken; * Initilizing Map View
*/
// initilizing map into div#map // Getting maps info from a tileJSON source
var map = L.cedarmaps.map('map', tileJSONUrl, { var tileJSONUrl = 'https://api.cedarmaps.com/v1/tiles/cedarmaps.streets.json?access_token=' + L.cedarmaps.accessToken;
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);
/**
* Adding a Leaflet marker with custom image
*/
// see: http://leafletjs.com/reference.html#marker
var myIcon = L.icon({
iconUrl: '../dist/v1.2.1/images/pin-taxi.png',
iconRetinaUrl: '../dist/v1.2.1/images/pin-taxi@2x.png',
iconSize: [34, 46],
iconAnchor: [17, 41],
popupAnchor: [-3, -46],
shadowUrl: '../dist/v1.2.1/images/pin-shadow.png',
shadowRetinaUrl: '../dist/v1.2.1/images/pin-shadow@2x.png',
shadowSize: [26, 6],
shadowAnchor: [13,3]
});
var marker = new L.marker([35.757448286487595, 51.40876293182373], {icon: myIcon}).addTo(map); /**
* Adding a Leaflet marker with custom image
*/
var popupOptions = { // see: http://leafletjs.com/reference.html#marker
offset: new L.Point(0, -33), var myIcon = L.icon({
closeButton: false, iconUrl: '../dist/v1.3.0/images/pin-taxi.png',
autoPan: false iconRetinaUrl: '../dist/v1.3.0/images/pin-taxi@2x.png',
}; iconSize: [34, 46],
marker.bindPopup('Hello World!', popupOptions).openPopup(); iconAnchor: [17, 41],
popupAnchor: [-3, -46],
shadowUrl: '../dist/v1.3.0/images/pin-shadow.png',
shadowRetinaUrl: '../dist/v1.3.0/images/pin-shadow@2x.png',
shadowSize: [26, 6],
shadowAnchor: [13, 3]
});
var marker = new L.marker([35.757448286487595, 51.40876293182373], {
icon: myIcon
}).addTo(map);
var popupOptions = {
offset: new L.Point(2, 14),
closeButton: false,
autoPan: false
};
marker.bindPopup('Hello World!', popupOptions).openPopup();
</script> </script>
</body> </body>
</html> </html>
\ No newline at end of file
demos/reverse-geocoder.html
View file @ 55f163ca
...@@ -5,9 +5,9 @@ ...@@ -5,9 +5,9 @@
<meta charset=utf-8 /> <meta charset=utf-8 />
<title>CedarMaps - Reverse Geocoding Sample</title> <title>CedarMaps - Reverse Geocoding Sample</title>
<script src='../dist/v1.2.1/cedarmaps.js'></script> <script src='../dist/v1.3.0/cedarmaps.js'></script>
<script src='../access-token.js'></script> <script src='../access-token.js'></script>
<link href='../dist/v1.2.1/cedarmaps.css' rel='stylesheet' /> <link href='../dist/v1.3.0/cedarmaps.css' rel='stylesheet' />
<style> <style>
body { body {
...@@ -55,12 +55,12 @@ ...@@ -55,12 +55,12 @@
<body> <body>
<div id='map' class='map'> </div> <div id='map' class='map'> </div>
<div id="results"> <div id="results">
<h2>Click somewhere on map!</h2><div id="loading"><img src="../dist/v1.2.1/images/loading-14-white.gif" width="14" height="14"> Loading...</div> <h2>Click somewhere on map!</h2><div id="loading"><img src="../dist/v1.3.0/images/loading-14-white.gif" width="14" height="14"> Loading...</div>
<div id="latlng"></div> <div id="latlng"></div>
<div id="response"></div> <div id="response"></div>
</div> </div>
<script> <script>
window.L.Icon.Default.imagePath ='../dist/v1.2.1/images/images'; window.L.Icon.Default.imagePath ='../dist/v1.3.0/images/images';
try { try {
L.cedarmaps.accessToken = accessToken; L.cedarmaps.accessToken = accessToken;
......
package.json
View file @ 55f163ca
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
"author": "CedarStudios", "author": "CedarStudios",
"name": "cedarmaps.js", "name": "cedarmaps.js",
"description": "CedarMaps javascript API built on top of mapbox.js", "description": "CedarMaps javascript API built on top of mapbox.js",
"version": "1.2.1", "version": "1.3.0",
"homepage": "http://www.cedarmaps.com/", "homepage": "http://www.cedarmaps.com/",
"repository": { "repository": {
"type": "git", "type": "git",
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
"dependencies": { "dependencies": {
"corslite": "0.0.6", "corslite": "0.0.6",
"isarray": "0.0.1", "isarray": "0.0.1",
"leaflet": "0.7.7", "leaflet": "1.2.0",
"mustache": "0.7.3", "mustache": "0.7.3",
"sanitize-caja": "0.1.3" "sanitize-caja": "0.1.3"
}, },
......
src/cedarmaps.js
View file @ 55f163ca
...@@ -2,13 +2,15 @@ ...@@ -2,13 +2,15 @@
var map = require('./map'), var map = require('./map'),
tileLayer = require('./tile_layer'), tileLayer = require('./tile_layer'),
geocoderControl = require('./geocoder_control'); geocoderControl = require('./geocoder_control');
L.cedarmaps = L.mapbox; L.cedarmaps = L.mapbox;
// Overrides // Overrides
L.cedarmaps.VERSION = require('../package.json').version; L.cedarmaps.VERSION = require('../package.json').version;
L.cedarmaps.geocoder = require('./geocoder'), L.cedarmaps.geocoder = require('./geocoder');
L.cedarmaps.staticMap = require('./static_map');
L.cedarmaps.distance = require('./distance');
L.cedarmaps.map = map.map; L.cedarmaps.map = map.map;
L.cedarmaps.Map = map.Map; L.cedarmaps.Map = map.Map;
L.cedarmaps.tileLayer = tileLayer.tileLayer; L.cedarmaps.tileLayer = tileLayer.tileLayer;
...@@ -23,5 +25,4 @@ module.exports = L.cedarmaps; ...@@ -23,5 +25,4 @@ module.exports = L.cedarmaps;
window.L.Icon.Default.imagePath = window.L.Icon.Default.imagePath =
// Detect bad-news protocols like file:// and hardcode // Detect bad-news protocols like file:// and hardcode
// to https if they're detected. // to https if they're detected.
'dist/v1.0.0/images/images'; 'dist/v1.0.0/images/images';
\ No newline at end of file
src/distance.js 0 → 100644
View file @ 55f163ca
'use strict';
var config = require('./config'),
isArray = require('isarray'),
request = require('./request');
module.exports = function (options, callback) {
if(!options.profile) {
options.profile = 'cedarmaps.driving';
}
if(options.points && isArray(options.points)) {
var param = '';
for(var i = 0, l = options.points.length; i < l; i++) {
param += options.points[i].from.lat + ',' + options.points[i].from.lng + ';';
param += options.points[i].to.lat + ',' + options.points[i].to.lng;
param += '/';
}
var baseUrl = (document.location.protocol === 'https:' || config.FORCE_HTTPS) ? config.HTTPS_URL : config.HTTP_URL;
var url = baseUrl + '/distance/' + options.profile + '/' + param + '?access_token=' + L.cedarmaps.accessToken;
request(url, function(err, json) {
callback(err, json);
})
} else {
throw 'Cedarmaps: Bad input.';
}
}
\ No newline at end of file
src/static_map.js 0 → 100644
View file @ 55f163ca
'use strict';
var config = require('./config');
module.exports = function (options) {
// {
// container: string,
// alttext: string,
// maptype: string,
// position: {
// lat: 35.79,
// lng: 51.41,
// zoom: 13
// },
// dimensions: {
// width: 800,
// height: 600
// }
// scale: bool,
// qs: [
// {
// marker_url: '',
// lat: 35.79,
// lng: 51.41,
// }
// ]
// }
if (!options.maptype) {
options.maptype = 'light';
}
if (!options.alttext) {
options.alttext = 'Cedarmaps static image.';
}
if (!options.position) {
options.position = 'auto';
}
if (!options.dimensions) {
throw 'Cedarmaps: No dimensions specified.';
}
if (!options.container) {
throw 'Cedarmaps: No container selector specified.';
} else if (!document.querySelector(options.container)) {
throw 'Cedarmaps: Could not find element ' + options.container;
}
var position = options.position.lat ? (options.position.lat + ',' + options.position.lng + ',' + options.position.zoom) : options.position;
var baseUrl = (document.location.protocol === 'https:' || config.FORCE_HTTPS) ? config.HTTPS_URL : config.HTTP_URL;
var url = baseUrl + '/static/' + options.maptype +
'/' + position + '/' + options.dimensions.width + 'x' + options.dimensions.height +
(options.scale ? '@2x' : '') + '?access_token=' + L.cedarmaps.accessToken;
if (options.qs && options.qs.length > 0) {
var qs = 'markers=';
for (var i = 0, l = options.qs.length; i < l; i++) {
if (options.qs[i].marker_url) {
options.qs[i].marker_url = 'marker-default';
}
qs += options.qs[i].marker_url + '|' + options.qs[i].lat + ',' + options.qs[i].lng;
}
url += '&' + qs;
}
console.log(url);
var img = document.createElement('img');
img.setAttribute('src', url);
img.setAttribute('alt', options.alttext);
var element = document.querySelector(options.container);
element.appendChild(img);
}
\ No newline at end of file
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