8fbad8b7b1
Adding an interactive map with a geocoding search bar. We use leaflet with the openstreetmap.fr tiles. As for the geocoding part, we use komoot's photon API for the time being.
49 lines
2 KiB
JavaScript
49 lines
2 KiB
JavaScript
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: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
|
}).addTo(map);
|
|
L.marker([51.5, -0.09]).addTo(map)
|
|
.bindPopup('A pretty CSS3 popup.<br> 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 `<li ${props}>${p.name} - ${p.postcode} ${p.city}, ${p.county}</li>`;
|
|
else
|
|
return "";
|
|
}
|
|
};
|
|
const autocompleteAddr = new Autocomplete("#search-addr-autocomplete", autocompleteOptions);
|
|
return autocompleteAddr;
|
|
}
|
|
|
|
let map = initMap();
|
|
let addrSearch = initAddrSearch(map);
|