Windy/traccar-web
1
0
Fork 0
mirror of https://github.com/traccar/traccar-web.git synced 2025-01-07 03:26:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

Apply map padding to controls

Browse Source
This commit is contained in:
Anton Tananaev 2024-09-14 09:03:43 -07:00
parent 7a14960ad3
commit 002e5a354f
4 changed files with 14 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/main/MainMap.jsx
View File

@ -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)} />
)}
</>
);

22
src/map/MapPadding.js
View File

@ -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;
};

2
src/map/MapScale.js
View File

@ -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]);

9
src/map/core/MapView.jsx
View File

@ -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();