diff options
author | Anton Tananaev <anton@traccar.org> | 2022-07-03 18:57:55 -0700 |
---|---|---|
committer | Anton Tananaev <anton@traccar.org> | 2022-07-03 18:57:55 -0700 |
commit | ec814fb2315f6693d2c8c394da6997db3da15397 (patch) | |
tree | 5bf6644a5703288f3b2b8a6a3b3b76b6f05ab5dd /modern/src/map | |
parent | b75df536dfa8a64817c67764120939039ef9b871 (diff) | |
download | trackermap-web-ec814fb2315f6693d2c8c394da6997db3da15397.tar.gz trackermap-web-ec814fb2315f6693d2c8c394da6997db3da15397.tar.bz2 trackermap-web-ec814fb2315f6693d2c8c394da6997db3da15397.zip |
Trip start end markers (fix #674)
Diffstat (limited to 'modern/src/map')
-rw-r--r-- | modern/src/map/MapMarkers.js | 56 |
1 files changed, 56 insertions, 0 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; |