Zoomen begrenzen in initMap

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(
-          `<div class="bg-red-500 text-red p-2 translate-y-8"><b>${location.description || "Unbekannt"}</b><br>Type: ${location.idPoiTyp || "N/A"}<br>Lat: ${latitude.toFixed(5)}, Lng: ${longitude.toFixed(5)}</div>`,
-          { permanent: false, closeButton: true }
-        );
-        marker.bindTooltip(
-          `<div class=" text-red p-2 "><b>${location.description || "Unbekannt"}</b><br>Type: ${location.idPoiTyp || "N/A"}<br>Lat: ${latitude.toFixed(5)}, Lng: ${longitude.toFixed(5)}</div>`,
-          { 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],
+            iconSize: [25, 41],
-            iconAnchor: [17, 34],
+            iconAnchor: [12, 41],
-            popupAnchor: [0, -34],
+            popupAnchor: [1, -34],
           }),
           draggable: true,
           id: location.idPoi,