function initMap() { let map = L.map('map').setView([46.710, 3.669], 6); L.tileLayer('https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap contributors' }).addTo(map); L.marker([51.5, -0.09]).addTo(map) .bindPopup('A pretty CSS3 popup.
Easily customizable.') .openPopup(); return map; } function initAddrSearch(map) { const autocompleteOptions = { search: async (query) => { if(query.length > 2) { const mapCenter = map.getCenter(); const reqUri = `https://photon.komoot.io/api/?q=${encodeURI(query)}&lat=${mapCenter.lat}&lon=${mapCenter.lng}&limit=20&lang=fr`; const source = await fetch(reqUri); const data = await source.json(); return data.features; } else { return []; } }, onSubmit: (res) => { const searchInput = document.getElementById('search-addr-autocomplete-input'); const p = res.properties; searchInput.value = `${p.name} - ${p.postcode} ${p.city}, ${p.county}`; console.log("moving to"); console.log(res.geometry.coordinates); // We already filtered out the result not having strictly 2 coordinates at item display map.setView([res.geometry.coordinates[1],res.geometry.coordinates[0]], 19) }, debounceTime: 300, renderResult: (res, props) => { const p = res.properties; if(p.name && p.postcode && p.city && p.county && res.geometry.coordinates && res.geometry.coordinates.length === 2) return `
  • ${p.name} - ${p.postcode} ${p.city}, ${p.county}
  • `; else return ""; } }; const autocompleteAddr = new Autocomplete("#search-addr-autocomplete", autocompleteOptions); return autocompleteAddr; } let map = initMap(); let addrSearch = initAddrSearch(map);