Axione-IPE-Viewer/webapp/templates/app.js

const minZoomForRequest = 17;
const urlADSL='https://tools.aquilenet.fr/cgi-bin/recherchend.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: '&copy; <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) {
  markers.map(marker => map.removeLayer(marker));
  let buildings = eligData.buildings;
  markers = Object.values(buildings).map(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 messageElig = ``
    eligTestApi=`eligtest/ftth?idImm=${building.idImm}&codePostal=${building.codePostal}&axione=${building.aquilenetEligStatus.isEligible}&liazo=${building.fdnEligStatus.isEligible}`
    if (building.aquilenetEligStatus.isEligible) {
      messageElig = `<p class=deployeeAquilenet>Fibre deployee et disponible par Aquilenet !`
      // messageElig += `<br/><a href=${eligTestApi}>Tester l'eligibilite par Aquilenet`
      // if (building.fdnEligStatus.isEligible) {
      //   messageElig += " et FDN"
      // }
      // messageElig += "</a>"
      messageElig += "</p>"
    } else if (building.fdnEligStatus.isEligible && building.othersEligStatus.isEligible) {
      messageElig = `<p class=deployeeFDN>Fibre deployee mais pas chez Aquilenet !`
      messageElig += `<br/><a href=${eligTestApi}>Tester l'eligibilite par FDN</a></p>`
    } else if (building.othersEligStatus.isEligible) {
      messageElig = `<p class=deployeeAutres>Fibre deployee mais non eligible Aquilenet, desole :(</p>`
    } else {
      messageElig = `<p class=nonDeployee>Fibre non deployee :(</p>`
      zip=encodeURIComponent(building.codePostal);
      comm=encodeURIComponent(building.commune);
      convertType = streetTypeConversion.get(building.typeVoieImm.toLowerCase());
      if (! convertType) {
        convertType = building.typeVoieImm;
      }
      street=encodeURIComponent(`${convertType} ${building.nomVoieImm}`)
      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}`
      }
    }
    if (building.aquilenetEligStatus.reasonNotEligible != "") {
      messageElig += `<br/> Pour Aquilenet, raison non eligible: ${building.aquilenetEligStatus.reasonNotEligible}`
    }
    const marker = new L.marker(latlng)
      .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 mc = map.getCenter();
    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}&centerlat=${mc.lat}&centerlng=${mc.lng}`);
    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);