aboutsummaryrefslogtreecommitdiff
path: root/modern
diff options
context:
space:
mode:
Diffstat (limited to 'modern')
-rw-r--r--modern/src/map/MapMarkers.js56
-rw-r--r--modern/src/reports/TripReportPage.js21
2 files changed, 76 insertions, 1 deletions
diff --git a/modern/src/map/MapMarkers.js b/modern/src/map/MapMarkers.js
new file mode 100644
index 00000000..7101a5d3
--- /dev/null
+++ b/modern/src/map/MapMarkers.js
@@ -0,0 +1,56 @@
+import { useEffect } from 'react';
+
+import { map } from './core/MapView';
+
+const MapMarkers = ({ markers }) => {
+ const id = 'markers';
+
+ useEffect(() => {
+ map.addSource(id, {
+ type: 'geojson',
+ data: {
+ type: 'FeatureCollection',
+ features: [],
+ },
+ });
+ map.addLayer({
+ id,
+ type: 'symbol',
+ source: id,
+ layout: {
+ 'icon-image': '{category}-{color}',
+ 'icon-allow-overlap': true,
+ },
+ });
+
+ return () => {
+ if (map.getLayer(id)) {
+ map.removeLayer(id);
+ }
+ if (map.getSource(id)) {
+ map.removeSource(id);
+ }
+ };
+ }, []);
+
+ useEffect(() => {
+ map.getSource(id).setData({
+ type: 'FeatureCollection',
+ features: markers.map(({ latitude, longitude, category, color }) => ({
+ type: 'Feature',
+ geometry: {
+ type: 'Point',
+ coordinates: [longitude, latitude],
+ },
+ properties: {
+ category: category || 'default',
+ color,
+ },
+ })),
+ });
+ }, [markers]);
+
+ return null;
+};
+
+export default MapMarkers;
diff --git a/modern/src/reports/TripReportPage.js b/modern/src/reports/TripReportPage.js
index 5ad51f00..6e79128f 100644
--- a/modern/src/reports/TripReportPage.js
+++ b/modern/src/reports/TripReportPage.js
@@ -20,6 +20,7 @@ import MapView from '../map/core/MapView';
import MapRoutePath from '../map/MapRoutePath';
import AddressValue from '../common/components/AddressValue';
import TableShimmer from '../common/components/TableShimmer';
+import MapMarkers from '../map/MapMarkers';
const columnsArray = [
['startTime', 'reportStartTime'],
@@ -51,6 +52,19 @@ const TripReportPage = () => {
const [selectedItem, setSelectedItem] = useState(null);
const [route, setRoute] = useState(null);
+ const createMarkers = () => ([
+ {
+ latitude: selectedItem.startLat,
+ longitude: selectedItem.startLon,
+ color: 'negative',
+ },
+ {
+ latitude: selectedItem.endLat,
+ longitude: selectedItem.endLon,
+ color: 'positive',
+ },
+ ]);
+
useEffectAsync(async () => {
if (selectedItem) {
const query = new URLSearchParams({
@@ -126,7 +140,12 @@ const TripReportPage = () => {
{selectedItem && (
<div className={classes.containerMap}>
<MapView>
- {route && <MapRoutePath positions={route} />}
+ {route && (
+ <>
+ <MapRoutePath positions={route} />
+ <MapMarkers markers={createMarkers()} />
+ </>
+ )}
</MapView>
</div>
)}