diff --git a/templates/map/initOpenStreetMap.js b/templates/map/initOpenStreetMap.js index 6bf85690..7119a7bc 100644 --- a/templates/map/initOpenStreetMap.js +++ b/templates/map/initOpenStreetMap.js @@ -12,12 +12,48 @@ function mapCreate(div_id, center_lat, center_lng, map_type, zoom) { ); // add tile layer - L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', { + var streets = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', { attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox', - maxZoom: 18, - id: 'mapbox/streets-v11', - accessToken: 'pk.eyJ1Ijoia2NvcmRlcm8iLCJhIjoiY2szbzA3ZHdsMDZxdTNsbGl4ZGNnN2VxaSJ9.LRzAe3RlV8sIP1N1x0chdw' - }).addTo(map); + 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); }