diff options
author | Anton Tananaev <anton@traccar.org> | 2024-04-06 09:22:10 -0700 |
---|---|---|
committer | Anton Tananaev <anton@traccar.org> | 2024-04-06 09:22:10 -0700 |
commit | f418231b6b2f5e030a0d2dcc390c314602b1f740 (patch) | |
tree | 10326adf3792bc2697e06bb5f2b8ef2a8f7e55fe /modern/src/map/main/PoiMap.js | |
parent | b392a4af78e01c8e0f50aad5468e9583675b24be (diff) | |
download | trackermap-web-f418231b6b2f5e030a0d2dcc390c314602b1f740.tar.gz trackermap-web-f418231b6b2f5e030a0d2dcc390c314602b1f740.tar.bz2 trackermap-web-f418231b6b2f5e030a0d2dcc390c314602b1f740.zip |
Move modern to the top
Diffstat (limited to 'modern/src/map/main/PoiMap.js')
-rw-r--r-- | modern/src/map/main/PoiMap.js | 87 |
1 files changed, 0 insertions, 87 deletions
diff --git a/modern/src/map/main/PoiMap.js b/modern/src/map/main/PoiMap.js deleted file mode 100644 index 07341183..00000000 --- a/modern/src/map/main/PoiMap.js +++ /dev/null @@ -1,87 +0,0 @@ -import { useId, useEffect, useState } from 'react'; -import { kml } from '@tmcw/togeojson'; -import { useTheme } from '@mui/styles'; -import { map } from '../core/MapView'; -import { useEffectAsync } from '../../reactHelper'; -import { usePreference } from '../../common/util/preferences'; -import { findFonts } from '../core/mapUtil'; - -const PoiMap = () => { - const id = useId(); - - const theme = useTheme(); - - 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': theme.palette.geometry.main, - }, - }); - map.addLayer({ - source: id, - id: 'poi-line', - type: 'line', - paint: { - 'line-color': theme.palette.geometry.main, - 'line-width': 2, - }, - }); - map.addLayer({ - source: id, - id: 'poi-title', - type: 'symbol', - layout: { - 'text-field': '{name}', - 'text-anchor': 'bottom', - 'text-offset': [0, -0.5], - 'text-font': findFonts(map), - '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-line')) { - map.removeLayer('poi-line'); - } - if (map.getLayer('poi-title')) { - map.removeLayer('poi-title'); - } - if (map.getSource(id)) { - map.removeSource(id); - } - }; - } - return () => {}; - }, [data]); - - return null; -}; - -export default PoiMap; |