Add label to rider icons. #436

public/assets/js/dashboard_map.js

@@ -146,6 +146,47 @@ class DashboardMap {
         }
     }
 
+    putMarkerWithLabel(id, lat, lng, markers, icon, layer_group, popup_url) {
+        var my = this;
+        // existing marker
+        if (markers.hasOwnProperty(id)) {
+            markers[id].setLatLng(L.latLng(lat, lng));
+            return;
+        }
+
+        // new marker
+        // add label
+        markers[id] = L.marker(
+            [lat, lng],
+            { icon: icon }
+        );
+
+        markers[id].bindTooltip(id,
+            {
+                permanent: true,
+                direction: 'right'
+            }
+        );
+
+        markers[id].addTo(layer_group);
+
+        if (my.options.enable_popup) {
+            markers[id].bindPopup('Loading...');
+
+            // bind ajax for popup
+            markers[id].on('click', function(e) {
+                var popup = e.target.getPopup();
+                var url = popup_url.replace('[id]', id);
+                console.log(url);
+                $.get(url).done(function(data) {
+                    popup.setContent(data);
+                    popup.update();
+               });
+            });
+        }
+    }
+        
+
     putCustomerMarker(id, lat, lng) {
         this.putMarker(
             id,
@@ -185,7 +226,7 @@ class DashboardMap {
     }
 
     putRiderAvailableMarker(id, lat, lng) {
-        this.putMarker(
+        this.putMarkerWithLabel(
             id,
             lat,
             lng,
@@ -197,7 +238,7 @@ class DashboardMap {
     }
 
     putRiderActiveJOMarker(id, lat, lng) {
-        this.putMarker(
+        this.putMarkerWithLabel(
             id,
             lat,
             lng,