2022-02-21 17:21:21 +01:00
|
|
|
let markers = [];
|
2022-02-21 15:28:19 +01:00
|
|
|
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 = {
|
2022-02-21 17:21:21 +01:00
|
|
|
debounceTime: 300,
|
2022-02-21 15:28:19 +01:00
|
|
|
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 "";
|
2022-02-21 17:21:21 +01:00
|
|
|
},
|
|
|
|
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);
|
2022-02-21 15:28:19 +01:00
|
|
|
}
|
|
|
|
};
|
|
|
|
const autocompleteAddr = new Autocomplete("#search-addr-autocomplete", autocompleteOptions);
|
|
|
|
return autocompleteAddr;
|
|
|
|
}
|
|
|
|
|
2022-02-21 17:21:21 +01:00
|
|
|
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;
|