Implement POI support

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",

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"

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;