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
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 {
......@@ -34,11 +34,16 @@
'Send us an email to <info@cedar.ir>');
}
L.cedarmaps.nearby('map', [35.737334, 51.355215], {
accessToken: accessToken,
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
......@@ -7,13 +7,14 @@ module.exports = function (container, center, options) {
/*
{
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 = {
......@@ -34,6 +35,82 @@ module.exports = function (container, center, options) {
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;
......@@ -79,10 +156,9 @@ module.exports = function (container, center, options) {
}
}
}
if(!options.lockScroll) {
if (!options.lockScroll) {
options.lockScroll = false;
}
var pois = [];
var availableCategories = {
park: {
slug: 'park',
......@@ -124,7 +200,8 @@ module.exports = function (container, center, options) {
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;
/**
......@@ -143,90 +220,18 @@ module.exports = function (container, center, options) {
zoomControl: options.lockScroll,
scrollWheelZoom: !options.lockScroll
}).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) {
window.distance(e.popup._contentNode.getElementsByClassName('routing')[0]);
});
}
})(i);
}
}
getPois({lat: center[0], lng: center[1]});
var centerMarker = L.marker({
lon: center[1],
lat: center[0]
}, {
zIndexOffset: 1000,
icon: L.divIcon({
icon: options.centerMarkerIcon ? options.centerMarkerIcon : L.divIcon({
iconSize: [34, 44],
className: 'kikojas-map-marker',
iconAnchor: [31, 41],
......@@ -240,28 +245,35 @@ module.exports = function (container, center, options) {
})
}).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 ul = L.DomUtil.create('ul');
L.DomUtil.addClass(ul, 'tg-list');
if (options.categories) {
for (var i = 0, l = options.categories.length; i < l; i++) {
var category = options.categories[i];
if (availableCategories[category]) {
......@@ -274,7 +286,7 @@ module.exports = function (container, center, options) {
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('data-cat', options.categories[i]);
categoryLabel.setAttribute('for', cat.slug);
categoryListItem.appendChild(categoryInput);
categoryListItem.appendChild(categoryLabel);
......@@ -289,12 +301,12 @@ module.exports = function (container, center, options) {
event.target.setAttribute('data-toggle', 'on');
}
var bounds = [];
categoryFeatureGroups.forEach(function (featureGroup) {
if(featureGroup.getBounds().isValid()) {
bounds.push(featureGroup.getBounds());
for(var cfg in categoryFeatureGroups) {
if (categoryFeatureGroups[cfg].getBounds().isValid()) {
bounds.push(categoryFeatureGroups[cfg].getBounds());
}
});
if(bounds.length > 0) {
}
if (bounds.length > 0) {
map.fitBounds(bounds);
}
}
......@@ -302,12 +314,13 @@ module.exports = function (container, center, options) {
ul.appendChild(categoryListItem);
}
}
}
divControlContainer.appendChild(ul);
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