diff options
| -rw-r--r-- | modern/package.json | 1 | ||||
| -rw-r--r-- | modern/src/MainPage.js | 2 | ||||
| -rw-r--r-- | modern/src/map/PoiMap.js | 71 |
3 files changed, 74 insertions, 0 deletions
diff --git a/modern/package.json b/modern/package.json index 66066499..a9050fb5 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 1935856f..4de1107e 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 00000000..919805ec --- /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; |