Error: Bounds are not valid (React-Leaflet)

[antoniovj1]

I'm trying to integrate this library with React-Leaflet in the following way.

var provider = new EsriProvider();
class Search extends MapControl {

  createLeafletElement() {
      
    return GeoSearchControl({
      provider:  provider,
      style: 'bar',
      showMarker: true,
      showPopup: false,
      autoClose: true,
      retainZoomLevel: false,
      animateZoom: true,
      keepResult: false,
      searchLabel: 'search'
    });
  }
}

 return (
            <Map
                className="map-surface"
                center={[39, -104]}
                zoom={5}
                minZoom={2}
                ref="map"
                worldCopyJump={true}
                zoomControl={false}
            >
                { this.props.children }

                <ZoomControl
                    position="topright"
                    zoomInTitle="Zoom in"
                    zoomOutTitle="Zoom out"
                />

                <ScaleControl
                    className="scale"
                />

                <Search />

                <TileLayer
            attribution="&amp;copy <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          />
            </Map>
        );

And I'm getting the next error:

leaflet-src.js:2548 Uncaught (in promise) Error: Bounds are not valid.
    at NewClass.fitBounds (leaflet-src.js:2548)
    at NewClass.centerMap (leafletControl.js:406)
    at NewClass.showResult (leafletControl.js:340)
    at NewClass.<anonymous> (leafletControl.js:323)
    at eval (eval at processIncludes (runtime.js:36), <anonymous>:3:4725)

I'm doing something wrong or is a bug in the library?

Thanks!

[hancocb]

I did not get the exact same error as you, but I was able to get the plugin working with leaflet-react v2 by wrapping my custom component with the withLeaflet() component (see Creating custom components).

import { Map, TileLayer, Marker, MapControl, Popup, withLeaflet } from "react-leaflet";
import { GeoSearchControl, OpenStreetMapProvider } from "leaflet-geosearch";

class AddressControl extends MapControl {
  createLeafletElement() {
    const provider = new OpenStreetMapProvider();
    return GeoSearchControl({ provider: provider });
  }
}

class MyMap extends React.Component {
  ...
  render() {
    const AddressSearch = withLeaflet(AddressControl);
    return (
      <Map ...>
        <AddressSearch />
    ...
    ...

Don't forget to add the leaflet-geosearch CSS too.

[skipjack]

@hancocb thanks for sharing, that basically worked for me although I'm seeing some CORB errors for the tile requests when I actually select a location and the map is panned by this plugin.

[Shubham-Sinha]

How can I listen submit event on this custom element?

[Felipedelima123]

I was having this same problem, also with react leaflet. I used as @hancocb mentioned, but still not working. I figured out, that if I change the property: retainZoomLevel to true it works. For those who still getting this problem, change to somenthing like:

createLeafletElement() {
    const provider = new OpenStreetMapProvider();
    return GeoSearchControl({
      provider,
      showMarker: false,
      showPopup: false,
      retainZoomLevel: true, 
      animateZoom: false,
      autoClose: false,
      searchLabel: 'Digite sua busca aqui',
      keepResult: false,
    });
  }

Maybe we are going to receive a fix for this?

[smeijer]

Maybe we are going to receive a fix for this?

A PR would be nice.

[mostafaznv]

retainZoomLevel: true saved my life. thank you @Felipedelima123

[proyer-maxar]

I'm experiencing this issue with 3.7 and leaflet 1.9.2. The error goes away with retainZoomLevel: true but I'd really like it to zoom to the searched location.

Map.js:291 Uncaught (in promise) Error: Bounds are not valid. at NewClass.fitBounds (Map.js:291:1) at NewClass.centerMap (SearchControl.ts:469:1) at NewClass.showResult (SearchControl.ts:404:1) at SearchControl.ts:389:1