aboutsummaryrefslogtreecommitdiff
path: root/modern/src/map
diff options
context:
space:
mode:
authorAnton Tananaev <anton@traccar.org>2023-02-04 15:15:35 -0800
committerAnton Tananaev <anton@traccar.org>2023-02-04 15:15:35 -0800
commit208251f1c7bef92fb9d52cc40acc3176387a6680 (patch)
tree6f707d2e59111f6c3545303098e7b9c7d40ad45a /modern/src/map
parent80815532407d2f92a387ce0c40c87bb81aecad51 (diff)
downloadtrackermap-web-208251f1c7bef92fb9d52cc40acc3176387a6680.tar.gz
trackermap-web-208251f1c7bef92fb9d52cc40acc3176387a6680.tar.bz2
trackermap-web-208251f1c7bef92fb9d52cc40acc3176387a6680.zip
Update web dependencies
Diffstat (limited to 'modern/src/map')
-rw-r--r--modern/src/map/draw/MapGeofenceEdit.js (renamed from modern/src/map/MapGeofenceEdit.js)10
-rw-r--r--modern/src/map/draw/theme.js230
2 files changed, 235 insertions, 5 deletions
diff --git a/modern/src/map/MapGeofenceEdit.js b/modern/src/map/draw/MapGeofenceEdit.js
index a7e07483..e547ea05 100644
--- a/modern/src/map/MapGeofenceEdit.js
+++ b/modern/src/map/draw/MapGeofenceEdit.js
@@ -2,16 +2,16 @@ import 'mapbox-gl/dist/mapbox-gl.css';
import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css';
import maplibregl from 'maplibre-gl';
import MapboxDraw from '@mapbox/mapbox-gl-draw';
-import theme from '@mapbox/mapbox-gl-draw/src/lib/theme';
import { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { useNavigate } from 'react-router-dom';
import { useTheme } from '@mui/styles';
-import { map } from './core/MapView';
-import { geofenceToFeature, geometryToArea } from './core/mapUtil';
-import { errorsActions, geofencesActions } from '../store';
-import { useCatchCallback } from '../reactHelper';
+import { map } from '../core/MapView';
+import { geofenceToFeature, geometryToArea } from '../core/mapUtil';
+import { errorsActions, geofencesActions } from '../../store';
+import { useCatchCallback } from '../../reactHelper';
+import theme from './theme';
const draw = new MapboxDraw({
displayControlsDefault: false,
diff --git a/modern/src/map/draw/theme.js b/modern/src/map/draw/theme.js
new file mode 100644
index 00000000..c9864e2f
--- /dev/null
+++ b/modern/src/map/draw/theme.js
@@ -0,0 +1,230 @@
+// Copy of the original theme
+// https://github.com/mapbox/mapbox-gl-draw/blob/v1.4.0/src/lib/theme.js
+
+export default [
+ {
+ 'id': 'gl-draw-polygon-fill-inactive',
+ 'type': 'fill',
+ 'filter': ['all',
+ ['==', 'active', 'false'],
+ ['==', '$type', 'Polygon'],
+ ['!=', 'mode', 'static']
+ ],
+ 'paint': {
+ 'fill-color': '#3bb2d0',
+ 'fill-outline-color': '#3bb2d0',
+ 'fill-opacity': 0.1
+ }
+ },
+ {
+ 'id': 'gl-draw-polygon-fill-active',
+ 'type': 'fill',
+ 'filter': ['all', ['==', 'active', 'true'], ['==', '$type', 'Polygon']],
+ 'paint': {
+ 'fill-color': '#fbb03b',
+ 'fill-outline-color': '#fbb03b',
+ 'fill-opacity': 0.1
+ }
+ },
+ {
+ 'id': 'gl-draw-polygon-midpoint',
+ 'type': 'circle',
+ 'filter': ['all',
+ ['==', '$type', 'Point'],
+ ['==', 'meta', 'midpoint']],
+ 'paint': {
+ 'circle-radius': 3,
+ 'circle-color': '#fbb03b'
+ }
+ },
+ {
+ 'id': 'gl-draw-polygon-stroke-inactive',
+ 'type': 'line',
+ 'filter': ['all',
+ ['==', 'active', 'false'],
+ ['==', '$type', 'Polygon'],
+ ['!=', 'mode', 'static']
+ ],
+ 'layout': {
+ 'line-cap': 'round',
+ 'line-join': 'round'
+ },
+ 'paint': {
+ 'line-color': '#3bb2d0',
+ 'line-width': 2
+ }
+ },
+ {
+ 'id': 'gl-draw-polygon-stroke-active',
+ 'type': 'line',
+ 'filter': ['all', ['==', 'active', 'true'], ['==', '$type', 'Polygon']],
+ 'layout': {
+ 'line-cap': 'round',
+ 'line-join': 'round'
+ },
+ 'paint': {
+ 'line-color': '#fbb03b',
+ 'line-dasharray': [0.2, 2],
+ 'line-width': 2
+ }
+ },
+ {
+ 'id': 'gl-draw-line-inactive',
+ 'type': 'line',
+ 'filter': ['all',
+ ['==', 'active', 'false'],
+ ['==', '$type', 'LineString'],
+ ['!=', 'mode', 'static']
+ ],
+ 'layout': {
+ 'line-cap': 'round',
+ 'line-join': 'round'
+ },
+ 'paint': {
+ 'line-color': '#3bb2d0',
+ 'line-width': 2
+ }
+ },
+ {
+ 'id': 'gl-draw-line-active',
+ 'type': 'line',
+ 'filter': ['all',
+ ['==', '$type', 'LineString'],
+ ['==', 'active', 'true']
+ ],
+ 'layout': {
+ 'line-cap': 'round',
+ 'line-join': 'round'
+ },
+ 'paint': {
+ 'line-color': '#fbb03b',
+ 'line-dasharray': [0.2, 2],
+ 'line-width': 2
+ }
+ },
+ {
+ 'id': 'gl-draw-polygon-and-line-vertex-stroke-inactive',
+ 'type': 'circle',
+ 'filter': ['all',
+ ['==', 'meta', 'vertex'],
+ ['==', '$type', 'Point'],
+ ['!=', 'mode', 'static']
+ ],
+ 'paint': {
+ 'circle-radius': 5,
+ 'circle-color': '#fff'
+ }
+ },
+ {
+ 'id': 'gl-draw-polygon-and-line-vertex-inactive',
+ 'type': 'circle',
+ 'filter': ['all',
+ ['==', 'meta', 'vertex'],
+ ['==', '$type', 'Point'],
+ ['!=', 'mode', 'static']
+ ],
+ 'paint': {
+ 'circle-radius': 3,
+ 'circle-color': '#fbb03b'
+ }
+ },
+ {
+ 'id': 'gl-draw-point-point-stroke-inactive',
+ 'type': 'circle',
+ 'filter': ['all',
+ ['==', 'active', 'false'],
+ ['==', '$type', 'Point'],
+ ['==', 'meta', 'feature'],
+ ['!=', 'mode', 'static']
+ ],
+ 'paint': {
+ 'circle-radius': 5,
+ 'circle-opacity': 1,
+ 'circle-color': '#fff'
+ }
+ },
+ {
+ 'id': 'gl-draw-point-inactive',
+ 'type': 'circle',
+ 'filter': ['all',
+ ['==', 'active', 'false'],
+ ['==', '$type', 'Point'],
+ ['==', 'meta', 'feature'],
+ ['!=', 'mode', 'static']
+ ],
+ 'paint': {
+ 'circle-radius': 3,
+ 'circle-color': '#3bb2d0'
+ }
+ },
+ {
+ 'id': 'gl-draw-point-stroke-active',
+ 'type': 'circle',
+ 'filter': ['all',
+ ['==', '$type', 'Point'],
+ ['==', 'active', 'true'],
+ ['!=', 'meta', 'midpoint']
+ ],
+ 'paint': {
+ 'circle-radius': 7,
+ 'circle-color': '#fff'
+ }
+ },
+ {
+ 'id': 'gl-draw-point-active',
+ 'type': 'circle',
+ 'filter': ['all',
+ ['==', '$type', 'Point'],
+ ['!=', 'meta', 'midpoint'],
+ ['==', 'active', 'true']],
+ 'paint': {
+ 'circle-radius': 5,
+ 'circle-color': '#fbb03b'
+ }
+ },
+ {
+ 'id': 'gl-draw-polygon-fill-static',
+ 'type': 'fill',
+ 'filter': ['all', ['==', 'mode', 'static'], ['==', '$type', 'Polygon']],
+ 'paint': {
+ 'fill-color': '#404040',
+ 'fill-outline-color': '#404040',
+ 'fill-opacity': 0.1
+ }
+ },
+ {
+ 'id': 'gl-draw-polygon-stroke-static',
+ 'type': 'line',
+ 'filter': ['all', ['==', 'mode', 'static'], ['==', '$type', 'Polygon']],
+ 'layout': {
+ 'line-cap': 'round',
+ 'line-join': 'round'
+ },
+ 'paint': {
+ 'line-color': '#404040',
+ 'line-width': 2
+ }
+ },
+ {
+ 'id': 'gl-draw-line-static',
+ 'type': 'line',
+ 'filter': ['all', ['==', 'mode', 'static'], ['==', '$type', 'LineString']],
+ 'layout': {
+ 'line-cap': 'round',
+ 'line-join': 'round'
+ },
+ 'paint': {
+ 'line-color': '#404040',
+ 'line-width': 2
+ }
+ },
+ {
+ 'id': 'gl-draw-point-static',
+ 'type': 'circle',
+ 'filter': ['all', ['==', 'mode', 'static'], ['==', '$type', 'Point']],
+ 'paint': {
+ 'circle-radius': 5,
+ 'circle-color': '#404040'
+ }
+ }
+];