first commit

components/MapComponent.js

@@ -0,0 +1,47 @@
+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);
+
+  useEffect(() => {
+    if (mapRef.current && !map) {
+      const initialMap = L.map(mapRef.current, {
+        center: [53.111111, 8.4625],
+        zoom: 10,
+      });
+
+      initialMap.on("contextmenu", (event) => {
+        L.popup()
+          .setLatLng(event.latlng)
+          .setContent(
+            '<p>Right-click menu<br/><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:
+          '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+      }).addTo(initialMap);
+
+      setMap(initialMap);
+    }
+  }, [mapRef, map]);
+
+  return (
+    <div
+      id="map"
+      ref={mapRef}
+      style={{ height: "100vh", width: "100vw", overflow: "hidden" }}
+    ></div>
+  );
+};
+
+export default MapComponent;