Skip to content

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

Added direction API along with a sample implementation

parent 3591c491
Hide whitespace changes
Inline Side-by-side
Showing with 142 additions and 23 deletions
README.md
View file @ b0ca239a
......@@ -18,8 +18,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.7.0/cedarmaps.js'></script>
<link href='http://api.cedarmaps.com/cedarmaps.js/v1.7.0/cedarmaps.css' rel='stylesheet' />
<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' />
```
and put the following code in the `<body>` of your HTML file:
......
demos/address-locator.html
View file @ b0ca239a
......@@ -6,13 +6,17 @@
<title>CedarMaps - Address Locator Tool</title>
<script src='../dist/v1.7.0/cedarmaps.js'></script>
<script src='../dist/v1.8.0/cedarmaps.js'></script>
<script src='../access-token.js'></script>
<!-- Third party libraries used in this demo -->
<script src='./js/auto-complete.js'></script>
<script src='./js/L.Control.Locate.min.js'></script>
<link href='../dist/v1.7.0/cedarmaps.css' rel='stylesheet' />
<link href='../dist/v1.8.0/cedarmaps.css' rel='stylesheet' />
<link href='./css/address-locator.css' rel='stylesheet' />
<!-- Third party libraries used in this demo -->
<link href='./css/auto-complete.css' rel='stylesheet' />
<link href='./css/L.Control.Locate.min.css' rel='stylesheet' />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
......@@ -23,7 +27,7 @@
<body>
<div id='map' class='map'> </div>
<div id="form" class="text-right">
<div id="loading"><img src="../dist/v1.7.0/images/loading-14-blue.gif" width="14" height="14">&nbsp;&nbsp;لطفا صبر کنید...</div>
<div id="loading"><img src="../dist/v1.8.0/images/loading-14-blue.gif" width="14" height="14">&nbsp;&nbsp;لطفا صبر کنید...</div>
<h1 class="text-center">ابزار جستجوی آدرس در ایران</h1>
<div class="form-component">
<label for="provinces">استان</label>
......
demos/direction.html 0 → 100644
View file @ b0ca239a
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>CedarMaps - Simple Map Load</title>
<script src='../dist/v1.8.0/cedarmaps.uncompressed.js'></script>
<script src='../access-token.js'></script>
<script src='./js/leaflet-omnivore.min.js'></script>
<link href='../dist/v1.8.0/cedarmaps.css' rel='stylesheet' />
<style>
body {
margin: 0;
padding: 0;
}
.map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<div id='map' class='map'> </div>
<script>
try {
L.cedarmaps.accessToken = accessToken;
} 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 into div#map
var map = L.cedarmaps.map('map', tileJSONUrl, {
scrollWheelZoom: true
}).setView([35.757448286487595, 51.40876293182373], 15);
/**
* Initilizing Direction
*/
var direction = L.cedarmaps.direction();
// you should provide start/end/middle points in the following format: lat,ln;lat,lng;lat,lng
direction.route('cedarmaps.driving', '35.764335,51.365622;35.763316,51.365322', function(err, json) {
var geometry = json.result.routes[0].geometry;
var route = L.geoJSON(geometry, {
// for more path options see: https://leafletjs.com/reference-1.3.0.html#path-option
style: function(feature) {
return {
color: '#f00',
weight: 5
}
}
}).addTo(map);
map.fitBounds(route.getBounds());
});
</script>
</body>
</html>
\ No newline at end of file
demos/drawing-kml.html
View file @ b0ca239a
......@@ -5,11 +5,11 @@
<meta charset=utf-8 />
<title>CedarMaps - Simple Map Load</title>
<script src='../dist/v1.7.0/cedarmaps.uncompressed.js'></script>
<script src='../dist/v1.8.0/cedarmaps.uncompressed.js'></script>
<script src='../access-token.js'></script>
<script src='./js/leaflet-omnivore.min.js'></script>
<link href='../dist/v1.7.0/cedarmaps.css' rel='stylesheet' />
<link href='../dist/v1.8.0/cedarmaps.css' rel='stylesheet' />
<style>
body {
......@@ -57,6 +57,7 @@
// We draw a sample route to map using a test kml file.
// We use leaflet-omnivore plugin for parsing this format: https://github.com/mapbox/leaflet-omnivore
var customLayer = L.geoJson(null, {
// http://leafletjs.com/reference.html#geojson-style
style: function(feature) {
return { color: '#f00' };
......
demos/geocoder-control.html
View file @ b0ca239a
......@@ -5,9 +5,9 @@
<meta charset=utf-8 />
<title>CedarMaps - Sample Geocoder Control</title>
<script src='../dist/v1.7.0/cedarmaps.js'></script>
<script src='../dist/v1.8.0/cedarmaps.js'></script>
<script src='../access-token.js'></script>
<link href='../dist/v1.7.0/cedarmaps.css' rel='stylesheet' />
<link href='../dist/v1.8.0/cedarmaps.css' rel='stylesheet' />
<link href='css/styles.css' rel='stylesheet' />
......
demos/index.html
View file @ b0ca239a
......@@ -5,9 +5,9 @@
<meta charset=utf-8 />
<title>CedarMaps - Simple Map Load</title>
<script src='../dist/v1.7.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.7.0/cedarmaps.css' rel='stylesheet' />
<link href='../dist/v1.8.0/cedarmaps.css' rel='stylesheet' />
<style>
body {
......@@ -53,13 +53,13 @@
// see: http://leafletjs.com/reference.html#marker
var myIcon = L.icon({
iconUrl: '../dist/v1.7.0/images/pin-taxi.png',
iconRetinaUrl: '../dist/v1.7.0/images/pin-taxi@2x.png',
iconUrl: '../dist/v1.8.0/images/pin-taxi.png',
iconRetinaUrl: '../dist/v1.8.0/images/pin-taxi@2x.png',
iconSize: [34, 46],
iconAnchor: [17, 41],
popupAnchor: [-3, -46],
shadowUrl: '../dist/v1.7.0/images/pin-shadow.png',
shadowRetinaUrl: '../dist/v1.7.0/images/pin-shadow@2x.png',
shadowUrl: '../dist/v1.8.0/images/pin-shadow.png',
shadowRetinaUrl: '../dist/v1.8.0/images/pin-shadow@2x.png',
shadowSize: [26, 6],
shadowAnchor: [13, 3]
});
......
demos/nearby.html
View file @ b0ca239a
......@@ -5,9 +5,9 @@
<meta charset=utf-8 />
<title>CedarMaps - Simple Map Load</title>
<script src='../dist/v1.7.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.7.0/cedarmaps.css' rel='stylesheet' />
<link href='../dist/v1.8.0/cedarmaps.css' rel='stylesheet' />
<style>
body {
......
demos/reverse-geocoder.html
View file @ b0ca239a
......@@ -5,11 +5,11 @@
<meta charset=utf-8 />
<title>CedarMaps - Reverse Geocoding Sample</title>
<script src='../dist/v1.7.0/cedarmaps.js'></script>
<script src='../dist/v1.8.0/cedarmaps.js'></script>
<script src='../access-token.js'></script>
<script src='./js/L.Control.Locate.min.js'></script>
<link href='../dist/v1.7.0/cedarmaps.css' rel='stylesheet' />
<link href='../dist/v1.8.0/cedarmaps.css' rel='stylesheet' />
<link href='./css/address-locator.css' rel='stylesheet' />
<link href='./css/L.Control.Locate.min.css' rel='stylesheet' />
<link href='./css/reverse-geocoder.css' rel='stylesheet' />
......@@ -19,7 +19,7 @@
<body>
<div id='map' class='map'> </div>
<div id="results">
<h2 style="text-align: center;">Click somewhere on the map!</h2><div id="loading"><img src="../dist/v1.7.0/images/loading-14-blue.gif" width="14" height="14"> Loading...</div>
<h2 style="text-align: center;">Click somewhere on the map!</h2><div id="loading"><img src="../dist/v1.8.0/images/loading-14-blue.gif" width="14" height="14"> Loading...</div>
<div id="latlng"></div>
<div id="parsed-response"></div>
<div id="raw-response"></div>
......
demos/static-image.html
View file @ b0ca239a
......@@ -5,9 +5,9 @@
<meta charset=utf-8 />
<title>CedarMaps - Simple Map Load</title>
<script src='../dist/v1.7.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.7.0/cedarmaps.css' rel='stylesheet' />
<link href='../dist/v1.8.0/cedarmaps.css' rel='stylesheet' />
<style>
body {
......
package.json
View file @ b0ca239a
......@@ -2,7 +2,7 @@
"author": "CedarStudios",
"name": "cedarmaps.js",
"description": "CedarMaps javascript API built on top of mapbox.js",
"version": "1.7.0",
"version": "1.8.0",
"homepage": "http://www.cedarmaps.com/",
"repository": {
"type": "git",
......
src/cedarmaps.js
View file @ b0ca239a
......@@ -13,6 +13,7 @@ L.cedarmaps.staticMap = require('./static_map');
L.cedarmaps.nearby = require('./nearby');
L.cedarmaps.distance = require('./distance');
L.cedarmaps.administrativeBoundaries = require('./administrative_boundaries');
L.cedarmaps.direction = require('./direction');
L.cedarmaps.map = map.map;
L.cedarmaps.Map = map.Map;
L.cedarmaps.tileLayer = tileLayer.tileLayer;
......
src/direction.js 0 → 100644
View file @ b0ca239a
'use strict';
var isArray = require('isarray'),
util = require('mapbox.js/src/util'),
format_url = require('./format_url'),
request = require('./request');
module.exports = function(options) {
if (!options) options = {};
var direction = {};
direction.getURL = function(profile) {
var profile = profile || 'cedarmaps.driving';
return format_url('/direction/'+profile+'/{points}', options.accessToken);
};
direction.queryURL = function(profile, points) {
var url = L.Util.template(direction.getURL(profile), {points: points});
return url;
};
direction.route = function(profile, points, callback) {
util.strict(callback, 'function');
request(direction.queryURL(profile, points), function(err, json) {
if (json && (json.length || json.result)) {
callback(null, json);
} else callback(err || true);
});
return direction;
};
return direction;
};
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