Apply map padding to controls

traccar · Sep 14, 2024 · 002e5a3 · 002e5a3
1 parent 7a14960
commit 002e5a3
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 21 deletions.
diff --git a/src/main/MainMap.jsx b/src/main/MainMap.jsx
@@ -57,7 +57,7 @@ const MainMap = ({ filteredPositions, selectedPosition, onEventsClick }) => {
         <MapNotification enabled={eventsAvailable} onClick={onEventsClick} />
       )}
       {desktop && (
-        <MapPadding left={parseInt(theme.dimensions.drawerWidthDesktop, 10)} />
+        <MapPadding left={parseInt(theme.dimensions.drawerWidthDesktop, 10) + parseInt(theme.spacing(1.5), 10)} />
       )}
     </>
   );

diff --git a/src/map/MapPadding.js b/src/map/MapPadding.js
@@ -2,17 +2,19 @@ import { useEffect } from 'react';
 
 import { map } from './core/MapView';
 
-const MapPadding = ({
-  top, right, bottom, left,
-}) => {
+const MapPadding = ({ left }) => {
   useEffect(() => {
-    map.setPadding({
-      top, right, bottom, left,
-    });
-    return () => map.setPadding({
-      top: 0, right: 0, bottom: 0, left: 0,
-    });
-  }, [top, right, bottom, left]);
+    const topLeft = document.querySelector('.maplibregl-ctrl-bottom-left');
+    const bottomLeft = document.querySelector('.maplibregl-ctrl-bottom-left');
+    topLeft.style.left = `${left}px`;
+    bottomLeft.style.left = `${left}px`;
+    map.setPadding({ left });
+    return () => {
+      topLeft.style.left = 0;
+      bottomLeft.style.left = 0;
+      map.setPadding({ top: 0, right: 0, bottom: 0, left: 0 });
+    };
+  }, [left]);
 
   return null;
 };

diff --git a/src/map/MapScale.js b/src/map/MapScale.js
@@ -9,7 +9,7 @@ const MapScale = () => {
   const control = useMemo(() => new maplibregl.ScaleControl(), []);
 
   useEffect(() => {
-    map.addControl(control, 'bottom-right');
+    map.addControl(control, 'bottom-left');
     return () => map.removeControl(control);
   }, [control]);
 

diff --git a/src/map/core/MapView.jsx b/src/map/core/MapView.jsx
@@ -24,15 +24,6 @@ export const map = new maplibregl.Map({
   container: element,
 });
 
-map.on('load', () => {
-  const container = document.querySelector('.maplibregl-ctrl-bottom-right');
-  if (container) {
-    container.style.display = 'flex';
-    container.style.flexDirection = 'row';
-    container.style.alignItems = 'flex-end';
-  }
-});
-
 let ready = false;
 const readyListeners = new Set();