Skip to content

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

Fixed nearby widget bug

parent e655f2ac
Hide whitespace changes
Inline Side-by-side
Showing with 216 additions and 199 deletions
README.md
View file @ f3929ca8
......@@ -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.4.1/cedarmaps.js'></script>
<link href='http://api.cedarmaps.com/cedarmaps.js/v1.4.1/cedarmaps.css' rel='stylesheet' />
<script src='http://api.cedarmaps.com/cedarmaps.js/v1.4.2/cedarmaps.js'></script>
<link href='http://api.cedarmaps.com/cedarmaps.js/v1.4.2/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 @ f3929ca8
......@@ -5,9 +5,9 @@
<meta charset=utf-8 />
<title>CedarMaps - Sample Geocoder Control</title>
<script src='../dist/v1.4.1/cedarmaps.js'></script>
<script src='../dist/v1.4.2/cedarmaps.js'></script>
<script src='../access-token.js'></script>
<link href='../dist/v1.4.1/cedarmaps.css' rel='stylesheet' />
<link href='../dist/v1.4.2/cedarmaps.css' rel='stylesheet' />
<link href='css/styles.css' rel='stylesheet' />
......
demos/index.html
View file @ f3929ca8
......@@ -5,9 +5,9 @@
<meta charset=utf-8 />
<title>CedarMaps - Simple Map Load</title>
<script src='../dist/v1.4.1/cedarmaps.uncompressed.js'></script>
<script src='../dist/v1.4.2/cedarmaps.uncompressed.js'></script>
<script src='../access-token.js'></script>
<link href='../dist/v1.4.1/cedarmaps.css' rel='stylesheet' />
<link href='../dist/v1.4.2/cedarmaps.css' rel='stylesheet' />
<style>
body {
......
demos/nearby.html
View file @ f3929ca8
......@@ -5,9 +5,9 @@
<meta charset=utf-8 />
<title>CedarMaps - Simple Map Load</title>
<script src='../dist/v1.4.1/cedarmaps.uncompressed.js'></script>
<script src='../dist/v1.4.2/cedarmaps.uncompressed.js'></script>
<script src='../access-token.js'></script>
<link href='../dist/v1.4.1/cedarmaps.css' rel='stylesheet' />
<link href='../dist/v1.4.2/cedarmaps.css' rel='stylesheet' />
<style>
body {
......@@ -33,13 +33,18 @@
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>');
}
L.cedarmaps.nearby('map', [35.737334, 51.355215], {
accessToken: accessToken,
L.cedarmaps.nearby('map', [35.737334, 51.355215], {
categories: ['bus', 'park', 'shopping', 'hospital', 'school'],
searchDistance: 5,
popupContent: '<h2>html is allowed here</h2>',
defaultZoom: 20
});
defaultZoom: 20,
callback: function(map, center_marker, pois) {
setTimeout(function() {
center_marker.setLatLng({lat: 35.738934, lon: 51.356315})
map.setView({lat: 35.738934, lon: 51.356315})
}, 10000)
}
});
</script>
</body>
......
demos/reverse-geocoder.html
View file @ f3929ca8
......@@ -5,9 +5,9 @@
<meta charset=utf-8 />
<title>CedarMaps - Reverse Geocoding Sample</title>
<script src='../dist/v1.4.1/cedarmaps.js'></script>
<script src='../dist/v1.4.2/cedarmaps.js'></script>
<script src='../access-token.js'></script>
<link href='../dist/v1.4.1/cedarmaps.css' rel='stylesheet' />
<link href='../dist/v1.4.2/cedarmaps.css' rel='stylesheet' />
<style>
body {
......
package.json
View file @ f3929ca8
......@@ -2,7 +2,7 @@
"author": "CedarStudios",
"name": "cedarmaps.js",
"description": "CedarMaps javascript API built on top of mapbox.js",
"version": "1.4.1",
"version": "1.4.2",
"homepage": "http://www.cedarmaps.com/",
"repository": {
"type": "git",
......
src/nearby.js
View file @ f3929ca8
......@@ -6,14 +6,15 @@ var corslite = require('corslite')
module.exports = function (container, center, options) {
/*
{
defaultZoom: int,
defaultZoom: int,
centerMarkerIcon: L.icon,
categories: [string, string],
poiLimit: int,
seachDistance: int,
popupContent: string,
noPoiLink: boolean,
lockScroll: boolean,
callback: fn(map, center_marker, pois)
callback: fn(map, center_marker)
}
*/
var stringHelpers = {
......@@ -23,20 +24,96 @@ module.exports = function (container, center, options) {
}
var foreignChars = ['ي', 'ك', '‍', 'دِ', 'بِ', 'زِ', 'ذِ', 'ِشِ', 'ِسِ', '‌', 'ى', '1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],
persianChars = ['ی', 'ک', '', 'د', 'ب', 'ز', 'ذ', 'ش', 'س', '', 'ی', '۱', '۲', '۳', '۴', '۵', '۶', '۷', '۸', '۹', '۰'];
for (var i = 0, charsLen = foreignChars.length; i < charsLen; i++) {
string = string.replace(new RegExp(foreignChars[i], 'g'), persianChars[i]);
}
return string;
},
digitSeperator: function (num) {
return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
}
var getPois = function (center) {
for(var cfg in categoryFeatureGroups) {
map.removeLayer(categoryFeatureGroups[cfg])
}
if (options.categories) {
for (var i = 0, l = options.categories.length; i < l; i++) {
(function (cat_index) {
var category = options.categories[cat_index];
if (availableCategories[category]) {
var categoryFeatureGroup = new L.FeatureGroup();
corslite('https://www.kikojas.com/api/search?cat=' + availableCategories[category].name + '&latlng=' + center.lat + ',' + center.lng + '&limit=' + (options.poiLimit ? options.poiLimit : 3) + '&distance=' + (options.seachDistance ? options.seachDistance : 2), function (err, resp) {
if (err) {
throw err;
}
var kikojasResponse = JSON.parse(resp.response);
if (kikojasResponse.meta.code === 200) {
var pois = kikojasResponse.response.items;
pois.forEach(function (poi) {
var popupContent = '<div class="tooltip-wrapper">\
<div class="basic-info">\
<div class="icon"><img width="32" height="32" alt="' + availableCategories[category].name + '" src="https://www.kikojas.com' + poi.categories[0].icon + '"></div>\
<div class="details">';
if (options.noPoiLink && options.noPoiLink == true) {
popupContent += '<div class="title">' + poi.full_name + '</div>';
} else {
popupContent += '<div class="title"><a href="https://www.kikojas.com' + poi.url + '" target="_blank">' + poi.full_name + '</a></div>';
}
popupContent += '<div class="category">' + poi.categories[0].name + '</div>\
<div class="address">' + poi.address + '</div>\
</div>\
</div>\
<div class="routing" data-from="' + center.lat + ',' + center.lng + '" data-to="' + poi.latlng + '" onclick="routing(this)")">\
<span class="distance">در حال محاسبه فاصله <img src="https://tools.kikojas.com/images/loading-14-blue.gif"/></span>\
<div class="route">مسیریابی <img src="https://tools.kikojas.com/images/route-icon.png"/></div>\
</div>\
<div class="clear"></div>\
</div>';
var catMarker = L.marker({
lon: poi.lng,
lat: poi.lat
}, {
icon: L.divIcon({
html: category == 'bus' ? '' : '<img style="width:27px; margin:2px;" src="https://www.kikojas.com/img/categories/red/32/' + availableCategories[category].slug + '.png"/>',
iconSize: [34, 44],
className: 'kikojas-map-marker',
iconAnchor: [31, 41],
shadowUrl: 'https://www.kikojas.com/img/marker-shadow.png',
shadowSize: [61, 20],
shadowAnchor: [59, 5],
bgPos: {
x: category == 'bus' ? 33 * 36 : 30 * 36,
y: 0
}
})
}).bindPopup(popupContent, {
offset: new L.Point(-15, -33),
closeButton: false,
maxWidth: 420,
autoPan: true
});
var marker_tools = new markerTools(catMarker)
catMarker.on('mouseover', marker_tools.onMarkerMouseOver).on('mouseout', marker_tools.onMarkerMouseOut);
categoryFeatureGroup.addLayer(catMarker);
pois.push(catMarker);
}, this);
}
}, true);
categoryFeatureGroups[category] = categoryFeatureGroup;
map.addLayer(categoryFeatureGroup);
}
})(i);
}
}
}
var markerTools = function (marker) {
this.activeMarker = null;
function _toggleMarkerStatus(status) {
var markerIcon = marker._icon,
currentBgPosition = markerIcon.style.backgroundPosition,
......@@ -62,7 +139,7 @@ module.exports = function (container, center, options) {
marker.isActive = false;
break;
}
markerIcon.style.backgroundPosition = newBgPostion;
};
return {
......@@ -78,53 +155,53 @@ module.exports = function (container, center, options) {
}
}
}
}
if(!options.lockScroll) {
}
if (!options.lockScroll) {
options.lockScroll = false;
}
var pois = [];
var availableCategories = {
park: {
slug: 'park',
id: 11,
parentId: 1,
name: 'پارک و بوستان',
short_name: 'پارک'
},
bus: {
slug: 'bus-stop',
id: 3,
parentId: 1,
name: 'ایستگاه اتوبوس',
short_name: 'اتوبوس'
},
shopping: {
slug: 'shopping-center',
id: 208,
parentId: 160,
name: 'پاساژ و مرکز خرید',
short_name: 'خرید'
},
hospital: {
slug: 'hospital',
id: 59,
parentId: 55,
name: 'بیمارستان',
short_name: 'درمانی'
},
school: {
slug: 'school',
id: 36,
parentId: 28,
name: 'مدرسه',
short_name: 'مدرسه'
}
park: {
slug: 'park',
id: 11,
parentId: 1,
name: 'پارک و بوستان',
short_name: 'پارک'
},
bus: {
slug: 'bus-stop',
id: 3,
parentId: 1,
name: 'ایستگاه اتوبوس',
short_name: 'اتوبوس'
},
shopping: {
slug: 'shopping-center',
id: 208,
parentId: 160,
name: 'پاساژ و مرکز خرید',
short_name: 'خرید'
},
hospital: {
slug: 'hospital',
id: 59,
parentId: 55,
name: 'بیمارستان',
short_name: 'درمانی'
},
school: {
slug: 'school',
id: 36,
parentId: 28,
name: 'مدرسه',
short_name: 'مدرسه'
}
},
// Tehran bounds with extra padding
southWest = new L.LatLng(35.3930, 51.0219),
northEast = new L.LatLng(35.8267, 51.6426),
bounds = new L.LatLngBounds(southWest, northEast),
categoryFeatureGroups = [],
categoryFeatureGroups = {},
pois = [],
geoJsonLayer;
/**
......@@ -133,173 +210,109 @@ module.exports = function (container, center, options) {
// Getting maps info from a tileJSON source
var tileJSONUrl = 'https://api.cedarmaps.com/v1/tiles/cedarmaps.streets.json?access_token=' + L.cedarmaps.accessToken;
var containerElement = document.getElementById(container);
containerElement.className += ' kikojas-nearby-widget';
var map = L.cedarmaps.map(container, tileJSONUrl, {
var map = L.cedarmaps.map(container, tileJSONUrl, {
maxBounds: bounds,
minZoom: 12,
maxZoom: 17,
zoomControl: options.lockScroll,
scrollWheelZoom: !options.lockScroll
}).setView(center, options.defaultZoom ? options.defaultZoom : 15);
map.on('popupopen', function (e) {
window.distance(e.popup._contentNode.getElementsByClassName('routing')[0]);
});
getPois({lat: center[0], lng: center[1]});
if (options.categories) {
for (var i = 0, l = options.categories.length; i < l; i++) {
(function (cat_index) {
var category = options.categories[cat_index];
if (availableCategories[category]) {
var categoryFeatureGroup = new L.FeatureGroup();
corslite('https://www.kikojas.com/api/search?cat=' + availableCategories[category].name + '&latlng=' + center[0] + ',' + center[1] + '&limit=' + (options.poiLimit ? options.poiLimit : 3) + '&distance=' + (options.seachDistance ? options.seachDistance : 2), function (err, resp) {
if (err) {
throw err;
}
var kikojasResponse = JSON.parse(resp.response);
if (kikojasResponse.meta.code === 200) {
var pois = kikojasResponse.response.items;
pois.forEach(function (poi) {
var popupContent = '<div class="tooltip-wrapper">\
<div class="basic-info">\
<div class="icon"><img width="32" height="32" alt="' + availableCategories[category].name + '" src="https://www.kikojas.com' + poi.categories[0].icon + '"></div>\
<div class="details">';
if(options.noPoiLink && options.noPoiLink == true) {
popupContent += '<div class="title">' + poi.full_name + '</div>';
} else {
popupContent += '<div class="title"><a href="https://www.kikojas.com' + poi.url + '" target="_blank">' + poi.full_name + '</a></div>';
}
popupContent += '<div class="category">' + poi.categories[0].name + '</div>\
<div class="address">' + poi.address + '</div>\
</div>\
</div>\
<div class="routing" data-from="' + center[0] + ',' + center[1] + '" data-to="' + poi.latlng + '" onclick="routing(this)")">\
<span class="distance">در حال محاسبه فاصله <img src="https://tools.kikojas.com/images/loading-14-blue.gif"/></span>\
<div class="route">مسیریابی <img src="https://tools.kikojas.com/images/route-icon.png"/></div>\
</div>\
<div class="clear"></div>\
</div>';
var catMarker = L.marker({
lon: poi.lng,
lat: poi.lat
}, {
icon: L.divIcon({
html: category == 'bus' ? '' : '<img style="width:27px; margin:2px;" src="https://www.kikojas.com/img/categories/red/32/' + availableCategories[category].slug + '.png"/>',
iconSize: [34, 44],
className: 'kikojas-map-marker',
iconAnchor: [31, 41],
shadowUrl: 'https://www.kikojas.com/img/marker-shadow.png',
shadowSize: [61, 20],
shadowAnchor: [59, 5],
bgPos: {
x: category == 'bus' ? 33 * 36 : 30 * 36,
y: 0
}
})
}).bindPopup(popupContent, {
offset: new L.Point(-15, -33),
closeButton: false,
maxWidth: 420,
autoPan: true
});
var marker_tools = new markerTools(catMarker)
catMarker.on('mouseover', marker_tools.onMarkerMouseOver).on('mouseout', marker_tools.onMarkerMouseOut);
categoryFeatureGroup.addLayer(catMarker);
pois.push(catMarker);
}, this);
if (i == l - 1 && options.callback) {
options.callback(map, centerMarker, pois);
}
}
}, true);
categoryFeatureGroups.push(categoryFeatureGroup);
for (var layer_index = 0, total_layers = categoryFeatureGroups.length; layer_index < total_layers; layer_index++) {
map.addLayer(categoryFeatureGroups[layer_index]);
}
map.on('popupopen', function (e) {
window.distance(e.popup._contentNode.getElementsByClassName('routing')[0]);
});
}
})(i);
}
}
var centerMarker = L.marker({
lon: center[1],
lat: center[0]
}, {
zIndexOffset: 1000,
icon: L.divIcon({
iconSize: [34, 44],
className: 'kikojas-map-marker',
iconAnchor: [31, 41],
shadowUrl: 'https://www.kikojas.com/img/marker-shadow.png',
shadowSize: [61, 20],
shadowAnchor: [59, 5],
bgPos: {
x: 34 * 36,
y: 0
}
})
}).addTo(map);
zIndexOffset: 1000,
icon: options.centerMarkerIcon ? options.centerMarkerIcon : L.divIcon({
iconSize: [34, 44],
className: 'kikojas-map-marker',
iconAnchor: [31, 41],
shadowUrl: 'https://www.kikojas.com/img/marker-shadow.png',
shadowSize: [61, 20],
shadowAnchor: [59, 5],
bgPos: {
x: 34 * 36,
y: 0
}
})
}).addTo(map);
var center_marker_tools = new markerTools(centerMarker);
centerMarker.on('mouseover', center_marker_tools.onMarkerMouseOver).on('mouseout', center_marker_tools.onMarkerMouseOut)
centerMarker.on('mouseover', center_marker_tools.onMarkerMouseOver)
.on('mouseout', center_marker_tools.onMarkerMouseOut)
.on('move', function (evt) {
getPois(evt.latlng)
})
if (options.popupContent) {
centerMarker.bindPopup('<div class="basic-info">' + options.popupContent + '</div>', {
offset: new L.Point(-15, -33),
closeButton: false,
className: 'leaflet-popup-poi',
maxWidth: document.getElementById(container).offsetWidth - 20
}).on('popupopen', function(e) {
}).on('popupopen', function (e) {
e.popup.update();
});
}
if (options.callback) {
options.callback(map, centerMarker);
}
L.Control.CategoryToggle = L.Control.extend({
onAdd: function (map) {
var divControlContainer = L.DomUtil.create('div');
L.DomUtil.addClass(divControlContainer, 'category-panel slider js_slider');
var mapWidth = document.querySelector('#' + (options.mapContainer ? options.mapContainer : 'map')).offsetWidth;
var mapWidth = document.getElementById(container).offsetWidth;
var panelWidth = (mapWidth - 20);
var frameWidth = (panelWidth - 50);
var frameWidth = (panelWidth - 50);
var ul = L.DomUtil.create('ul');
L.DomUtil.addClass(ul, 'tg-list');
for (var i = 0, l = options.categories.length; i < l; i++) {
var category = options.categories[i];
if (availableCategories[category]) {
var cat = availableCategories[category];
var categoryListItem = L.DomUtil.create('li', 'tg-list-item');
var categoryInput = L.DomUtil.create('input', 'tgl tgl-flip');
categoryInput.setAttribute('type', 'checkbox');
categoryInput.setAttribute('id', cat.slug);
var categoryLabel = L.DomUtil.create('label', 'tgl-btn');
categoryLabel.setAttribute('data-tg-off', cat.short_name);
categoryLabel.setAttribute('data-tg-on', cat.short_name);
categoryLabel.setAttribute('data-toggle', 'on');
categoryLabel.setAttribute('data-cat', i);
categoryLabel.setAttribute('for', cat.slug);
categoryListItem.appendChild(categoryInput);
categoryListItem.appendChild(categoryLabel);
if (options.categories) {
for (var i = 0, l = options.categories.length; i < l; i++) {
var category = options.categories[i];
if (availableCategories[category]) {
var cat = availableCategories[category];
var categoryListItem = L.DomUtil.create('li', 'tg-list-item');
var categoryInput = L.DomUtil.create('input', 'tgl tgl-flip');
categoryInput.setAttribute('type', 'checkbox');
categoryInput.setAttribute('id', cat.slug);
var categoryLabel = L.DomUtil.create('label', 'tgl-btn');
categoryLabel.setAttribute('data-tg-off', cat.short_name);
categoryLabel.setAttribute('data-tg-on', cat.short_name);
categoryLabel.setAttribute('data-toggle', 'on');
categoryLabel.setAttribute('data-cat', options.categories[i]);
categoryLabel.setAttribute('for', cat.slug);
categoryListItem.appendChild(categoryInput);
categoryListItem.appendChild(categoryLabel);
categoryListItem.onclick = function (event) {
if (event.target.getAttribute('data-cat')) {
if (event.target.getAttribute('data-toggle') == "on") {
map.removeLayer(categoryFeatureGroups[event.target.getAttribute('data-cat')]);
event.target.setAttribute('data-toggle', 'off');
} else {
map.addLayer(categoryFeatureGroups[event.target.getAttribute('data-cat')]);
event.target.setAttribute('data-toggle', 'on');
}
var bounds = [];
categoryFeatureGroups.forEach(function (featureGroup) {
if(featureGroup.getBounds().isValid()) {
bounds.push(featureGroup.getBounds());
}
});
if(bounds.length > 0) {
map.fitBounds(bounds);
categoryListItem.onclick = function (event) {
if (event.target.getAttribute('data-cat')) {
if (event.target.getAttribute('data-toggle') == "on") {
map.removeLayer(categoryFeatureGroups[event.target.getAttribute('data-cat')]);
event.target.setAttribute('data-toggle', 'off');
} else {
map.addLayer(categoryFeatureGroups[event.target.getAttribute('data-cat')]);
event.target.setAttribute('data-toggle', 'on');
}
var bounds = [];
for(var cfg in categoryFeatureGroups) {
if (categoryFeatureGroups[cfg].getBounds().isValid()) {
bounds.push(categoryFeatureGroups[cfg].getBounds());
}
}
if (bounds.length > 0) {
map.fitBounds(bounds);
}
}
}
ul.appendChild(categoryListItem);
}
ul.appendChild(categoryListItem);
}
}
divControlContainer.appendChild(ul);
......@@ -307,7 +320,7 @@ module.exports = function (container, center, options) {
return divControlContainer;
},
onRemove: function (map) {}
onRemove: function (map) { }
});
L.control.categoryToggle = function (opts) {
return new L.Control.CategoryToggle(opts);
......@@ -315,10 +328,9 @@ module.exports = function (container, center, options) {
L.control.categoryToggle({
position: 'topright'
}).addTo(map);
window.cedarMapsAccessToken = options.accessToken;
window.routing = function (el) {
if (el && el.getAttribute('data-from') && el.getAttribute('data-to')) {
corslite('https://api.cedarmaps.com/v1/direction/cedarmaps.driving/' + el.getAttribute('data-from') + ';' + el.getAttribute('data-to') + '?access_token=' + window.cedarMapsAccessToken, function (err, result) {
corslite('https://api.cedarmaps.com/v1/direction/cedarmaps.driving/' + el.getAttribute('data-from') + ';' + el.getAttribute('data-to') + '?access_token=' + L.cedarmaps.accessToken, function (err, result) {
if (err) {
throw err;
}
......@@ -335,7 +347,7 @@ module.exports = function (container, center, options) {
}
window.distance = function (el) {
if (el && el.getAttribute('data-from') && el.getAttribute('data-to')) {
var url = 'https://api.cedarmaps.com/v1/direction/cedarmaps.driving/' + el.getAttribute('data-from') + ';' + el.getAttribute('data-to') + '?access_token=' + window.cedarMapsAccessToken;
var url = 'https://api.cedarmaps.com/v1/direction/cedarmaps.driving/' + el.getAttribute('data-from') + ';' + el.getAttribute('data-to') + '?access_token=' + L.cedarmaps.accessToken;
var old_el = document.getElementById('to-replace');
if (old_el) {
old_el.removeAttribute('id');
......
theme/style.css
View file @ f3929ca8
......@@ -122,7 +122,7 @@
.kikojas-nearby-widget .leaflet-popup-content {
margin: 0;
width: 400px;
height: 100px;
height: 120px;
direction: rtl;
text-align: right;
padding: 1px;
......@@ -168,7 +168,7 @@
.kikojas-nearby-widget .leaflet-popup-content .routing {
float: left;
width: 30%;
height: 98px;
height: 118px;
border-right: 1px solid #a6a6a6;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
......@@ -185,7 +185,7 @@
border-radius: 4px;
background-color: #238fa6;
padding: 4px;
margin-top: 20px;
margin-top: 18px;
color: #fff;
}
......
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