Ismail/nodeMap
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Zoomen begrenzen in initMap

Browse Source
This commit is contained in:
ISA
2024-04-30 12:31:30 +02:00
parent a07d5f940e
commit 9e5b54f91a
1 changed files with 16 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
components/MapComponent.js
View File

@@ -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],
iconAnchor: [17, 34],
popupAnchor: [0, -34],
iconSize: [25, 41],
iconAnchor: [12, 41],
popupAnchor: [1, -34],
}),
draggable: true,
id: location.idPoi,