Add markers and modify polyline in location history

components/device-mgt/io.entgra.device.mgt.ui/react-app/public/conf/config.json

@@ -1,12 +1,12 @@
 {
   "theme": {
-    "logo" : "https://entgra.io/assets/images/svg/logo.svg",
+    "logo": "https://entgra.io/assets/images/svg/logo.svg",
     "primaryColor": "rgb(24, 144, 255)"
   },
   "serverConfig": {
     "invoker": {
       "uri": "/entgra-ui-request-handler/invoke",
-      "deviceMgt" : "/device-mgt/v1.0"
+      "deviceMgt": "/device-mgt/v1.0"
     },
     "loginUri": "/entgra-ui-request-handler/login",
     "logoutUri": "/entgra-ui-request-handler/logout",
@@ -37,6 +37,7 @@
   "geoMap": {
     "url": "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
     "attribution": "&copy; <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors",
-    "defaultZoomLevel": 16
+    "defaultZoomLevel": 16,
+    "timeout": 120
   }
 }

components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Geo/components/CustomMap/index.js

@@ -25,8 +25,31 @@ import {
   Popup,
   Tooltip,
 } from 'react-leaflet';
+import L from 'leaflet';
 import { withConfigContext } from '../../../../../../components/ConfigContext';
 
+// Icons for the location markers
+const pinStart = new L.Icon({
+  iconUrl: require('./pin_start.svg'),
+  iconRetinaUrl: require('./pin_start.svg'),
+  shadowUrl: require('./pin_shadow.svg'),
+  shadowSize: new L.Point(51, 51),
+  shadowAnchor: [22, 22],
+  popupAnchor: [0, -22],
+  iconSize: new L.Point(50, 50),
+  tooltipAnchor: [0, -22],
+});
+const pinEnd = new L.Icon({
+  iconUrl: require('./pin_end.svg'),
+  iconRetinaUrl: require('./pin_end.svg'),
+  shadowUrl: require('./pin_shadow.svg'),
+  shadowSize: new L.Point(51, 51),
+  shadowAnchor: [22, 22],
+  popupAnchor: [0, -22],
+  iconSize: new L.Point(65, 65),
+  tooltipAnchor: [0, -28],
+});
+
 class CustomMap extends Component {
   constructor(props) {
     super(props);
@@ -38,17 +61,65 @@ class CustomMap extends Component {
    * @returns content
    */
   polylineMarker = locationData => {
-    const polyMarkers = locationData.map(locationPoint => {
+    const locationPoints = [...locationData];
-      return [locationPoint.latitude, locationPoint.longitude];
+    const polyLines = [];
-    });
+
+    while (locationPoints.length > 0) {
+      // Array to store positions for next polyline
+      const positions = [];
+      // Make a copy of remaining location points
+      const cachedLocationPoints = [...locationPoints];
+      // Iterate the remaining cached locations
+      for (let i = 0; i < cachedLocationPoints.length; i++) {
+        positions.push([
+          cachedLocationPoints[i].latitude,
+          cachedLocationPoints[i].longitude,
+        ]);
+        const currentPoint = cachedLocationPoints[i];
+        // Remove the current location from the locationPoints
+        locationPoints.shift();
+        if (i < cachedLocationPoints.length - 1) {
+          const nextPoint = cachedLocationPoints[i + 1];
+          // Draw a dashed line for long for location points with long interval
+          if (
+            nextPoint.timestamp - currentPoint.timestamp >
+            this.props.context.geoMap.timeout * 1000
+          ) {
+            // Create a dashed line
+            polyLines.push(
+              <Polyline
+                key={polyLines.length}
+                color="#414042"
+                positions={[
+                  [currentPoint.latitude, currentPoint.longitude],
+                  [nextPoint.latitude, nextPoint.longitude],
+                ]}
+                smoothFactor={10}
+                weight={5}
+                dashArray="7"
+              />,
+            );
+            break;
+          }
+        }
+      }
+      // Create a polyline from provided positions
+      polyLines.push(
+        <Polyline
+          key={polyLines.length}
+          color="#414042"
+          positions={positions}
+          smoothFactor={10}
+          weight={5}
+        />,
+      );
+    }
 
     return (
       <div style={{ display: 'none' }}>
-        {
+        {polyLines.map(polyLine => {
-          <Polyline color="green" positions={polyMarkers}>
+          return polyLine;
-            <Popup>on the way</Popup>
+        })}
-          </Polyline>
-        }
       </div>
     );
   };
@@ -59,6 +130,10 @@ class CustomMap extends Component {
     const attribution = config.geoMap.attribution;
     const url = config.geoMap.url;
     const startingPoint = [locationData[0].latitude, locationData[0].longitude];
+    const endPoint = [
+      locationData[locationData.length - 1].latitude,
+      locationData[locationData.length - 1].longitude,
+    ];
     const zoom = config.geoMap.defaultZoomLevel;
     return (
       <div style={{ backgroundColor: '#ffffff', borderRadius: 5, padding: 5 }}>
@@ -66,8 +141,16 @@ class CustomMap extends Component {
           <TileLayer url={url} attribution={attribution} />
           <Fragment>
             {this.polylineMarker(locationData)}
-            <Marker position={startingPoint}>
+            <Marker icon={pinStart} position={startingPoint}>
-              <Tooltip>Starting Location</Tooltip>
+              <Popup keepInView={true}>Start</Popup>
+              <Tooltip direction="top" permanent={true}>
+                Start
+              </Tooltip>
+            </Marker>
+            <Marker icon={pinEnd} position={endPoint}>
+              <Tooltip direction="top" permanent={true}>
+                End
+              </Tooltip>
             </Marker>
           </Fragment>
         </Map>

components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Geo/components/CustomMap/pin_end.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 122.80151 122.80151"><defs><style>.a,.b{fill:#8dc63f;}.a{opacity:0.34;}.c{fill:#fff;}</style></defs><title>map</title><circle class="a" cx="61.40076" cy="61.40076" r="57.704"/><circle class="b" cx="61.40076" cy="61.40076" r="40.2134"/><circle class="c" cx="61.40076" cy="61.40076" r="18.64704"/></svg>

components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Geo/components/CustomMap/pin_start.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><style>.a{fill:#414042;}.b{fill:#fff;}</style></defs><title>map</title><circle class="a" cx="50" cy="50" r="40.2134"/><circle class="b" cx="50" cy="50" r="18.64704"/></svg>