262 lines
10 KiB
JavaScript
262 lines
10 KiB
JavaScript
const minZoomForRequest = 17;
|
|
const urlADSL = 'https://tools.aquilenet.fr/cgi-bin/recherchend.cgi'
|
|
const urlTestFTTH = 'https://tools.aquilenet.fr/cgi-bin/test.cgi'
|
|
|
|
const streetTypeConversion = new Map();
|
|
streetTypeConversion.set("aire", "aire")
|
|
streetTypeConversion.set("allée", "all")
|
|
streetTypeConversion.set("allee", "all")
|
|
streetTypeConversion.set("avenue", "av")
|
|
streetTypeConversion.set("base", "base")
|
|
streetTypeConversion.set("boulevard", "bd")
|
|
streetTypeConversion.set("cami", "cami")
|
|
streetTypeConversion.set("carrefour", "car")
|
|
streetTypeConversion.set("chemin", "che")
|
|
streetTypeConversion.set("cheminement", "chem")
|
|
streetTypeConversion.set("chaussée", "chs")
|
|
streetTypeConversion.set("cité", "cite")
|
|
streetTypeConversion.set("cite", "cite")
|
|
streetTypeConversion.set("clos", "clos")
|
|
streetTypeConversion.set("coin", "coin")
|
|
streetTypeConversion.set("corniche", "cor")
|
|
streetTypeConversion.set("cote", "cote")
|
|
streetTypeConversion.set("cour", "cour")
|
|
streetTypeConversion.set("cours", "crs")
|
|
streetTypeConversion.set("domaine", "dom")
|
|
streetTypeConversion.set("descente", "dsc")
|
|
streetTypeConversion.set("ecart", "eca")
|
|
streetTypeConversion.set("esplanade", "esp")
|
|
streetTypeConversion.set("faubourg", "fg")
|
|
streetTypeConversion.set("gare", "gare")
|
|
streetTypeConversion.set("grande rue", "gr")
|
|
streetTypeConversion.set("hameau", "ham")
|
|
streetTypeConversion.set("halle", "hle")
|
|
streetTypeConversion.set("ilôt", "ilot")
|
|
streetTypeConversion.set("impasse", "imp")
|
|
streetTypeConversion.set("lieu dit", "ld")
|
|
streetTypeConversion.set("lotissement", "lot")
|
|
streetTypeConversion.set("marché", "mar")
|
|
streetTypeConversion.set("montée", "mte")
|
|
streetTypeConversion.set("parc", "parc")
|
|
streetTypeConversion.set("passage", "pas")
|
|
streetTypeConversion.set("place", "pl")
|
|
streetTypeConversion.set("plan", "plan")
|
|
streetTypeConversion.set("plaine", "pln")
|
|
streetTypeConversion.set("plateau", "plt")
|
|
streetTypeConversion.set("pont", "pont")
|
|
streetTypeConversion.set("port", "port")
|
|
streetTypeConversion.set("promenade", "pro")
|
|
streetTypeConversion.set("parvis", "prv")
|
|
streetTypeConversion.set("quartier", "qua")
|
|
streetTypeConversion.set("quai", "quai")
|
|
streetTypeConversion.set("résidence", "res")
|
|
streetTypeConversion.set("residence", "res")
|
|
streetTypeConversion.set("ruelle", "rle")
|
|
streetTypeConversion.set("rocade", "roc")
|
|
streetTypeConversion.set("rond point", "rpt")
|
|
streetTypeConversion.set("route", "rte")
|
|
streetTypeConversion.set("rue", "rue")
|
|
streetTypeConversion.set("sentier", "sen")
|
|
streetTypeConversion.set("sente", "sen")
|
|
streetTypeConversion.set("square", "sq")
|
|
streetTypeConversion.set("tour", "tour")
|
|
streetTypeConversion.set("terre-plein", "tpl")
|
|
streetTypeConversion.set("traverse", "tra")
|
|
streetTypeConversion.set("villa", "vla")
|
|
streetTypeConversion.set("village", "vlge ")
|
|
streetTypeConversion.set("voie", "voie")
|
|
streetTypeConversion.set("zone artisanale", "za")
|
|
streetTypeConversion.set("zone d'aménagement concerté", "zac")
|
|
streetTypeConversion.set("zone d'aménagement différé", "zad")
|
|
streetTypeConversion.set("zone industrielle", "zi")
|
|
streetTypeConversion.set("zone", "zone")
|
|
|
|
let markers = [];
|
|
|
|
function initMap(btn) {
|
|
// Init map position/zoom. Potentially using what's in the URL search string.
|
|
const params = new URLSearchParams(window.location.search);
|
|
let x = parseFloat(params.get('x'));
|
|
let y = parseFloat(params.get('y'));
|
|
let z = parseInt(params.get('z'));
|
|
let map = L.map('map');
|
|
if (x && y && z) {
|
|
map.setView([y, x], z);
|
|
fetchEligData(map);
|
|
} else {
|
|
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);
|
|
|
|
map.on("zoom", () => {
|
|
/* We only want to enable the search button when we reached a sufficient zoom level */
|
|
if (btn.disabled && map.getZoom() >= minZoomForRequest) {
|
|
displayBtn(btn);
|
|
}
|
|
if (!btn.disabled && map.getZoom() < minZoomForRequest) {
|
|
hideBtn(btn);
|
|
}
|
|
});
|
|
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) {
|
|
if (markers) {
|
|
markers.map(marker => map.removeLayer(marker));
|
|
}
|
|
let buildings = eligData.buildings;
|
|
markers = buildings.forEach(building => {
|
|
const latlng = new L.latLng(building.y, building.x);
|
|
let addrImm = `${building.numVoieImm} ${building.typeVoieImm} ${building.nomVoieImm}`
|
|
if (building.bat_info != "") {
|
|
addrImm += ` (Bat ${building.bat_info})`
|
|
}
|
|
let colorMarker = 'black'
|
|
let messageElig = ``
|
|
eligTestApi = `eligtest/ftth?idImm=${building.idImm}&codePostal=${building.codePostal}&axione=${building.aquilenetEligStatus.isEligible}&liazo=${building.fdnEligStatus.isEligible}`
|
|
// éligible chez Aquilenet, lien pour le test
|
|
if (building.aquilenetEligStatus.isEligible) {
|
|
messageElig = `<p class=deployeeAquilenet>Fibre deployee et disponible par Aquilenet !</p>`
|
|
const zip = encodeURIComponent(building.codePostal);
|
|
const idImm = encodeURIComponent(building.idImm);
|
|
messageElig += `<br/><a href=${urlTestFTTH}?ftth=1&axione=1&adsltel=NOUVEAU&cp=${zip}&refimmeuble=${idImm}` +
|
|
`>Tester l'éligibilité</a>`
|
|
colorMarker = 'green'
|
|
// pas de données Axione mais Kosc nous renvoie qque chose à cette adresse (fdnEligStatus)
|
|
// c'est peut être OK, on croise avec les données ARCEP (othersEligStatus)
|
|
// Enfin on affiche un lien vers le test d'éligibilté KOSC à cette adresse
|
|
} else if (building.fdnEligStatus.isEligible && building.othersEligStatus.isEligible) {
|
|
messageElig = `<p class=deployeeFDN>Fibre deployee mais pas chez Axione !`
|
|
messageElig += `<br/><a href=${eligTestApi}>Tester l'eligibilite par Kosc et Bouygues</a></p>`
|
|
colorMarker = 'orange'
|
|
// Pas de données Kosc ou Axione mais l'ARCEP nous dit qu'une fibre est déployée à cette adresse
|
|
} else if (building.othersEligStatus.isEligible) {
|
|
messageElig = `<p class=deployeeAutres>Fibre deployee mais non eligible Aquilenet, desole :(</p>`
|
|
colorMarker = 'red'
|
|
// Pas de fibre il semblerait, proposer un test ADSL Aquilenet
|
|
} else {
|
|
messageElig = `<p class=nonDeployee>Fibre non deployee :(</p>`
|
|
const zip = encodeURIComponent(building.codePostal);
|
|
const comm = encodeURIComponent(building.commune);
|
|
let convertType = streetTypeConversion.get(building.typeVoieImm.toLowerCase());
|
|
if (!convertType) {
|
|
convertType = building.typeVoieImm;
|
|
}
|
|
const street = encodeURIComponent(`${convertType} ${building.nomVoieImm}`)
|
|
const street_nb = encodeURIComponent(building.numVoieImm)
|
|
messageElig += `<br/><a href=${urlADSL}?zip=${zip}&city=${comm}&street=${street}&street_nb=${street_nb}&gps=&do=1&submit=Valider` +
|
|
`>Tester ADSL a cette adresse</a>`
|
|
if (building.othersEligStatus.reasonNotEligible != "") {
|
|
messageElig += `<br/><br/>Status general ARCEP: ${building.othersEligStatus.reasonNotEligible}`
|
|
}
|
|
}
|
|
// Si pas d'éligibilité fibre, on affiche la raison si elle existe
|
|
if (building.aquilenetEligStatus.reasonNotEligible != "") {
|
|
messageElig += `<br/> Pour Aquilenet, raison non eligible: ${building.aquilenetEligStatus.reasonNotEligible}`
|
|
}
|
|
var markerIcon = new L.Icon({
|
|
iconUrl: `static/icons/marker-icon-${colorMarker}.png`,
|
|
shadowUrl: 'static/vendor/images/marker-shadow.png',
|
|
iconSize: [25, 41],
|
|
iconAnchor: [12, 41],
|
|
popupAnchor: [1, -34],
|
|
shadowSize: [41, 41]
|
|
});
|
|
const marker = new L.marker(latlng, {
|
|
icon: markerIcon
|
|
})
|
|
.bindPopup(`${addrImm}<br/>${building.codePostal} ${building.commune}` +
|
|
`<br/><br/>${messageElig}<br/><br/>Ref Immeuble: ${building.idImm}`, {
|
|
maxWidth: 560
|
|
});
|
|
map.addLayer(marker);
|
|
return marker
|
|
});
|
|
}
|
|
|
|
function updateUrl(map) {
|
|
const c = map.getCenter();
|
|
history.replaceState({}, "", encodeURI(`?x=${c.lng}&y=${c.lat}&z=${map.getZoom()}`));
|
|
}
|
|
|
|
async function fetchEligData(map) {
|
|
const zoom = map.getZoom();
|
|
if (zoom >= minZoomForRequest) {
|
|
const bounds = map.getBounds();
|
|
const sw = bounds.getSouthWest();
|
|
const ne = bounds.getNorthEast();
|
|
const btn = document.getElementById("btn-load-elig-data");
|
|
waitBtn(btn);
|
|
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);
|
|
updateUrl(map);
|
|
displayBtn(btn);
|
|
}
|
|
}
|
|
|
|
function initBtn() {
|
|
const btn = document.getElementById("btn-load-elig-data");
|
|
btn.disabled = true;
|
|
btn.title = "Veuillez zoomer plus la carte avant de lancer une recherche d'éligibilité.";
|
|
btn.onclick = () => fetchEligData(map);
|
|
return btn;
|
|
}
|
|
|
|
function displayBtn(btn) {
|
|
btn.disabled = false;
|
|
btn.title = "Rechercher les données d'éligibilité pour cette zone."
|
|
}
|
|
|
|
function hideBtn(btn) {
|
|
btn.disabled = true;
|
|
btn.title = "Veuillez zoomer plus la carte avant de lancer une recherche d'éligibilité.";
|
|
}
|
|
|
|
function waitBtn(btn) {
|
|
btn.disabled = true;
|
|
btn.title = "Chargement des batiments...";
|
|
}
|
|
|
|
|
|
const btn = initBtn();
|
|
const map = initMap(btn);
|
|
const addrSearch = initAddrSearch(map); |