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;
};