feat: update URL

js/main.ts

@@ -65,13 +65,6 @@ let zonage = {
   milieu: {},
 }
 
-window.addEventListener("load", async () => {
-  const response = await fetch(`${ALEXI_URL}/index.json`);
-  if (response.ok) {
-    zonage = await response.json();
-  }
-});
-
 function categorieTexte(info) {
   if (info === null)
     return "inconnu";
@@ -118,7 +111,7 @@ const zonesource = new VectorSource();
 const zonelayer = new VectorLayer<any>({  // stfu tsc
   source: zonesource,
 });
-function updateInfo(info) {
+function updateInfo(info, coords) {
   const infoDiv = document.getElementById("info");
   if (infoDiv === null)
     throw "Element not found: info";
@@ -139,6 +132,8 @@ function updateInfo(info) {
     maxZoom: 16,
     duration: 500,
   });
+  const [lon, lat] = coords;
+  history.replaceState(null, "", "?g=" + encodeURICompoenent(`${lat},${lon}`));
 }
 
 function infoError(txt: string) {
@@ -154,7 +149,7 @@ async function getInfo(coords: GeoJSONPosition) {
   const response = await fetch(url);
   if (response.ok) {
     const info = await response.json();
-    updateInfo(info);
+    updateInfo(info, coords);
   }
   else if (response.status == 404) {
     infoError(`L'endroit choisi ne se situe pas à Sainte-Adèle.  Veuillez réessayer.`);
@@ -209,3 +204,19 @@ map.on("click", async (evt) => {
   const coords = toLonLat(evt.coordinate);
   getInfo(coords);
 });
+
+window.addEventListener("load", async () => {
+  const response = await fetch(`${ALEXI_URL}/index.json`);
+  if (response.ok) {
+    zonage = await response.json();
+  }
+  const urlParams = new URLSearchParams(window.location.search);
+  const centroid = urlParams.get("g");
+  if (centroid !== null) {
+    const [lat, lon] = centroid.split(",").map(parseFloat);
+    const coords = [lon, lat];
+    const projPos = fromLonLat(coords);
+    view.animate({center: projPos});
+    getInfo(coords);
+  }
+});