I'm using leaflet-geosearch. When I click on an address from the search bar, I get the error:
Uncaught (in promise) TypeError: Cannot convert undefined or null to object at Function.keys () at NewClass.showResult (SearchControl.ts:412:28) at SearchControl.ts:404:12
Here is the code snippet:
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<!--initialize geosearch -->
<link href="https://unpkg.com/leaflet-geosearch@latest/assets/css/leaflet.css" rel="stylesheet" />
<script src="https://unpkg.com/leaflet-geosearch@latest/dist/bundle.min.js"></script>
var map
function createMap() {
map = L.map('map').setView([41, -74], 9);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
const search = new GeoSearch.GeoSearchControl({
provider: new GeoSearch.OpenStreetMapProvider(),
/*not working
params: {
countrycodes: 'us'
},*/
style: 'bar',
showMarker: true, // optional: true|false - default true
showPopup: false, // optional: true|false - default false
marker: {
// optional: L.Marker - default L.Icon.Default
icon: new L.Icon.Default(),
draggable: false,
},
});
map.addControl(search);
//not working
function searchEventHandler(result) {
console.log(result.location);
}
//not working
map.on('geosearch/showlocation', searchEventHandler);
}