Add autorefresh for rider locations in map. #270

config/routes.yaml

@@ -7,3 +7,6 @@ home:
     path: /
     controller: App\Controller\HomeController::index
 
+rider_locations:
+    path: /rider_locations
+    controller: App\Controller\HomeController::getRiderLocations

src/Controller/HomeController.php

@@ -18,6 +18,11 @@ class HomeController extends Controller
      * @Menu(selected="home")
      */
     public function index(EntityManagerInterface $em, RiderTracker $rider_tracker)
+    {
+        return $this->render('home.html.twig');
+    }
+
+    public function getRiderLocations(EntityManagerInterface $em, RiderTracker $rider_tracker)
     {
         // get all riders
         $riders = $em->getRepository(Rider::class)->findAll();
@@ -29,13 +34,17 @@ class HomeController extends Controller
             $rider_id = $rider->getID();
             $coordinates = $rider_tracker->getRiderLocation($rider_id);
 
+            $long = $coordinates->getLongitude();
+            $lat = $coordinates->getLatitude();
+
             // use rider id as key
-            $locations[$rider_id] = $coordinates;
+            $locations[$rider_id] = array($lat, $long);
 
         }
 
-        $params['riders'] = $locations;
+        return $this->json([
+            'riders' => $locations,
+        ]);
 
-        return $this->render('home.html.twig', $params);
     }
 }

templates/home.html.twig

@@ -28,15 +28,13 @@
         <div class="row">
             <div class="col-xl-12">
                 <div class="m-portlet m-portlet--mobile">
-                    <form id="row-form" class="m-form m-form--fit m-form--label-align-right m-form--group-seperator-dashed" method="POST" }}">
+                    <div class="m-portlet__body">
-                        <div class="m-portlet__body">
+                        <div class="form-group m-form__group row">
-                            <div class="form-group m-form__group row">
+                            <div class="col-lg-12">
-                                <div class="col-lg-12">
+                                <div id="m_gmap" style="height:600px;"></div>
-                                    <div id="m_gmap" style="height:600px;"></div>
-                                </div>
                             </div>
                         </div>
-                    </form>
+                    </div>
                 </div>
             </div>
         </div>
@@ -51,10 +49,13 @@
 <script>
 // BEGIN google maps stuff
 
+var map;
+var markers = [];
+
 initMap();
 
 function initMap() {
-    var map = new google.maps.Map(document.getElementById('m_gmap'),
+    map = new google.maps.Map(document.getElementById('m_gmap'),
     {
         center: {
             lat: {% trans %}default_lat{% endtrans %},
@@ -64,35 +65,56 @@ function initMap() {
         zoom: 13
     });
 
-    {% if riders  %}
+    displayMarkers();
-        {% for object in riders %}
-            var lat = {{ object.getLatitude }};
-            var lng = {{ object.getLongitude }};
-
-            var marker = new google.maps.Marker({
-                position: {
-                    lat: lat,
-                    lng: lng
-                },
-            });
-
-            marker.setMap(map);
-        {% endfor %}
-    {% endif %}
 }
 
-function renewMarkers() {
+function addMarker(location) {
-    $.ajax('{{ path('home') }}', {
+    var marker = new google.maps.Marker({
-        success: function() {
+        position: location,
-            // clear the markers
+        map: map
-            // set the markers again
+    }); 
-        },
+    
+    markers.push(marker);
+}
+
+function clearMarkers() {
+    setMapOnAll(null);
+    markers = [];
+}
+
+function setMapOnAll(map) {
+    for (var i = 0; i < markers.length; i++) {
+        markers[i].setMap(map);
+    }
+} 
+
+function displayMarkers() {
+    $.ajax({
+        url: '{{ path('rider_locations') }}',
+    }).done(function(response) {
+        // clear all markers
+        clearMarkers();
+
+        // get riders and mark
+        var riders = response.riders;
+
+        $.each(riders, function(rider_id, point) {
+            var lat = point[0];
+            var long = point[1];
+
+            var location = {
+                lat: lat,
+                lng: long
+            };
+
+            addMarker(location);
+        });
     });
 }
 
-setInterval(renewMarkers, 60 * 1000);
+setInterval(displayMarkers, 60 * 1000);
-
-</script>
 
 // END google maps stuff
+</script>
+
 {% endblock %}