Trouble figuring out how to use GeometryUtil with React-Leaflet

Question

I'm building an application with JavaScript, React & Leaflet(+React-Leaflet plugin). I want to get coordinates of closest marker to my location, but I'm having trouble figuring out how to use GeometryUtil plugin with React-Leaflet.

I have tried this code, but it returns an error message.

const Map = ({ markers, center, zoom }) => {

/* My location. (Dummy data). */
const myLocation = [-40.5512, 69.9454];

/* Saving map instance to state: */
const [map, setMap] = useState(null);

*/ Using GeometryUtil. Error occurs here. */
let closest_latlng = L.GeometryUtil.closest(map, markers, myLocation);
console.log(closest_latlng);

return (
<MapContainer
  className="map"
  center={center}
  zoom={zoom}
  scrollWheelZoom={false}
  whenCreated={(map) => setMap(map)}
>
  <TileLayer
    attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
  />
  {markers && (
    <>
      {markers.map((marker, idx) => (
        <AllMarkers key={idx} marker={marker} />
      ))}
    </>
  )}
</MapContainer>
);
};

export default Map;

Error message: Unhandled Rejection (TypeError): Cannot read properties of undefined (reading 'closest').

Answer 1

The issue is in the way you're importing the geometryutil package. Try like this:

import 'leaflet-geometryutil';

And then you should have L.GeometryUtil available anywhere L is available. Make sure this import happens at some root level file, like index.js or app.js, so that by the time you call L.GeometryUtil functions, it has already been imported.

Alternatively, in the file you want to use it in,

import GeometryUtil from "leaflet-geometryutil";
// or
import * as GeometryUtil from "leaflet-geometryutil";

let closest_latlng = GeometryUtil.closest(map, markers, myLocation); // no L.GeometryUtil