change marker icon on map monitoring

src/appredux/modules/map/actions.js

@@ -109,6 +109,7 @@ export const getUserPoints = async () => {
                 "Clock in location": n.clock_in_loc ? n.clock_in_loc : '-',
                 "Clock out time": n.clock_out ? moment(n.clock_out).format('YYYY-MM-DD HH:mm:ss') : '-',
                 "Clock out location": n.clock_out_loc ? n.clock_out_loc : '-',
+                "image": n.image_selfie ? n.image_selfie : ''  // still dummy
             }
 
             feature.geometry = {

src/services/api/modules/map_monitoring/index.js

@@ -107,7 +107,7 @@ export default class ApiMapMonitoring extends RequestApi {
 		}).catch(e => {
             // console.log('error search presence', e);
 			let error = JSON.parse(JSON.stringify(e));
-            console.log('error search presence', error);
+            console.log('error search user history', error);
             if (error.message) {
                 alert(error.message);
             }

src/views/MapMonitoring/MapMonitoring.css

@@ -7,3 +7,19 @@
     align-self: center;
     margin-left: 45%;  
 }
+
+.image-marker img {
+    height: 40px !important;
+    width: 40px !important;
+    border-radius: 50%;
+    border: solid;
+    border-color: green;
+}
+
+.image-marker-active img {
+    height: 40px !important;
+    width: 40px !important;
+    border-radius: 50%;
+    border: solid;
+    border-color: blue;
+}

src/views/MapMonitoring/index.js

@@ -15,6 +15,8 @@ import "react-loader-spinner/dist/loader/css/react-spinner-loader.css";
 import { ToastContainer, toast } from "react-toastify";
 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';
 
 
 const MapMonitoring = () => {
@@ -53,7 +55,8 @@ const MapMonitoring = () => {
             if (userPoints) {
                 let userPointLayer = L.geoJson(userPoints, {
                     name: 'userPointLayer',
-                    onEachFeature: onEachFeatureUserPoints
+                    onEachFeature: onEachFeatureUserPoints,
+                    pointToLayer: pointToLayerUserPoints
                 });
                 userPointLayer.addTo(mymap);
                 mymap.fitBounds(userPointLayer.getBounds());
@@ -78,7 +81,8 @@ const MapMonitoring = () => {
     const initMap = () => {
         let mymap = L.map('map-area', {
             center: center,
-            zoom: 5
+            zoom: 5,
+            // maxZoom: 20
         });
         store.dispatch(setMymap(mymap));
         // setMymap(mymap);
@@ -125,14 +129,92 @@ const MapMonitoring = () => {
 			L.DomEvent.stopPropagation(e);
             if (!store.getState().mapReducer.routingBarVisible) {
                 // proceed only when routing mode is not visible
-                showHighLight(feature);
+                showHighLight(feature, e);
             }
 		});
     }
 
-    function showHighLight(feature) {
+    const pointToLayerUserPoints = (feature, latlng) => {
+        // console.log('feature', feature);
+        // create a marker style
+        // let logoMarkerStyle = L.Icon.extend({
+        //     options: {
+        //         iconSize: [85, 90],
+        //         iconAnchor: [38, 86],
+        //         popupAnchor: [0, -80]
+        //     }
+        // });
+
+        // let logoMarker = new logoMarkerStyle({iconUrl: `${BASE_SIMPRO_LUMEN_IMAGE}/${feature.properties.image}`});
+        let imgSrc = DEFAULT_USER_ICON;
+        if (feature && feature.properties && feature.properties.image && feature.properties.image !== '') {
+            imgSrc = `${BASE_SIMPRO_LUMEN_IMAGE}/${feature.properties.image}`
+        }
+        let img = `<img src="${imgSrc}" />`
+        let logoMarker = L.divIcon({
+            html: img,
+            className: 'image-marker',
+            iconSize: [40, 40],
+            iconAnchor: [20, 50],
+            popupAnchor: [0, -80]
+        });
+
+        // let logoMarkerActive = L.divIcon({
+        //     html: img,
+        //     className: 'image-marker-active',
+        //     iconSize: [40, 40],
+        //     iconAnchor: [20, 50],
+        //     popupAnchor: [0, -80]
+        // });
+
+        // read the coordinates from your marker
+        let lat = feature.geometry.coordinates[1];
+        let lon = feature.geometry.coordinates[0];
+
+        // create a new marker using the icon style
+        let marker = new L.Marker([lat,lon],{icon: logoMarker});
+        return marker;
+    }
+
+    function showHighLight(feature, e) {
+        // console.log('showHighLight feature', feature);
+        // console.log('showHighLight e', e);
 		removeLayerByName('popupTemp');
+
+        // let selectedIcon = e.target.options.icon;
+        // let classIcon = e.target.options.icon.options.className;
+        // let newClassIcon = 'image-marker-active';
+        // if (classIcon === 'image-marker-active') {
+        //     newClassIcon = 'image-marker';
+        // }
+
+        // build new icon
+        // selectedIcon.options.className = newClassIcon;
+        // e.setIcon(selectedIcon);
+        // L.divIcon(selectedIcon);
+
+        // L.divIcon({
+        //     html: img,
+        //     className: 'image-marker',
+        //     iconSize: [40, 40],
+        //     iconAnchor: [20, 50],
+        //     popupAnchor: [0, -80]
+        // });
+
 		// add highlight
+        // console.log('selectedIcon', selectedIcon);
+        // console.log('classList', e.target.options.icon.options.classList);
+        // if (!openRight) {
+        //     console.log('e.target.options.icon.options.className', e.target.options.icon.options.className)
+        //     e.target.options.icon.options.className.replace('image-marker','image-marker-active');
+        // }
+        // else {
+        //     console.log('e.target.options.icon.options.className', e.target.options.icon.options.className)
+        //     e.target.options.icon.options.className.replace('image-marker-active','image-marker');
+        // }
+
+        // kalo bukan point bikin hightlight jadi biru
+        if (feature && feature.geometry && feature.geometry.type !== 'Point') {
             L.geoJSON(feature, {
                 style: function(feature) {
                     return {color: 'blue'}
@@ -142,6 +224,10 @@ const MapMonitoring = () => {
                     layer.name = 'popupTemp'
                 },
             }).addTo(mymap);
+        }
+
+        // let marker = new L.Marker([feature.geometry.coordinates[1], feature.geometry.coordinates[0]],{icon: selectedIcon});
+        // return marker;
 
         // opening right panel
         store.dispatch(setOpenRight(!openRight));