sgeUpdated/sge-frontend/src/components/map.js

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;