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);
}