59 lines
1.8 KiB
JavaScript
59 lines
1.8 KiB
JavaScript
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
|
|
integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
|
|
crossorigin="">
|
|
</script>
|
|
|
|
<script>
|
|
|
|
function mapCreate(div_id, center_lat, center_lng, map_type, zoom) {
|
|
var map = L.map(div_id).setView(
|
|
[center_lat, center_lng],
|
|
zoom
|
|
);
|
|
|
|
// add tile layer
|
|
var streets = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
|
|
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
|
|
maxZoom: 18,
|
|
id: 'mapbox/streets-v11',
|
|
accessToken: 'pk.eyJ1Ijoia2NvcmRlcm8iLCJhIjoiY2szbzA3ZHdsMDZxdTNsbGl4ZGNnN2VxaSJ9.LRzAe3RlV8sIP1N1x0chdw'
|
|
}).addTo(map);
|
|
|
|
// rider marker layer group
|
|
var ridersLayerGroup = L.layerGroup().addTo(map);
|
|
|
|
$.ajax({
|
|
url: '{{ path('rider_locations') }}',
|
|
}).done(function(response) {
|
|
// clear all markers
|
|
ridersLayerGroup.clearLayers();
|
|
|
|
// get riders and mark
|
|
var riders = response.riders;
|
|
|
|
$.each(riders, function(rider_id, point) {
|
|
var lat = point[0];
|
|
var long = point[1];
|
|
|
|
// create markers
|
|
var marker = L.marker([lat, long]);
|
|
|
|
// add marker/layer to layergroup
|
|
ridersLayerGroup.addLayer(marker);
|
|
});
|
|
});
|
|
|
|
// base layer
|
|
var baseMaps = {
|
|
'Streets': streets
|
|
};
|
|
|
|
// overlay layer
|
|
var overlayMaps = {
|
|
'Riders' : ridersLayerGroup
|
|
}
|
|
|
|
L.control.layers(baseMaps, overlayMaps).addTo(map);
|
|
}
|
|
|
|
</script>
|