Using react-leaflet-geosearch in React Leaflet: cannot read property addControl

1
votes

Trying to add react-leaflet-geosearch to my leaflet map and I get the error:

Cannot read property 'addControl' of undefined

I do not know what the problem seems to be:

My code:

render() {
    const prov = OpenStreetMapProvider();
    const GeoSearchControlElement = SearchControl;
    return (
      <>
       
         
          <MapContainer
            style={{ height: "100%", width: "100%" }}
            center={position}
            zoom="0"
            scrollWheelZoom={true}
          >
            <TileLayer
              attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
              url="https://api.mapbox.com/styles/v1/<style>/tiles/256/{z}/{x}/{y}@2x?access_token=<token>"
            />
            <Marker position={position} ></Marker>
            <ChangeMapView coords={position} />
            <GeoSearchControlElement
              provider={prov}
              showMarker={true}
              showPopup={false}
              popupFormat={({ query, result }) => result.label}
              maxMarkers={3}
              retainZoomLevel={false}
              animateZoom={true}
              autoClose={false}
              searchLabel={"Enter address, please"}
              keepResult={true}
            />
          </MapContainer>
        
      </>
    );
2
reactjsleafletreact-leaflet

2 Answers

0
votes

You seem to use React Leaflet version 3 since you have a <MapContainer> component.

Unfortunately, the react-leaflet-geosearch plugin you are trying to integrate was made for React Leaflet version 2: https://github.com/TA-Geoforce/react-leaflet-geosearch/blob/master/package.json#L108

Due to the big API changes between these major versions, it is unlikely it will be compatible.

0
votes

react-leaflet has been re-designed and useLeaflet hook is no longer available in v3 API which makes SearchControl component not compatible with v3

Until react-leaflet-geosearch compatibility with react-leaflet v3 is implemented, the following SearchControl could be considered instead (compatible with react-leaflet v3)

const SearchControl = (props) => {
  const map = useMap();

  useEffect(() => {
    const searchControl = new GeoSearchControl({
      provider: props.provider,
      ...props,
    });

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

  return null;
};

Usage

class MapComponent extends React.Component {
  render() {
    const { position, zoom } = this.props;

    const prov = OpenStreetMapProvider();

    return (
      <MapContainer center={position} zoom={zoom}>
        <TileLayer
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        />

        <SearchControl
          provider={prov}
          showMarker={true}
          showPopup={false}
          popupFormat={({ query, result }) => result.label}
          maxMarkers={3}
          retainZoomLevel={false}
          animateZoom={true}
          autoClose={false}
          searchLabel={"Enter address, please"}
          keepResult={true}
        />
      </MapContainer>
    );
  }
}

Live demo