add marker and popup definition when searching user waypoint

src/appredux/modules/map/actions.js

@@ -158,11 +158,41 @@ export const getUserHistory = async (userId, dateString) => {
             "features": []
         }
 
+        // build waypoint line
+        let featureLine = {
+            "type": "Feature",
+            "properties": {},
+            "geometry": {
+                "type": "LineString",
+                "coordinates": []
+            }
+        }
+
+        userHistory.data.map((n, idx) => {
+            featureLine.geometry.coordinates.push([parseFloat(n.lon), parseFloat(n.lat)])
+
+            if (idx > startIdx && idx < endIdx) {
+                let featureOnTrip = {
+                    "type": "Feature",
+                    "properties": {
+                        "type": "Working",
+                        "wptime": n.wptime
+                    },
+                    "geometry": {
+                        "type": "Point",
+                        "coordinates": [parseFloat(n.lon), parseFloat(n.lat)]
+                    }
+                }
+                featureCollection.features.push(featureOnTrip);
+            }
+        });
+        featureCollection.features.push(featureLine);
+
         // set waypoint start
         let featurePointStart = {
             "type": "Feature",
             "properties": {
-                "type": "start",
+                "type": "Start",
                 "wptime": userHistory.data[startIdx].wptime
             },
             "geometry": {
@@ -176,7 +206,7 @@ export const getUserHistory = async (userId, dateString) => {
         let featurePointEnd = {
             "type": "Feature",
             "properties": {
-                "type": "end",
+                "type": "End",
                 "wptime": userHistory.data[endIdx].wptime
             },
             "geometry": {
@@ -186,21 +216,6 @@ export const getUserHistory = async (userId, dateString) => {
         }
         featureCollection.features.push(featurePointEnd);
 
-        // build waypoint line
-        let featureLine = {
-            "type": "Feature",
-            "properties": {},
-            "geometry": {
-                "type": "LineString",
-                "coordinates": []
-            }
-        }
-
-        userHistory.data.map(n => {
-            featureLine.geometry.coordinates.push([parseFloat(n.lon), parseFloat(n.lat)])
-        });
-        featureCollection.features.push(featureLine);
-
         store.dispatch(setUserHistory(featureCollection));
         store.dispatch(setIsSearchingRoute(false));
     }

src/views/MapMonitoring/index.js

@@ -17,11 +17,15 @@ import "react-toastify/dist/ReactToastify.css";
 import './MapMonitoring.css';
 import { BASE_SIMPRO_LUMEN_IMAGE } from '../../const/ApiConst';
 import DEFAULT_USER_ICON from '../../assets/img/avatars/user.png';
+import pinRouteStart from '../../assets/img/map/pin_route_green.png';
+import pinRouteEnd from '../../assets/img/map/pin_route_red.png';
+import pinRouteOnTrip from '../../assets/img/map/pin_route_on_trip.png';
 import 'leaflet.markercluster/dist/MarkerCluster.Default.css'
 import 'leaflet.markercluster/dist/MarkerCluster.css'
 import 'leaflet.markercluster/dist/leaflet.markercluster.js'
 import 'leaflet-control-geocoder/dist/Control.Geocoder.css'
 import 'leaflet-control-geocoder/dist/Control.Geocoder.js'
+import moment from 'moment';
 
 const MapMonitoring = () => {
 
@@ -81,8 +85,50 @@ const MapMonitoring = () => {
         if (mymap) {
             removeLayerByName('userHistoryLayer');
             if (userHistory) {
+                var startIcon = new L.Icon({
+                    iconSize: [60, 60],
+                    iconAnchor: [30, 47],
+                    popupAnchor:  [1, -24],
+                    iconUrl: pinRouteStart
+                });
+                var endIcon = new L.Icon({
+                    iconSize: [60, 60],
+                    iconAnchor: [30, 47],
+                    popupAnchor:  [1, -24],
+                    iconUrl: pinRouteEnd
+                });
+                var onTripIcon = new L.Icon({
+                    iconSize: [60, 60],
+                    iconAnchor: [30, 47],
+                    popupAnchor:  [1, -24],
+                    iconUrl: pinRouteOnTrip
+                });
                 let userHistoryLayer = L.geoJson(userHistory, {
-                    name: 'userHistoryLayer'
+                    name: 'userHistoryLayer',
+                    onEachFeature: function(feature, layer) {
+                        var popupText = `<b>Status: </b>${feature.properties.type}<br>
+                        <b>Time: </b> ${feature.properties.wptime ? moment(feature.properties.wptime).format("DD-MM-YYYY HH:mm:ss") : '-'}`;
+
+                        layer.bindPopup(popupText, {
+                          closeButton: true,
+                        //   offset: L.point(0, -20)
+                        });
+                        layer.on('click', function() {
+                          layer.openPopup();
+                        });
+                    },
+                    pointToLayer: function(feature, latlng) {
+                        var type = feature.properties.type;
+                        if (type === 'Start') {
+                            return L.marker(latlng, {icon: startIcon});
+                        } 
+                        else if (type === "Working") {
+                            return L.marker(latlng, {icon: onTripIcon});
+                        } 
+                        else if (type === "End") {
+                            return L.marker(latlng, {icon: endIcon});
+                        }
+                    },
                 });
                 userHistoryLayer.addTo(mymap);
                 mymap.fitBounds(userHistoryLayer.getBounds());