0

I am using react-leaflet and leaflet-geosearch. I want the marker here draggable and print the location when the marker is moved to another place. How to do this?

const Search = ({ location,setLocation }) => {
  const map = useMap(); // access to leaflet map

  useEffect(() => {
    const searchControl = GeoSearchControl({
      provider: new OpenStreetMapProvider(),
      showMarker: true, 
      showPopup: false, 
      marker: {
        icon: myIcon,
        draggable: true,
      },

      style: "bar",
    });
    function searchEventHandler(result) {
      setLocation([result.location.x, result.location.y]);
      console.log(result.location);
    }
    map.addControl(searchControl); // this is how you add a control in vanilla leaflet
    map.on("geosearch/showlocation", searchEventHandler);

    return () => map.removeControl(searchControl);
  }, []);

  return null;
};

0