Перемещение карты в центр после сворачивания боковой панели ⇐ CSS

[Anonymous]

Мне было интересно, как с помощью CSS сделать так, чтобы моя карта-листовка отображалась немного вправо, чтобы мне не приходилось устанавливать для этого значения setview или center. После того, как я сверну боковую панель, я хочу, чтобы карта вернулась в центр сайта. Я попробовал добавить left:10% в файл Leaflet.css, но это портит всплывающее окно с координатами.
function setupMap() {
let mapData; // Zmienna do przechowywania danych mapy

// Pobranie bieżącej ścieżki URL
const currentPath = window.location.pathname;

// Sprawdzenie ścieżki i ustawienie odpowiednich wartości
if (currentPath.includes('/white_orchard/')) {
mapData = mapdata_wo; // Użyj danych z mapdata_wo
} else if (currentPath.includes('/velen_novigrad/')) {
mapData = mapdata_vn; // Użyj danych z mapdata_vn
} else {
console.error('Nieznana ścieżka mapy');
return;
}

var bounds = L.latLngBounds(mapData.sWest, mapData.nEast);
var map = L.map('mapid', {
zoomControl: false,
center: mapData.map_center, // Ustawienie poprawnych współrzędnych (lat, lng)
zoom: mapData.map_zoom,
maxZoom: mapData.max_zoom,
minZoom: mapData.min_zoom,
attributionControl: false,
zoomSnap: 0.5, // Umożliwia zoom co 0.5
zoomDelta: 0.5,
maxBounds: bounds,
maxBoundsViscosity: 0,
fullscreenControl: true
});

function addBoundaryLine() {
var corners = [
[mapData.sWest.lat, mapData.sWest.lng], // Dolny lewy róg
[mapData.nEast.lat, mapData.sWest.lng], // Górny lewy róg
[mapData.nEast.lat, mapData.nEast.lng], // Górny prawy róg
[mapData.sWest.lat, mapData.nEast.lng], // Dolny prawy róg
[mapData.sWest.lat, mapData.sWest.lng] // Zamknięcie obwodu (powrót do dolnego lewego rogu)
];

// Dodanie polilinii (linii wielokątnej) z czerwoną linią
var boundaryLine = L.polyline(corners, {
color: 'red', // Kolor linii
weight: 2, // Grubość linii
opacity: 1 // Przezroczystość
}).addTo(map);
}

// Wywołanie funkcji po załadowaniu mapy
addBoundaryLine();

// Dodanie kontrolek zoomu
L.control.zoom({
position: 'bottomright',
zoomInTitle: 'Przybliż',
zoomOutTitle: 'Oddal'
}).addTo(map);

// Okienko z koordynatami
map.on('click', function (e) {
var coords = e.latlng;
var lat = coords.lat.toFixed(5);
var lng = coords.lng.toFixed(5);
console.log('Map clicked at:', lat, lng);
L.popup()
.setLatLng(coords)
.setContent("Koordynaty: " + lat + ", " + lng)
.openOn(map);
});

// Dodanie warstwy kafelków z opcją TMS
L.tileLayer(mapData.map_path + '.jpg', {
tms: true, // Ustawienie odwrotnej numeracji kafelków
noWrap: true,
bounds: bounds,
maxZoom: mapData.max_zoom,
minZoom: mapData.min_zoom,
continousWorld: true,
}).addTo(map);
}

// Wywołanie funkcji po załadowaniu DOM
document.addEventListener('DOMContentLoaded', function () {
setupMap();
});

document.addEventListener('DOMContentLoaded', () => {
const container = document.getElementById('container');
const button = document.getElementById('toggleButton');
const image = document.getElementById('toggleImage');
const hideableDiv = document.getElementById('hideableDiv');
var mapElement = document.getElementById('mapid');

button.addEventListener('click', () => {
const isHidden = hideableDiv.style.display === 'none';
if (isHidden) {
hideableDiv.style.display = 'block'; // Pokazuje div
image.src = '/resources/images/cc_greaterthan-left.png'; // Zmienia obrazek
} else {
hideableDiv.style.display = 'none'; // Ukrywa div
image.src = '/resources/images/cc_greaterthan-right.png';
}
// if (mapElement.classList.contains('map-move-left')) {
// mapElement.classList.remove('map-move-left');
// } else {
// mapElement.classList.add('map-move-left');
// }
});
});

function showCategory(category) {
document.querySelectorAll('.text-box').forEach((cat) => {
cat.style.display = (category === 'all' || cat.id === category) ? 'block' : 'none';
});
}

document.addEventListener('DOMContentLoaded', () => {
const rightToggleButton = document.getElementById('rightToggleButton');
const rightContent = document.getElementById('rightContent');
const secondRightToggleButton = document.getElementById('secondRightToggleButton');
const secondRightContent = document.getElementById('secondRightContent');

rightToggleButton.addEventListener('click', () => {
const buttonRect = rightToggleButton.getBoundingClientRect();
rightContent.style.top = (buttonRect.top - 10) + 'px';
rightContent.style.display = rightContent.style.display === 'none' ? 'block' : 'none';
secondRightContent.style.display = 'none'; // Ukryj drugie okienko
});

secondRightToggleButton.addEventListener('click', () => {
const buttonRect = secondRightToggleButton.getBoundingClientRect();
secondRightContent.style.top = (buttonRect.top - 10) + 'px';
secondRightContent.style.display = secondRightContent.style.display === 'none' ? 'block' : 'none';
rightContent.style.display = 'none'; // Ukryj pierwsze okienko
});
});


Подробнее здесь: https://stackoverflow.com/questions/790 ... he-sidebar