leaflet-geosearch icon indicating copy to clipboard operation
leaflet-geosearch copied to clipboard

Error: Bounds are not valid

Open i62lotor opened this issue 3 years ago • 5 comments

Hi! I am trying to integrate leaflet-geosearch, but the same error is always repeated when I select an item from the result list

Uncaught (in promise) Error: Bounds are not valid.
...
    at n.showResult

My code is very basic, same as the documentation example:

import { SearchControl, OpenStreetMapProvider } from 'leaflet-geosearch';
const searchControl = new SearchControl({
  provider: new OpenStreetMapProvider(),
});
map.addControl(searchControl);

The OSM response is ok, but the error persist on showResult (no center map)

The map initilialization is:

const map = L.map('mapid').setView([0, 0], 5);

  var osmLayer = L.tileLayer('https://a.tile.openstreetmap.org/{z}/{x}/{y}.png',{
    attribution: '&copy; <a href="https://osm.org/copyright">OpenStreetMap</a> contributors'
   });
  osmLayer.addTo(map);

Could anyone help me, please?

Thanks.

i62lotor avatar Dec 03 '20 11:12 i62lotor

Hi :wave:

Which version of the lib do you use?

smeijer avatar Dec 03 '20 12:12 smeijer

Hi, smeijer I have configured this dependency "leaflet-geosearch": "^3.1.0"

i62lotor avatar Dec 03 '20 12:12 i62lotor

Hi, again some more information. if the map is created in the same file, as in this example it works fine

const mapElement = document.createElement("div");
  mapElement.setAttribute("id", "mapid");
  mapElement.className = "map";
  document.body.appendChild(mapElement);

  const map = L.map('mapid').setView([0, 0], 5);

  var osmLayer = L.tileLayer('https://a.tile.openstreetmap.org/{z}/{x}/{y}.png',{
    attribution: '&copy; <a href="https://osm.org/copyright">OpenStreetMap</a> contributors'
   });
  osmLayer.addTo(map);

const searchControl = new geoSearchControl({
  provider: new OpenStreetMapProvider(),
});
map.addControl(searchControl);

However if I create the map in another class, and pass it as an argument to initialize the geoSearchControl, the error occurs. Example:

export const initialize = (context) => {
     const searchControl = new geoSearchControl({
        provider: new OpenStreetMapProvider(),
     });
     context.map.addControl(searchControl);
}

i62lotor avatar Dec 04 '20 13:12 i62lotor

+1

lelumees avatar Jun 02 '22 11:06 lelumees

+1 This occurs with OpenStreetMapProvider, but not GeoApiFR for instance. And when retainZoomLevel is set to false, the error doesn't happen. (but This is not a satisfying solution).

euZebe avatar Jun 01 '23 11:06 euZebe