diff --git a/components/MapComponent.js b/components/MapComponent.js index 2774a5ef5..f391e3382 100644 --- a/components/MapComponent.js +++ b/components/MapComponent.js @@ -198,7 +198,8 @@ const MapComponent = ({ locations, onLocationUpdate }) => { //------------------------------------------ const offlineTileLayer = "../TileMap/mapTiles/{z}/{x}/{y}.png"; - const onlineTileLayer = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"; + //const onlineTileLayer = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"; + const onlineTileLayer = "mapTiles/{z}/{x}/{y}.png"; // Create map layers const TALAS = new L.layerGroup(); const ECI = new L.layerGroup(); @@ -246,6 +247,8 @@ const MapComponent = ({ locations, onLocationUpdate }) => { Sonstige, TALASICL, ], + minZoom: 5, // Minimale Zoomstufe + maxZoom: 15, // Maximale Zoomstufe zoomControl: false, contextmenu: true, contextmenuItems: [ @@ -284,6 +287,15 @@ const MapComponent = ({ locations, onLocationUpdate }) => { setMap(initMap); setOms(oms); + initMap.on("zoomend", function () { + // Überprüfen, ob der aktuelle Zoom außerhalb der Grenzen liegt + if (initMap.getZoom() > 15) { + initMap.setZoom(15); + } else if (initMap.getZoom() < 5) { + initMap.setZoom(5); + } + }); + // Nach der Initialisierung der Map und Setzen im State kannst du Funktionen aufrufen, die `map` benötigen. initMap.whenReady(() => { console.log("Karte ist jetzt bereit und initialisiert."); @@ -554,47 +566,6 @@ const MapComponent = ({ locations, onLocationUpdate }) => { }; } }, [map]); - //-------------------- // Diese useEffect wird nur beim ersten Rendering oder wenn sich `map` ändert, ausgeführt - // Marker hinzufügen von lokale MySQL Datenbank und nicht von APIs - /* useEffect(() => { - // Remove old markers - if (map) { - // Entfernen der alten DBLayer und Erstellung einer neuen - map.removeLayer(dbLayer); - dbLayer = new L.LayerGroup().addTo(map); - // Add new markers - locations.forEach((location) => { - const { latitude, longitude } = parsePoint(location.position); - const marker = L.marker([latitude, longitude], { - icon: L.icon({ - iconUrl: "/location.svg", - iconSize: [34, 34], - iconAnchor: [17, 34], - popupAnchor: [0, -34], - }), - draggable: true, - id: location.idPoi, - }); - marker.bindPopup( - `