aboutsummaryrefslogtreecommitdiff
path: root/src/map/notification/MapNotification.js
diff options
context:
space:
mode:
authorAnton Tananaev <anton@traccar.org>2024-04-06 09:22:10 -0700
committerAnton Tananaev <anton@traccar.org>2024-04-06 09:22:10 -0700
commitf418231b6b2f5e030a0d2dcc390c314602b1f740 (patch)
tree10326adf3792bc2697e06bb5f2b8ef2a8f7e55fe /src/map/notification/MapNotification.js
parentb392a4af78e01c8e0f50aad5468e9583675b24be (diff)
downloadtrackermap-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.js49
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;