Add display of rider markers for OSM. #270

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 &copy; <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);
+        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>