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( - `
${location.description || "Unbekannt"}
Type: ${location.idPoiTyp || "N/A"}
Lat: ${latitude.toFixed(5)}, Lng: ${longitude.toFixed(5)}
`, - { permanent: false, closeButton: true } - ); - marker.bindTooltip( - `
${location.description || "Unbekannt"}
Type: ${location.idPoiTyp || "N/A"}
Lat: ${latitude.toFixed(5)}, Lng: ${longitude.toFixed(5)}
`, - { permanent: false, direction: "top", offset: [0, -30] } - ); - marker.on("dragend", function (e) { - const newLat = e.target.getLatLng().lat; - const newLng = e.target.getLatLng().lng; - const markerId = e.target.options.id; - updateLocationInDatabase(markerId, newLat, newLng).then(() => { - onLocationUpdate(markerId, newLat, newLng); - }); - }); - marker.addTo(dbLayer); - }); - } - }, [map, locations, onLocationUpdate]); */ //------------------------------------------ @@ -624,9 +595,9 @@ const MapComponent = ({ locations, onLocationUpdate }) => { const marker = L.marker([latitude, longitude], { icon: L.icon({ iconUrl: "/img/icons/green-marker-icon.png", - iconSize: [24, 34], - iconAnchor: [17, 34], - popupAnchor: [0, -34], + iconSize: [25, 41], + iconAnchor: [12, 41], + popupAnchor: [1, -34], }), draggable: true, id: location.idPoi,