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 /src/map/notification/MapNotification.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 'src/map/notification/MapNotification.js')
-rw-r--r-- | src/map/notification/MapNotification.js | 49 |
1 files changed, 49 insertions, 0 deletions
diff --git a/src/map/notification/MapNotification.js b/src/map/notification/MapNotification.js new file mode 100644 index 00000000..81038f95 --- /dev/null +++ b/src/map/notification/MapNotification.js @@ -0,0 +1,49 @@ +import { useEffect, useMemo } from 'react'; +import { map } from '../core/MapView'; +import './notification.css'; + +const statusClass = (status) => `maplibregl-ctrl-icon maplibre-ctrl-notification maplibre-ctrl-notification-${status}`; + +class NotificationControl { + constructor(eventHandler) { + this.eventHandler = eventHandler; + } + + onAdd() { + this.button = document.createElement('button'); + this.button.className = statusClass('off'); + this.button.type = 'button'; + this.button.onclick = () => this.eventHandler(this); + + this.container = document.createElement('div'); + this.container.className = 'maplibregl-ctrl-group maplibregl-ctrl'; + this.container.appendChild(this.button); + + return this.container; + } + + onRemove() { + this.container.parentNode.removeChild(this.container); + } + + setEnabled(enabled) { + this.button.className = statusClass(enabled ? 'on' : 'off'); + } +} + +const MapNotification = ({ enabled, onClick }) => { + const control = useMemo(() => new NotificationControl(onClick), [onClick]); + + useEffect(() => { + map.addControl(control); + return () => map.removeControl(control); + }, [onClick]); + + useEffect(() => { + control.setEnabled(enabled); + }, [enabled]); + + return null; +}; + +export default MapNotification; |