Browse Source

add marker and popup definition when searching user waypoint

pull/2/head
ardhi 1 year ago
parent
commit
3a1fac9961
  1. 49
      src/appredux/modules/map/actions.js
  2. BIN
      src/assets/img/map/pin_route_on_trip.png
  3. 48
      src/views/MapMonitoring/index.js

49
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));
}

BIN
src/assets/img/map/pin_route_on_trip.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.8 KiB

48
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());

Loading…
Cancel
Save