From e463876c916592669df251296cdae9c8f739e411 Mon Sep 17 00:00:00 2001
From: Kendrick Chan <kc@jankstudio.com>
Date: Sun, 19 Jan 2020 21:42:16 +0800
Subject: [PATCH] Create marker in dashboard map when rider id is not yet there
 #299

---
 templates/home.html.twig | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/templates/home.html.twig b/templates/home.html.twig
index dd7d8897..8f337c03 100644
--- a/templates/home.html.twig
+++ b/templates/home.html.twig
@@ -15,11 +15,13 @@
 <script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.min.js" type="text/javascript"></script>
 <script>
 
+var map;
+
 function initMap() {
     var default_lat = {% trans %}default_lat{% endtrans %};
     var default_lng = {% trans %}default_long{% endtrans %};
 
-    var map = mapCreate('dashboard_map', default_lat, default_lng, 'road', 13);
+    map = mapCreate('dashboard_map', default_lat, default_lng, 'road', 13);
 }
 </script>
 
@@ -32,6 +34,13 @@ var timeout = 2000;
 var host = '{{ mqtt_host }}';
 var port = {{ mqtt_port }};
 
+var icon_rider_available = L.divIcon({
+    className: 'map-div-icon',
+    html: "<div style='background-color:#00FF00;' class='marker-pin'></div><i class='fa fa-bolt awesome'>",
+    iconSize: [39, 42],
+    iconAnchor: [15, 42]
+});
+
 function onConnect() {
     console.log('connected!');
 
@@ -54,6 +63,7 @@ function onMessage(msg) {
     }
 }
 
+
 function handleRider(chan_split, payload) {
     console.log("rider message");
     switch (chan_split[2]) {
@@ -77,7 +87,10 @@ function handleRider(chan_split, payload) {
                 // marker's there, move it
                 rider_markers[chan_split[1]].setLatLng(L.latLng(lat, lng));
             } else {
-                // TODO: no marker, make one
+                // no marker, make one
+                console.log('creating marker');
+                // TODO: make it add to the correct map layer
+                rider_markers[chan_split[1]]= L.marker([lat, lng], { icon: icon_rider_available }).addTo(map);;
             }
             break;
     }