Add 'sge-frontend/' from commit '5fa787e054b25ac53edc7ff0275ea7960a709401'

git-subtree-dir: sge-frontend
git-subtree-mainline: 876c278ac4
git-subtree-split: 5fa787e054

sge-frontend/src/components/map.js

@@ -0,0 +1,92 @@
+import React, { useEffect, useState } from "react";
+import {
+  MapContainer,
+  Marker,
+  TileLayer,
+  useMap,
+  useMapEvents,
+} from "react-leaflet";
+import { Icon } from "leaflet";
+import markerIconPng from "leaflet/dist/images/marker-icon.png";
+import "./leaflet.css";
+
+const MapComponent = ({
+  editingNeighborhoodData,
+  setEditingNeighborhoodData,
+}) => {
+  const [position, setPosition] = useState({
+    lat: Number(editingNeighborhoodData?.lat) || 39.92,
+    lng: Number(editingNeighborhoodData?.long) || 32.8,
+  });
+
+  useEffect(() => {
+    setEditingNeighborhoodData({
+      ...editingNeighborhoodData,
+      lat: position.lat,
+      long: position.lng,
+    });
+  }, [position]);
+
+  useEffect(() => {
+    if (editingNeighborhoodData?.lat && editingNeighborhoodData?.long) {
+      setPosition({
+        lat: editingNeighborhoodData?.lat,
+        lng: editingNeighborhoodData?.long,
+      });
+    }
+  }, [editingNeighborhoodData?.lat, editingNeighborhoodData?.long]);
+
+  function ClickOnMap() {
+    const map = useMapEvents({
+      click: (event) => {
+        const { lat, lng } = event.latlng;
+        setPosition({
+          lat: lat.toFixed(6),
+          lng: lng.toFixed(6),
+        });
+        setEditingNeighborhoodData({
+          ...editingNeighborhoodData,
+          lat: position.lat,
+          long: position.lng,
+        });
+      },
+    });
+    return null;
+  }
+
+  function ChangeCenter({ center }) {
+    const map = useMap();
+    map.setView(center);
+    return null;
+  }
+
+  return (
+    <MapContainer
+      center={position}
+      zoom={13}
+      scrollWheelZoom={false}
+      style={{ height: "300px", zIndex: 0 }}
+    >
+      <ChangeCenter center={position} />
+      <TileLayer
+        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+      />
+      <ClickOnMap />
+      {editingNeighborhoodData?.lat && editingNeighborhoodData?.long && (
+        <Marker
+          position={position}
+          icon={
+            new Icon({
+              iconUrl: markerIconPng,
+              iconSize: [25, 41],
+              iconAnchor: [12, 41],
+            })
+          }
+        />
+      )}
+    </MapContainer>
+  );
+};
+
+export default MapComponent;