eine Beispiel Marker einfügen und entferne Standard-Zoomsteuerung

components/MapComponent.js

@@ -6,19 +6,23 @@ 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>Right-click menu<br/><button onclick="zoomIn()">Zoom in</button></p>'
-          )
+          .setContent('<p><button onclick="zoomIn()">Zoom in</button></p>')
           .openOn(initialMap);
       });
 
@@ -30,6 +34,7 @@ const MapComponent = () => {
         attribution:
           '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
       }).addTo(initialMap);
+      addMarker(initialMap);
 
       setMap(initialMap);
     }