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
Show whitespace changes
Inline Side-by-side
Showing with 127 additions and 110 deletions
README.md
View file @ f3929ca8
...@@ -20,8 +20,8 @@ This is CedarMaps Javascript API. It's simply a wrapper for [Mapbox Javascript A ...@@ -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: Recommended usage is via the CedarMaps CDN:
```html ```html
<script src='http://api.cedarmaps.com/cedarmaps.js/v1.4.1/cedarmaps.js'></script> <script src='http://api.cedarmaps.com/cedarmaps.js/v1.4.2/cedarmaps.js'></script>
<link href='http://api.cedarmaps.com/cedarmaps.js/v1.4.1/cedarmaps.css' rel='stylesheet' /> <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). 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 @@ ...@@ -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.4.1/cedarmaps.js'></script> <script src='../dist/v1.4.2/cedarmaps.js'></script>
<script src='../access-token.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' /> <link href='css/styles.css' rel='stylesheet' />
......
demos/index.html
View file @ f3929ca8
...@@ -5,9 +5,9 @@ ...@@ -5,9 +5,9 @@
<meta charset=utf-8 /> <meta charset=utf-8 />
<title>CedarMaps - Simple Map Load</title> <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> <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> <style>
body { body {
......
demos/nearby.html
View file @ f3929ca8
...@@ -5,9 +5,9 @@ ...@@ -5,9 +5,9 @@
<meta charset=utf-8 /> <meta charset=utf-8 />
<title>CedarMaps - Simple Map Load</title> <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> <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> <style>
body { body {
...@@ -34,11 +34,16 @@ ...@@ -34,11 +34,16 @@
'Send us an email to <info@cedar.ir>'); 'Send us an email to <info@cedar.ir>');
} }
L.cedarmaps.nearby('map', [35.737334, 51.355215], { L.cedarmaps.nearby('map', [35.737334, 51.355215], {
accessToken: accessToken,
categories: ['bus', 'park', 'shopping', 'hospital', 'school'], categories: ['bus', 'park', 'shopping', 'hospital', 'school'],
searchDistance: 5, searchDistance: 5,
popupContent: '<h2>html is allowed here</h2>', 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> </script>
</body> </body>
......
demos/reverse-geocoder.html
View file @ f3929ca8
...@@ -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.4.1/cedarmaps.js'></script> <script src='../dist/v1.4.2/cedarmaps.js'></script>
<script src='../access-token.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> <style>
body { body {
......
package.json
View file @ f3929ca8
...@@ -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.4.1", "version": "1.4.2",
"homepage": "http://www.cedarmaps.com/", "homepage": "http://www.cedarmaps.com/",
"repository": { "repository": {
"type": "git", "type": "git",
......
src/nearby.js
View file @ f3929ca8
...@@ -7,13 +7,14 @@ module.exports = function (container, center, options) { ...@@ -7,13 +7,14 @@ module.exports = function (container, center, options) {
/* /*
{ {
defaultZoom: int, defaultZoom: int,
centerMarkerIcon: L.icon,
categories: [string, string], categories: [string, string],
poiLimit: int, poiLimit: int,
seachDistance: int, seachDistance: int,
popupContent: string, popupContent: string,
noPoiLink: boolean, noPoiLink: boolean,
lockScroll: boolean, lockScroll: boolean,
callback: fn(map, center_marker, pois) callback: fn(map, center_marker)
} }
*/ */
var stringHelpers = { var stringHelpers = {
...@@ -34,6 +35,82 @@ module.exports = function (container, center, options) { ...@@ -34,6 +35,82 @@ module.exports = function (container, center, options) {
return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); 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) { var markerTools = function (marker) {
this.activeMarker = null; this.activeMarker = null;
...@@ -79,10 +156,9 @@ module.exports = function (container, center, options) { ...@@ -79,10 +156,9 @@ module.exports = function (container, center, options) {
} }
} }
} }
if(!options.lockScroll) { if (!options.lockScroll) {
options.lockScroll = false; options.lockScroll = false;
} }
var pois = [];
var availableCategories = { var availableCategories = {
park: { park: {
slug: 'park', slug: 'park',
...@@ -124,7 +200,8 @@ module.exports = function (container, center, options) { ...@@ -124,7 +200,8 @@ module.exports = function (container, center, options) {
southWest = new L.LatLng(35.3930, 51.0219), southWest = new L.LatLng(35.3930, 51.0219),
northEast = new L.LatLng(35.8267, 51.6426), northEast = new L.LatLng(35.8267, 51.6426),
bounds = new L.LatLngBounds(southWest, northEast), bounds = new L.LatLngBounds(southWest, northEast),
categoryFeatureGroups = [], categoryFeatureGroups = {},
pois = [],
geoJsonLayer; geoJsonLayer;
/** /**
...@@ -143,90 +220,18 @@ module.exports = function (container, center, options) { ...@@ -143,90 +220,18 @@ module.exports = function (container, center, options) {
zoomControl: options.lockScroll, zoomControl: options.lockScroll,
scrollWheelZoom: !options.lockScroll scrollWheelZoom: !options.lockScroll
}).setView(center, options.defaultZoom ? options.defaultZoom : 15); }).setView(center, options.defaultZoom ? options.defaultZoom : 15);
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) { map.on('popupopen', function (e) {
window.distance(e.popup._contentNode.getElementsByClassName('routing')[0]); window.distance(e.popup._contentNode.getElementsByClassName('routing')[0]);
}); });
}
})(i); getPois({lat: center[0], lng: center[1]});
}
}
var centerMarker = L.marker({ var centerMarker = L.marker({
lon: center[1], lon: center[1],
lat: center[0] lat: center[0]
}, { }, {
zIndexOffset: 1000, zIndexOffset: 1000,
icon: L.divIcon({ icon: options.centerMarkerIcon ? options.centerMarkerIcon : L.divIcon({
iconSize: [34, 44], iconSize: [34, 44],
className: 'kikojas-map-marker', className: 'kikojas-map-marker',
iconAnchor: [31, 41], iconAnchor: [31, 41],
...@@ -240,28 +245,35 @@ module.exports = function (container, center, options) { ...@@ -240,28 +245,35 @@ module.exports = function (container, center, options) {
}) })
}).addTo(map); }).addTo(map);
var center_marker_tools = new markerTools(centerMarker); 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) { if (options.popupContent) {
centerMarker.bindPopup('<div class="basic-info">' + options.popupContent + '</div>', { centerMarker.bindPopup('<div class="basic-info">' + options.popupContent + '</div>', {
offset: new L.Point(-15, -33), offset: new L.Point(-15, -33),
closeButton: false, closeButton: false,
className: 'leaflet-popup-poi', className: 'leaflet-popup-poi',
maxWidth: document.getElementById(container).offsetWidth - 20 maxWidth: document.getElementById(container).offsetWidth - 20
}).on('popupopen', function(e) { }).on('popupopen', function (e) {
e.popup.update(); e.popup.update();
}); });
} }
if (options.callback) {
options.callback(map, centerMarker);
}
L.Control.CategoryToggle = L.Control.extend({ L.Control.CategoryToggle = L.Control.extend({
onAdd: function (map) { onAdd: function (map) {
var divControlContainer = L.DomUtil.create('div'); var divControlContainer = L.DomUtil.create('div');
L.DomUtil.addClass(divControlContainer, 'category-panel slider js_slider'); 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 panelWidth = (mapWidth - 20);
var frameWidth = (panelWidth - 50); var frameWidth = (panelWidth - 50);
var ul = L.DomUtil.create('ul'); var ul = L.DomUtil.create('ul');
L.DomUtil.addClass(ul, 'tg-list'); L.DomUtil.addClass(ul, 'tg-list');
if (options.categories) {
for (var i = 0, l = options.categories.length; i < l; i++) { for (var i = 0, l = options.categories.length; i < l; i++) {
var category = options.categories[i]; var category = options.categories[i];
if (availableCategories[category]) { if (availableCategories[category]) {
...@@ -274,7 +286,7 @@ module.exports = function (container, center, options) { ...@@ -274,7 +286,7 @@ module.exports = function (container, center, options) {
categoryLabel.setAttribute('data-tg-off', cat.short_name); categoryLabel.setAttribute('data-tg-off', cat.short_name);
categoryLabel.setAttribute('data-tg-on', cat.short_name); categoryLabel.setAttribute('data-tg-on', cat.short_name);
categoryLabel.setAttribute('data-toggle', 'on'); categoryLabel.setAttribute('data-toggle', 'on');
categoryLabel.setAttribute('data-cat', i); categoryLabel.setAttribute('data-cat', options.categories[i]);
categoryLabel.setAttribute('for', cat.slug); categoryLabel.setAttribute('for', cat.slug);
categoryListItem.appendChild(categoryInput); categoryListItem.appendChild(categoryInput);
categoryListItem.appendChild(categoryLabel); categoryListItem.appendChild(categoryLabel);
...@@ -289,12 +301,12 @@ module.exports = function (container, center, options) { ...@@ -289,12 +301,12 @@ module.exports = function (container, center, options) {
event.target.setAttribute('data-toggle', 'on'); event.target.setAttribute('data-toggle', 'on');
} }
var bounds = []; var bounds = [];
categoryFeatureGroups.forEach(function (featureGroup) { for(var cfg in categoryFeatureGroups) {
if(featureGroup.getBounds().isValid()) { if (categoryFeatureGroups[cfg].getBounds().isValid()) {
bounds.push(featureGroup.getBounds()); bounds.push(categoryFeatureGroups[cfg].getBounds());
} }
}); }
if(bounds.length > 0) { if (bounds.length > 0) {
map.fitBounds(bounds); map.fitBounds(bounds);
} }
} }
...@@ -302,12 +314,13 @@ module.exports = function (container, center, options) { ...@@ -302,12 +314,13 @@ module.exports = function (container, center, options) {
ul.appendChild(categoryListItem); ul.appendChild(categoryListItem);
} }
} }
}
divControlContainer.appendChild(ul); divControlContainer.appendChild(ul);
return divControlContainer; return divControlContainer;
}, },
onRemove: function (map) {} onRemove: function (map) { }
}); });
L.control.categoryToggle = function (opts) { L.control.categoryToggle = function (opts) {
return new L.Control.CategoryToggle(opts); return new L.Control.CategoryToggle(opts);
...@@ -315,10 +328,9 @@ module.exports = function (container, center, options) { ...@@ -315,10 +328,9 @@ module.exports = function (container, center, options) {
L.control.categoryToggle({ L.control.categoryToggle({
position: 'topright' position: 'topright'
}).addTo(map); }).addTo(map);
window.cedarMapsAccessToken = options.accessToken;
window.routing = function (el) { window.routing = function (el) {
if (el && el.getAttribute('data-from') && el.getAttribute('data-to')) { 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) { if (err) {
throw err; throw err;
} }
...@@ -335,7 +347,7 @@ module.exports = function (container, center, options) { ...@@ -335,7 +347,7 @@ module.exports = function (container, center, options) {
} }
window.distance = function (el) { window.distance = function (el) {
if (el && el.getAttribute('data-from') && el.getAttribute('data-to')) { 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'); var old_el = document.getElementById('to-replace');
if (old_el) { if (old_el) {
old_el.removeAttribute('id'); old_el.removeAttribute('id');
......
theme/style.css
View file @ f3929ca8
...@@ -122,7 +122,7 @@ ...@@ -122,7 +122,7 @@
.kikojas-nearby-widget .leaflet-popup-content { .kikojas-nearby-widget .leaflet-popup-content {
margin: 0; margin: 0;
width: 400px; width: 400px;
height: 100px; height: 120px;
direction: rtl; direction: rtl;
text-align: right; text-align: right;
padding: 1px; padding: 1px;
...@@ -168,7 +168,7 @@ ...@@ -168,7 +168,7 @@
.kikojas-nearby-widget .leaflet-popup-content .routing { .kikojas-nearby-widget .leaflet-popup-content .routing {
float: left; float: left;
width: 30%; width: 30%;
height: 98px; height: 118px;
border-right: 1px solid #a6a6a6; border-right: 1px solid #a6a6a6;
border-top-left-radius: 8px; border-top-left-radius: 8px;
border-bottom-left-radius: 8px; border-bottom-left-radius: 8px;
...@@ -185,7 +185,7 @@ ...@@ -185,7 +185,7 @@
border-radius: 4px; border-radius: 4px;
background-color: #238fa6; background-color: #238fa6;
padding: 4px; padding: 4px;
margin-top: 20px; margin-top: 18px;
color: #fff; 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