Open antoniovj1 opened 6 years ago
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.
@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.
How can I listen submit event on this custom element?
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?
Maybe we are going to receive a fix for this?
A PR would be nice.
retainZoomLevel: true
saved my life. thank you @Felipedelima123
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
I'm trying to integrate this library with React-Leaflet in the following way.
And I'm getting the next error:
I'm doing something wrong or is a bug in the library?
Thanks!