6c8c3b138d
We fetch the eligibility data from the backend for the area the user is currently viewing. We don't want to trigger the search when the user is zoomed out, it could be heavy on the backend CPU. Hence, we trigger the fetch after the user searched for his real address or reached a good-enough zoom level. The backend is currently returning a dummy answer.
70 lines
2.7 KiB
JavaScript
70 lines
2.7 KiB
JavaScript
let markers = [];
|
|
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);
|
|
return map;
|
|
}
|
|
|
|
function initAddrSearch(map) {
|
|
const autocompleteOptions = {
|
|
debounceTime: 300,
|
|
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 [];
|
|
}
|
|
},
|
|
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 "";
|
|
},
|
|
onSubmit: async (res) => {
|
|
const searchInput = document.getElementById('search-addr-autocomplete-input');
|
|
const p = res.properties;
|
|
searchInput.value = `${p.name} - ${p.postcode} ${p.city}, ${p.county}`;
|
|
// 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);
|
|
fetchEligData(map);
|
|
}
|
|
};
|
|
const autocompleteAddr = new Autocomplete("#search-addr-autocomplete", autocompleteOptions);
|
|
return autocompleteAddr;
|
|
}
|
|
|
|
function updateEligData(map, eligData) {
|
|
markers.map(marker => map.removeLayer(marker));
|
|
let buildings = eligData.buildings;
|
|
markers = buildings.map(building => {
|
|
const latlng = new L.latLng(building.y, building.x);
|
|
const marker = new L.marker(latlng).bindPopup(building.label);
|
|
map.addLayer(marker);
|
|
return marker
|
|
});
|
|
}
|
|
|
|
async function fetchEligData(map) {
|
|
const bounds = map.getBounds();
|
|
const sw = bounds.getSouthWest();
|
|
const ne = bounds.getNorthEast();
|
|
const zoom = map.getZoom();
|
|
const reqUri = encodeURI(`/eligdata?swx=${sw.lng}&swy=${sw.lat}&nex=${ne.lng}&ney=${ne.lat}`);
|
|
const source = await fetch(reqUri);
|
|
const eligData = await source.json();
|
|
updateEligData(map, eligData);
|
|
}
|
|
|
|
const map = initMap();
|
|
const addrSearch = initAddrSearch(map);
|
|
|
|
document.getElementById("btn-load-elig-data").onclick = fetchEligData;
|