_onLocationFound doesn't work in leaflet.locationcontrol

Question

I am using leaflet.locatecontrol to get users' location in the map but _onLocationFound doesn't work. here is my map component

      <Map
        ref={ref}
        center={initialState ? initialState.center : DEFAULT_CENTER}
        zoom={initialState ? initialState.zoom : 5}
        maxZoom={18}
        onMove={(e) => {
          onMapMove(e);
        }}
      >
        <TileLayer
          url={`${settings.getConfig().MAP_TILE_URL}${
            settings.getConfig().MAP_X_API_KEY
          }`}
          attribution={settings.getConfig().MAP_ATTRIBUTION}
        />
        {marker && (
          <Marker
            position={marker}
            icon={L.icon({
              iconUrl: "https://webstockreview.net/images/map-icon-png-6.png",

              iconSize: [25, 30], // size of the icon
              iconAnchor: [13, 36], // point of the icon which will correspond to marker's location
            })}
          />
        )}
        <LocateControl options={locateOptions} />

      </Map>

and this is the options I'm passing to LocateControl

  position: "bottomright",
  icon: "map-location-icon",
  strings: {
    title: "my location",
  },
  onLocationError: function (e) {
    console.log(e);
    console.log("Location access denied.");
  },
  _onLocationFound: function (e) {
    console.log("event", e);
  },

  onActivate: () => {}, // callback before engine starts retrieving locations
}

and LocateControl is a simple component I implemented to separate the logic and here is its code:

import { withLeaflet } from "react-leaflet";
import Locate from "leaflet.locatecontrol";

class LocateControl extends Component {
  componentDidMount() {
    const { options, startDirectly } = this.props;
    const { map } = this.props.leaflet;

    const lc = new Locate(options);

    lc.addTo(map);

    if (startDirectly) {
      // request location update and set location
      lc.start();
    }
  }

  render() {
    return null;
  }
}

export default withLeaflet(LocateControl);

my problem is that I want to save the location when it's found but _onLocationFound function won't be triggered even though the location is updated in the map and I can't find out what am I missing out because even in the documentation the function is simply past to locateControl Here is the link to the source code of the package

I would be thankful if anyone could give me a hint

Answer 1

You're passing an option named _onLocationFound which is not on the list of supported options for Leaflet.LocateControl .

You probably did so because you looked at the code for Leaflet.LocateControl and confused the onLocationError option with the _onLocationError method , without noticing that the _onLocationError method explicitly calls its namesake option here ...

    _onLocationError: function(err) {
        /* snip */
        this.options.onLocationError(err, this);
    },

...but you failed to realize that there is no onLocationFound option at all , and that the internal _onLocationFound method does not call any user-provided callback at all .

Instead, do it the documented way : Leverage the locationfound event on the map.