aboutsummaryrefslogtreecommitdiff
path: root/modern
diff options
context:
space:
mode:
authorAnton Tananaev <anton@traccar.org>2022-07-03 07:43:27 -0700
committerAnton Tananaev <anton@traccar.org>2022-07-03 07:43:27 -0700
commit0ab655eb5c031e1a2aac18ef475aff6c7724b227 (patch)
tree26ef43ebdfb703378cc44807273ff5dfd63ee1db /modern
parent44fd230a4c0043a6e89a793bcf333072a01441a6 (diff)
downloadtrackermap-web-0ab655eb5c031e1a2aac18ef475aff6c7724b227.tar.gz
trackermap-web-0ab655eb5c031e1a2aac18ef475aff6c7724b227.tar.bz2
trackermap-web-0ab655eb5c031e1a2aac18ef475aff6c7724b227.zip
Add events button
Diffstat (limited to 'modern')
-rw-r--r--modern/src/main/MainPage.js2
-rw-r--r--modern/src/map/core/MapView.js1
-rw-r--r--modern/src/map/notification/MapNotification.js38
-rw-r--r--modern/src/map/notification/notification.css6
-rw-r--r--modern/src/map/switcher/switcher.js2
5 files changed, 48 insertions, 1 deletions
diff --git a/modern/src/main/MainPage.js b/modern/src/main/MainPage.js
index 025bb405..e322dca0 100644
--- a/modern/src/main/MainPage.js
+++ b/modern/src/main/MainPage.js
@@ -36,6 +36,7 @@ import MapDirection from '../map/MapDirection';
import MapOverlay from '../map/overlay/MapOverlay';
import MapGeocoder from '../map/geocoder/MapGeocoder';
import MapScale from '../map/MapScale';
+import MapNotification from '../map/notification/MapNotification';
const useStyles = makeStyles((theme) => ({
root: {
@@ -217,6 +218,7 @@ const MainPage = () => {
<MapScale />
<MapCurrentLocation />
<MapGeocoder />
+ <MapNotification />
{desktop && <MapPadding left={parseInt(theme.dimensions.drawerWidthDesktop, 10)} />}
<Button
variant="contained"
diff --git a/modern/src/map/core/MapView.js b/modern/src/map/core/MapView.js
index 068769d9..e91d0cc5 100644
--- a/modern/src/map/core/MapView.js
+++ b/modern/src/map/core/MapView.js
@@ -1,5 +1,4 @@
import 'maplibre-gl/dist/maplibre-gl.css';
-import '../switcher/switcher.css';
import maplibregl from 'maplibre-gl';
import React, {
useRef, useLayoutEffect, useEffect, useState,
diff --git a/modern/src/map/notification/MapNotification.js b/modern/src/map/notification/MapNotification.js
new file mode 100644
index 00000000..5be80fac
--- /dev/null
+++ b/modern/src/map/notification/MapNotification.js
@@ -0,0 +1,38 @@
+import { useEffect } from 'react';
+import { map } from '../core/MapView';
+import './notification.css';
+
+class NotificationControl {
+ constructor(eventHandler) {
+ this.eventHandler = eventHandler;
+ }
+
+ onAdd() {
+ const button = document.createElement('button');
+ button.className = 'maplibregl-ctrl-icon maplibre-ctrl-notification';
+ button.type = 'button';
+ button.onclick = this.eventHandler;
+
+ this.container = document.createElement('div');
+ this.container.className = 'maplibregl-ctrl-group maplibregl-ctrl';
+ this.container.appendChild(button);
+
+ return this.container;
+ }
+
+ onRemove() {
+ this.container.parentNode.removeChild(this.container);
+ }
+}
+
+const MapNotification = () => {
+ useEffect(() => {
+ const control = new NotificationControl(() => {});
+ map.addControl(control);
+ return () => map.removeControl(control);
+ }, []);
+
+ return null;
+};
+
+export default MapNotification;
diff --git a/modern/src/map/notification/notification.css b/modern/src/map/notification/notification.css
new file mode 100644
index 00000000..b0c82357
--- /dev/null
+++ b/modern/src/map/notification/notification.css
@@ -0,0 +1,6 @@
+.maplibre-ctrl-notification {
+ background-repeat: no-repeat;
+ background-position: center;
+ pointer-events: auto;
+ background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' version='1.1' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m6.4728 3.4802-1.1412-1.1412c-1.9152 1.4604-3.1761 3.7108-3.2878 6.2645h1.596c0.1197-2.1148 1.205-3.9662 2.833-5.1233zm9.8875 5.1233h1.596c-0.1197-2.5537-1.3806-4.8041-3.2878-6.2645l-1.1332 1.1412c1.612 1.1571 2.7053 3.0085 2.825 5.1233zm-1.5721 0.39901c0-2.4499-1.3088-4.5008-3.5911-5.0435v-0.54265c0-0.66236-0.53467-1.197-1.197-1.197-0.66236 0-1.197 0.53467-1.197 1.197v0.54265c-2.2903 0.54265-3.5911 2.5856-3.5911 5.0435v3.9901l-1.596 1.596v0.79802h12.768v-0.79802l-1.596-1.596zm-4.7881 8.7782c0.11172 0 0.21546-8e-3 0.31921-0.03192 0.51871-0.11172 0.94166-0.46285 1.1491-0.94166 0.0798-0.19152 0.1197-0.39901 0.1197-0.62246h-3.1921c0.00798 0.87782 0.71822 1.596 1.604 1.596z' stroke-width='.79802'/%3E%3C/svg%3E");
+}
diff --git a/modern/src/map/switcher/switcher.js b/modern/src/map/switcher/switcher.js
index 76710ced..8fe48929 100644
--- a/modern/src/map/switcher/switcher.js
+++ b/modern/src/map/switcher/switcher.js
@@ -1,3 +1,5 @@
+import './switcher.css';
+
export class SwitcherControl {
constructor(onBeforeSwitch, onSwitch, onAfterSwitch) {