Skip to content

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

Updated static map API

parent c3c1a458
Hide whitespace changes
Inline Side-by-side
Showing with 129 additions and 54 deletions
README.md
View file @ 251d09e5
......@@ -20,8 +20,8 @@ This is CedarMaps Javascript API. It's simply a wrapper for [Mapbox Javascript A
Recommended usage is via the CedarMaps CDN:
```html
<script src='http://api.cedarmaps.com/cedarmaps.js/v1.5.0/cedarmaps.js'></script>
<link href='http://api.cedarmaps.com/cedarmaps.js/v1.5.0/cedarmaps.css' rel='stylesheet' />
<script src='http://api.cedarmaps.com/cedarmaps.js/v1.6.0/cedarmaps.js'></script>
<link href='http://api.cedarmaps.com/cedarmaps.js/v1.6.0/cedarmaps.css' rel='stylesheet' />
```
The `cedarmaps.js` file includes the Leaflet library. Alternatively, you can use `cedarmaps.standalone.js`, which does not include Leaflet (you will have to provide it yourself).
......
demos/geocoder-control.html
View file @ 251d09e5
......@@ -5,9 +5,9 @@
<meta charset=utf-8 />
<title>CedarMaps - Sample Geocoder Control</title>
<script src='../dist/v1.5.0/cedarmaps.js'></script>
<script src='../dist/v1.6.0/cedarmaps.js'></script>
<script src='../access-token.js'></script>
<link href='../dist/v1.5.0/cedarmaps.css' rel='stylesheet' />
<link href='../dist/v1.6.0/cedarmaps.css' rel='stylesheet' />
<link href='css/styles.css' rel='stylesheet' />
......
demos/index.html
View file @ 251d09e5
......@@ -5,9 +5,9 @@
<meta charset=utf-8 />
<title>CedarMaps - Simple Map Load</title>
<script src='../dist/v1.5.0/cedarmaps.uncompressed.js'></script>
<script src='../dist/v1.6.0/cedarmaps.uncompressed.js'></script>
<script src='../access-token.js'></script>
<link href='../dist/v1.5.0/cedarmaps.css' rel='stylesheet' />
<link href='../dist/v1.6.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.4.1/images/pin-taxi.png',
iconRetinaUrl: '../dist/v1.4.1/images/pin-taxi@2x.png',
iconUrl: '../dist/v1.6.0/images/pin-taxi.png',
iconRetinaUrl: '../dist/v1.6.0/images/pin-taxi@2x.png',
iconSize: [34, 46],
iconAnchor: [17, 41],
popupAnchor: [-3, -46],
shadowUrl: '../dist/v1.4.1/images/pin-shadow.png',
shadowRetinaUrl: '../dist/v1.4.1/images/pin-shadow@2x.png',
shadowUrl: '../dist/v1.6.0/images/pin-shadow.png',
shadowRetinaUrl: '../dist/v1.6.0/images/pin-shadow@2x.png',
shadowSize: [26, 6],
shadowAnchor: [13, 3]
});
......
demos/nearby.html
View file @ 251d09e5
......@@ -5,9 +5,9 @@
<meta charset=utf-8 />
<title>CedarMaps - Simple Map Load</title>
<script src='../dist/v1.5.0/cedarmaps.uncompressed.js'></script>
<script src='../dist/v1.6.0/cedarmaps.uncompressed.js'></script>
<script src='../access-token.js'></script>
<link href='../dist/v1.5.0/cedarmaps.css' rel='stylesheet' />
<link href='../dist/v1.6.0/cedarmaps.css' rel='stylesheet' />
<style>
body {
......
demos/reverse-geocoder.html
View file @ 251d09e5
......@@ -5,9 +5,9 @@
<meta charset=utf-8 />
<title>CedarMaps - Reverse Geocoding Sample</title>
<script src='../dist/v1.5.0/cedarmaps.js'></script>
<script src='../dist/v1.6.0/cedarmaps.js'></script>
<script src='../access-token.js'></script>
<link href='../dist/v1.5.0/cedarmaps.css' rel='stylesheet' />
<link href='../dist/v1.6.0/cedarmaps.css' rel='stylesheet' />
<style>
body {
......@@ -55,12 +55,12 @@
<body>
<div id='map' class='map'> </div>
<div id="results">
<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>
<h2>Click somewhere on map!</h2><div id="loading"><img src="../dist/v1.6.0/images/loading-14-white.gif" width="14" height="14"> Loading...</div>
<div id="latlng"></div>
<div id="response"></div>
</div>
<script>
window.L.Icon.Default.imagePath ='../dist/v1.4.1/images/';
window.L.Icon.Default.imagePath ='../dist/v1.6.0/images/';
try {
L.cedarmaps.accessToken = accessToken;
......
demos/static-image.html 0 → 100644
View file @ 251d09e5
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>CedarMaps - Simple Map Load</title>
<script src='../dist/v1.6.0/cedarmaps.uncompressed.js'></script>
<script src='../access-token.js'></script>
<link href='../dist/v1.6.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"></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>');
}
var sm = L.cedarmaps.staticMap({
alttext: 'A map with all the staticness',
maptype: 'light',
dimensions: {
width: 800,
height: 600
},
scale: false,
qs: [{
marker_url: '',
lat: 35.79,
lng: 51.41,
},
{
marker_url: '',
lat: 35.83,
lng: 51.45,
}
]
});
console.log(sm.getUrl())
sm.createImage('#map')
</script>
</body>
</html>
\ No newline at end of file
package.json
View file @ 251d09e5
......@@ -2,7 +2,7 @@
"author": "CedarStudios",
"name": "cedarmaps.js",
"description": "CedarMaps javascript API built on top of mapbox.js",
"version": "1.5.0",
"version": "1.6.0",
"homepage": "http://www.cedarmaps.com/",
"repository": {
"type": "git",
......
src/static_map.js
View file @ 251d09e5
......@@ -2,28 +2,28 @@
var config = require('./config');
module.exports = function (container, options) {
// {
// 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,
// }
// ]
// }
module.exports = function (options) {
// {
// 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';
}
......@@ -33,42 +33,54 @@ module.exports = function (container, options) {
if (!options.position) {
options.position = 'auto';
} else {
if(typeof options.position !== 'object') {
if (typeof options.position !== 'object') {
throw 'Unknown value for position.'
}
}
if (!options.dimensions) {
throw 'Cedarmaps: No dimensions specified.';
} else {
if(typeof options.dimensions !== 'object') {
if (typeof options.dimensions !== 'object') {
throw 'Unknown value for position.'
}
}
if (!container) {
throw 'Cedarmaps: No container selector specified.';
} else if (!document.querySelector(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=';
var param = []
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 + '|';
param.push(options.qs[i].marker_url)
param.push(options.qs[i].lat + ',' + options.qs[i].lng)
}
url += '&' + qs;
url += '&markers=' + param.join('|');
}
var getUrl = function () {
return url;
}
var img = document.createElement('img');
img.setAttribute('src', url);
img.setAttribute('alt', options.alttext);
var createImage = function(container) {
if (!container) {
throw 'Cedarmaps: No container selector specified.';
} else if (!document.querySelector(container)) {
throw 'Cedarmaps: Could not find element ' + container;
}
var img = document.createElement('img');
img.setAttribute('src', url);
img.setAttribute('alt', options.alttext);
var element = document.querySelector(container);
element.appendChild(img);
}
var element = document.querySelector(options.container);
element.appendChild(img);
return {
getUrl: getUrl,
createImage: createImage
}
}
\ 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