After drag show current position of the marker in react-leaflet

Question

I need a draggable marker which sets(for now logs) its position after the drag is completed.

I followed the official docs:

https://react-leaflet.js.org/docs/example-draggable-marker/

const center = {
  lat: 51.505,
  lng: -0.09,
};

function DraggableMarker() {
  const [draggable, setDraggable] = useState(false);
  const [position, setPosition] = useState(center);
  const markerRef = useRef(null);
  const eventHandlers = useMemo(
    () => ({
      dragend() {
        const marker: any = markerRef.current;
        if (marker != null) {
          setPosition(marker.getBounds().getCenter());
        }
      },
    }),
    []
  );
  const toggleDraggable = useCallback(() => {
    setDraggable((d) => !d);
  }, []);

  useEffect(() => {
    console.log("Position:", position);
  }, [position]);

  return (
    <Marker
      draggable={draggable}
      eventHandlers={eventHandlers}
      position={position}
      ref={markerRef}
    >
      <Popup minWidth={90}>
        <span onClick={toggleDraggable}>
          {draggable
            ? "Marker is draggable"
            : "Click here to make marker draggable"}
        </span>
      </Popup>
    </Marker>
  );
}

const MyMap = ({ coord }) => {
  return (
    <div className="mapview" style={{ width: "100%", height: "450px" }}>
      <Map center={center} zoom={13} scrollWheelZoom={false}>
        <TileLayer
          attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
        <DraggableMarker />
      </Map>
    </div>
  );
};

But after the drag, it doesn't log the position. The log code is in the useEffect in the above code.

Answer 1

Try adding JSX part in DraggableMarker function below <TileLayer> in the main JSX and do not call DraggableMarker anymore.

Answer 2

Below is an example of how I solved it, you can find more of my examples at this link react-leaflet-examples

import { useEffect, useMemo, useState } from 'react';
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
import L from 'leaflet';
import tileLayer from '../util/tileLayer';

const center = [52.22977, 21.01178];

const points = [
  {
    lat: 52.230020586193795,
    lng: 21.01083755493164,
    title: 'point 1'
  },
  {
    lat: 52.22924516170657,
    lng: 21.011320352554325,
    title: 'point 2'
  },
  {
    lat: 52.229511304688444,
    lng: 21.01270973682404,
    title: 'point 3'
  },
  {
    lat: 52.23040500771883,
    lng: 21.012146472930908,
    title: 'point 4'
  },
];

const MapWrapper = () => {
  const [map, setMap] = useState(null);
  const [text, setText] = useState(null)

  useEffect(() => {
    if (!map) return;

    const legend = L.control({ position: "bottomleft" });

    legend.onAdd = () => {
      const div = L.DomUtil.create("div", "legend");
      div.innerHTML = `click marker, move`;
      setText(div);
      return div;
    };

    legend.addTo(map);

  }, [map]);

  const eventHandlers = useMemo(() => ({
    dragend(e) {
      text.innerHTML = e.target.getLatLng();
    },
  }), [text])

  return (
    <MapContainer
      whenCreated={setMap}
      center={center}
      zoom={18}
      scrollWheelZoom={false}
    >

      <TileLayer {...tileLayer} />

      {points.map(({ lat, lng, title }, index) => (
        <Marker
          eventHandlers={eventHandlers}
          key={index}
          draggable={true}
          autoPan={true}
          position={[lat, lng]}
        >
          <Popup>{title}</Popup>
        </Marker>
      ))}

    </MapContainer>
  )
}

export default MapWrapper;