aboutsummaryrefslogtreecommitdiff
path: root/modern
diff options
context:
space:
mode:
authorAnton Tananaev <anton.tananaev@gmail.com>2021-09-04 19:52:16 -0700
committerAnton Tananaev <anton.tananaev@gmail.com>2021-09-04 19:52:16 -0700
commit9c1f8d9d23167cfac1c9d923e56eebbeb50c0d94 (patch)
tree428ac49bd454f13e6cbc15989f3d35e2d2c34893 /modern
parenteb8d026e884c83e93163a2d13dd5cbcd88ada869 (diff)
downloadetbsa-traccar-web-9c1f8d9d23167cfac1c9d923e56eebbeb50c0d94.tar.gz
etbsa-traccar-web-9c1f8d9d23167cfac1c9d923e56eebbeb50c0d94.tar.bz2
etbsa-traccar-web-9c1f8d9d23167cfac1c9d923e56eebbeb50c0d94.zip
Implement POI support
Diffstat (limited to 'modern')
-rw-r--r--modern/package.json1
-rw-r--r--modern/src/MainPage.js2
-rw-r--r--modern/src/map/PoiMap.js71
3 files changed, 74 insertions, 0 deletions
diff --git a/modern/package.json b/modern/package.json
index 6606649..a9050fb 100644
--- a/modern/package.json
+++ b/modern/package.json
@@ -10,6 +10,7 @@
"@material-ui/icons": "^4.11.2",
"@material-ui/lab": "^4.0.0-alpha.58",
"@reduxjs/toolkit": "^1.6.0",
+ "@tmcw/togeojson": "^4.5.0",
"@turf/circle": "^6.5.0",
"@turf/turf": "^6.4.0",
"canvas-tint-image": "^2.0.1",
diff --git a/modern/src/MainPage.js b/modern/src/MainPage.js
index 1935856..4de1107 100644
--- a/modern/src/MainPage.js
+++ b/modern/src/MainPage.js
@@ -20,6 +20,7 @@ import CurrentPositionsMap from './map/CurrentPositionsMap';
import CurrentLocationMap from './map/CurrentLocationMap';
import BottomMenu from './components/BottomMenu';
import { useTranslation } from './LocalizationProvider';
+import PoiMap from './map/PoiMap';
const useStyles = makeStyles((theme) => ({
root: {
@@ -113,6 +114,7 @@ const MainPage = () => {
<AccuracyMap />
<CurrentPositionsMap />
<SelectedDeviceMap />
+ <PoiMap />
</Map>
<Button
variant="contained"
diff --git a/modern/src/map/PoiMap.js b/modern/src/map/PoiMap.js
new file mode 100644
index 0000000..919805e
--- /dev/null
+++ b/modern/src/map/PoiMap.js
@@ -0,0 +1,71 @@
+import { useEffect, useState } from 'react';
+import { kml } from '@tmcw/togeojson';
+
+import { map } from './Map';
+import { useEffectAsync } from '../reactHelper';
+import { usePreference } from '../common/preferences';
+
+const PoiMap = () => {
+ const id = 'poi';
+
+ const poiLayer = usePreference('poiLayer');
+
+ const [data, setData] = useState(null);
+
+ useEffectAsync(async () => {
+ if (poiLayer) {
+ const file = await fetch(poiLayer);
+ const dom = new DOMParser().parseFromString(await file.text(), 'text/xml');
+ setData(kml(dom));
+ }
+ }, [poiLayer]);
+
+ useEffect(() => {
+ if (data) {
+ map.addSource(id, {
+ type: 'geojson',
+ data,
+ });
+ map.addLayer({
+ source: id,
+ id: 'poi-point',
+ type: 'circle',
+ paint: {
+ 'circle-radius': 5,
+ 'circle-color': '#3bb2d0',
+ },
+ });
+ map.addLayer({
+ source: id,
+ id: 'poi-title',
+ type: 'symbol',
+ layout: {
+ 'text-field': '{name}',
+ 'text-anchor': 'bottom',
+ 'text-offset': [0, -0.5],
+ 'text-font': ['Roboto Regular'],
+ 'text-size': 12,
+ },
+ paint: {
+ 'text-halo-color': 'white',
+ 'text-halo-width': 1,
+ },
+ });
+ return () => {
+ if (map.getLayer('poi-point')) {
+ map.removeLayer('poi-point');
+ }
+ if (map.getLayer('poi-title')) {
+ map.removeLayer('poi-title');
+ }
+ if (map.getSource(id)) {
+ map.removeSource(id);
+ }
+ };
+ }
+ }, [data]);
+
+ return null;
+};
+
+export default PoiMap;