53 lines
1.4 KiB
JavaScript
53 lines
1.4 KiB
JavaScript
import React, { useEffect, useRef, useState } from "react";
|
|
import L from "leaflet";
|
|
import "leaflet/dist/leaflet.css";
|
|
|
|
const MapComponent = () => {
|
|
const mapRef = useRef(null);
|
|
const [map, setMap] = useState(null);
|
|
|
|
function addMarker(map) {
|
|
const marker = L.marker([53.111111, 8.4625]).addTo(map);
|
|
marker.bindPopup("<b>Hallo Welt!</b><br>Ich bin ein Popup.").openPopup();
|
|
}
|
|
|
|
useEffect(() => {
|
|
if (mapRef.current && !map) {
|
|
const initialMap = L.map(mapRef.current, {
|
|
center: [53.111111, 8.4625],
|
|
zoom: 10,
|
|
zoomControl: false, // Deaktiviere die Standard-Zoomsteuerung
|
|
});
|
|
|
|
initialMap.on("contextmenu", (event) => {
|
|
L.popup()
|
|
.setLatLng(event.latlng)
|
|
.setContent('<p><button onclick="zoomIn()">Zoom in</button></p>')
|
|
.openOn(initialMap);
|
|
});
|
|
|
|
window.zoomIn = () => {
|
|
initialMap.zoomIn();
|
|
};
|
|
|
|
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
|
|
attribution:
|
|
'© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
|
|
}).addTo(initialMap);
|
|
addMarker(initialMap);
|
|
|
|
setMap(initialMap);
|
|
}
|
|
}, [mapRef, map]);
|
|
|
|
return (
|
|
<div
|
|
id="map"
|
|
ref={mapRef}
|
|
style={{ height: "100vh", width: "100vw", overflow: "hidden" }}
|
|
></div>
|
|
);
|
|
};
|
|
|
|
export default MapComponent;
|