Change the map in the Dashboard to use leaflet and openmaps. #270

templates/base.html.twig

@@ -35,8 +35,16 @@
         <meta name="theme-color" content="#ffffff">
 
         <!--begin::Extra Styles -->  
-        {% block stylesheets %}{% endblock %}
+        {% block stylesheets %}
+        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
+            integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
+            crossorigin=""/>
+        {% endblock %}
         <!--end::Extra Styles -->
+        <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
+            integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
+            crossorigin="">
+        </script>
     </head>
     <!-- end::Head -->
     <!-- end::Body -->

templates/home.html.twig

@@ -43,6 +43,55 @@
 {% endblock %}
 
 {% block scripts %}
+<script>
+
+var map;
+var markerLayerGroup;
+var markers;
+
+initMap();
+displayMarkers();
+
+function initMap() {
+    map = L.map('m_gmap').setView([3.084216, 101.6129996], 15);
+
+    // add tile layer
+    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);
+
+    // add marker layer group
+    markerLayerGroup = L.layerGroup().addTo(map);
+}
+
+function displayMarkers() {
+    $.ajax({
+        url: '{{ path('rider_locations') }}',
+    }).done(function(response) {
+        // clear all markers
+        markerLayerGroup.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
+            L.marker([lat, long]).addTo(markerLayerGroup);
+        });
+    });
+}
+
+setInterval(displayMarkers, 60 * 1000);
+
+</script>
+
+{#
 <script src="//maps.googleapis.com/maps/api/js?key={{ gmaps_api_key }}" type="text/javascript"></script>
 <script src="/assets/vendors/custom/gmaps/gmaps.js" type="text/javascript"></script>
 
@@ -122,4 +171,6 @@ setInterval(displayMarkers, 60 * 1000);
 // END google maps stuff
 </script>
 
+#}
+
 {% endblock %}