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

const minZoomForRequest = 17;
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);
    displayBtn(btn);
  } 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;
  console.log(buildings)
  markers = Object.values(buildings).map(building => {
    console.log(building.numVoieImm)
    console.log("lat", building.y)
    console.log("lng", building.x)
    const latlng = new L.latLng(building.y, building.x);
    const addrImm = `${building.numVoieImm} ${building.typeVoieImm} ${building.nomVoieImm}`
    const marker = new L.marker(latlng)
      .bindPopup(`${addrImm}<br/>Etat: ${building.etatImm}<br/>Code Immeuble: ${building.idImm}`);
    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 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);
  }
}

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é.";
}


const btn = initBtn();
const map = initMap(btn);
const addrSearch = initAddrSearch(map);