feat(route-draw): enhancements

src/js/data-layer/base-layer-config.json

@@ -1,15 +1,16 @@
 {
     "base-layers": [
-      "GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2$GEOPORTAIL:OGC:WMTS",
+      "PLAN.IGN.INTERACTIF$GEOPORTAIL:GPP:TMS",
       "ORTHOIMAGERY.ORTHOPHOTOS$GEOPORTAIL:OGC:WMTS",
       "GEOGRAPHICALGRIDSYSTEMS.MAPS.SCAN25TOUR.CV$GEOPORTAIL:OGC:WMTS",
-      "GEOGRAPHICALGRIDSYSTEMS.MAPS$GEOPORTAIL:OGC:WMTS",
-      "PLAN.IGN.INTERACTIF$GEOPORTAIL:GPP:TMS"
+      "GEOGRAPHICALGRIDSYSTEMS.MAPS$GEOPORTAIL:OGC:WMTS"
     ],
     "rlt-layers": [
+      "ORTHOIMAGERY.ORTHOPHOTOS$GEOPORTAIL:OGC:WMTS",
       "ORTHOIMAGERY.ORTHOPHOTOS2006-2010$GEOPORTAIL:OGC:WMTS",
       "ORTHOIMAGERY.ORTHOPHOTOS2000-2005$GEOPORTAIL:OGC:WMTS",
       "ORTHOIMAGERY.ORTHOPHOTOS.1950-1965$GEOPORTAIL:OGC:WMTS",
+      "GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2$GEOPORTAIL:OGC:WMTS",
       "GEOGRAPHICALGRIDSYSTEMS.MAPS.SCAN50.1950$GEOPORTAIL:OGC:WMTS",
       "GEOGRAPHICALGRIDSYSTEMS.ETATMAJOR40$GEOPORTAIL:OGC:WMTS",
       "GEOGRAPHICALGRIDSYSTEMS.CASSINI$GEOPORTAIL:OGC:WMTS"

src/js/data-layer/layers-config.json

@@ -2,7 +2,9 @@
   "generalOptions": {
     "apiKeys": {
       "appign": [
-        "GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2$GEOPORTAIL:OGC:WMTS",
+        "OSM.POI$GEOPORTAIL:GPP:TMS",
+
+        "PLAN.IGN.INTERACTIF$GEOPORTAIL:GPP:TMS",
         "ORTHOIMAGERY.ORTHOPHOTOS$GEOPORTAIL:OGC:WMTS",
         "GEOGRAPHICALGRIDSYSTEMS.MAPS.SCAN25TOUR.CV$GEOPORTAIL:OGC:WMTS",
         "GEOGRAPHICALGRIDSYSTEMS.MAPS$GEOPORTAIL:OGC:WMTS",
@@ -33,6 +35,7 @@
         "ORTHOIMAGERY.ORTHOPHOTOS2006-2010$GEOPORTAIL:OGC:WMTS",
         "ORTHOIMAGERY.ORTHOPHOTOS2000-2005$GEOPORTAIL:OGC:WMTS",
         "ORTHOIMAGERY.ORTHOPHOTOS.1950-1965$GEOPORTAIL:OGC:WMTS",
+        "GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2$GEOPORTAIL:OGC:WMTS",
         "GEOGRAPHICALGRIDSYSTEMS.MAPS.SCAN50.1950$GEOPORTAIL:OGC:WMTS",
         "GEOGRAPHICALGRIDSYSTEMS.ETATMAJOR40$GEOPORTAIL:OGC:WMTS",
         "GEOGRAPHICALGRIDSYSTEMS.CASSINI$GEOPORTAIL:OGC:WMTS"
@@ -4253,8 +4256,8 @@
         }
       },
       "name": "PLAN.IGN.INTERACTIF",
-      "title": "Plan IGN interactif",
-      "description": "BDUni tuilée avec la BDtopo",
+      "title": "Plan IGN",
+      "description": "Plan IGN vectoriel, interactif : au clic, affichez les informations de légende et les données issues de la BD Topo.",
       "formats": [
         {
           "current": true,

src/js/elevation-line-control.js

@@ -18,6 +18,8 @@ ChartJS.register(
 import maplibregl from 'maplibre-gl';
 import ElevationLine from "./services/elevation-line";
 
+import { Toast } from '@capacitor/toast';
+
 /**
  * Interface sur le contrôle profil altimétrique
  * @module ElevationLineControl
@@ -124,7 +126,12 @@ class ElevationLineControl {
     try {
       responseElevation = await ElevationLine.compute(this.coordinates);
     } catch(err) {
-      responseElevation = {elevations: []}
+      Toast.show({
+        text: "Erreur lors du calcul de profil altimétrique",
+        duration: "short",
+        position: "bottom"
+      });
+      responseElevation = {elevations: [{lon: 0, lat:0, z:0}]}
     }
     let lastLngLat = null;
     let lastZ = null;

src/js/globals.js

@@ -7,7 +7,7 @@ let mapRLT = null;
  */
 let layersDisplayed;
 if (!localStorage.getItem("lastLayersDisplayed")) {
-  layersDisplayed = ["ORTHOIMAGERY.ORTHOPHOTOS$GEOPORTAIL:OGC:WMTS"];
+  layersDisplayed = ["PLAN.IGN.INTERACTIF$GEOPORTAIL:GPP:TMS"];
 } else {
   layersDisplayed = JSON.parse(localStorage.getItem("lastLayersDisplayed"));
 }

src/js/index.js

@@ -108,20 +108,17 @@ function app() {
     var source = LayersConfig.baseLayerSources[layer];
     if (source.type !== "vector") {
       map.addSource(layer, source);
-      mapRLT.addSource(layer, source);
     }
   }
   for (let layer in LayersConfig.rltLayerSources) {
     var source = LayersConfig.rltLayerSources[layer];
     if (source.type !== "vector") {
-      map.addSource(layer, source);
       mapRLT.addSource(layer, source);
     }
   }
   for (let layer in LayersConfig.thematicLayerSources) {
     var source = LayersConfig.thematicLayerSources[layer];
     if (source.type !== "vector") {
-      map.addSource(layer, source);
     }
   }
 

src/js/interactivity.js

@@ -18,7 +18,8 @@ class Interactivity {
         id: "PLAN.IGN.INTERACTIF$GEOPORTAIL:GPP:TMS"
       };
 
-      this.activated = null;
+      this.shown = null;
+      this.hardDisabled = false;
 
       this.map = map;
       this.id = this.options.id || "PLAN.IGN.INTERACTIF$GEOPORTAIL:GPP:TMS"; // PII
@@ -29,6 +30,8 @@ class Interactivity {
       this.thematic = false; // couche thematic chargée ?
       this.position = false; // couche en position max ?
 
+      this.piiMinZoom = 14; // zoom mini pour l'interactivité
+
       this.popup = null;
 
       return this;
@@ -37,7 +40,7 @@ class Interactivity {
     /**
      * Ecouteurs sur :
      * - gestion des ajout / suppression / position des couches
-     * - si zooms > 14 actif pour la couche PII
+     * - si zooms > piiMinZoom actif pour la couche PII
      * - la couche au dessus est elle un baseLayer ?
      */
     #listen() {
@@ -47,7 +50,10 @@ class Interactivity {
       Globals.manager.addEventListener("movelayer", this.onGetLastLayer);
 
       this.map.on("zoom", (e) => {
-        if (this.pii && this.position && Math.round(e.target.getZoom()) > 10) {
+        if (this.hardDisabled) {
+          return;
+        }
+        if (this.pii && this.position && Math.round(e.target.getZoom()) > this.piiMinZoom) {
           this.active();
         } else {
           (this.thematic && this.position) ? this.active() : this.disable();
@@ -69,7 +75,7 @@ class Interactivity {
       if (layer[0] === this.id) {
         this.pii = true;
         this.position = true;
-        if (Math.round(this.map.getZoom())>14) {
+        if (Math.round(this.map.getZoom()) > this.piiMinZoom) {
           this.active();
         } else {
           this.disable();
@@ -89,18 +95,36 @@ class Interactivity {
      * Active l'indicateur d'activité
      */
     active () {
-      this.activated = true;
+      this.hardDisabled = false;
+      this.shown = true;
       DOM.$interactivityBtn.style.removeProperty("display");
     }
 
     /**
      * Desactive l'indicateur d'activité
+     * @param {boolean} hard l'interactivité reste désactivée tant qu'active() n'est pas appelée
      */
     disable () {
-        this.activated = false;
+        this.shown = false;
         DOM.$interactivityBtn.style.display = "none";
     }
 
+    /**
+     * Desactive l'indicateur d'activité jusqu'à nouvel ordre
+     */
+    hardDisable() {
+        this.hardDisabled = true;
+        this.disable();
+    }
+
+    /**
+     * Réactive l'indicateur après désactivation forcée
+     */
+    enable() {
+      this.hardDisabled = false;
+      this.map.fire("zoom");
+    }
+
     /**
      * affiche la popup explicative
      * @public

src/js/layer-catalogue.js

@@ -191,6 +191,7 @@ class LayerCatalogue extends EventTarget {
     document.querySelectorAll(".baseLayer").forEach((el) => {
       el.addEventListener('click', (e) => {
         if (el.classList.contains("selectedLayer") || el.classList.contains("comparedLayer")) {
+          this.removeLayer(el.id);
         } else {
           this.addLayer(el.id);
         }

src/js/layer-switcher.js

@@ -612,7 +612,6 @@ class LayerSwitcher extends EventTarget {
      * @public
      */
     addLayer(id) {
-      console.log("addLayer")
       var props = LayersConfig.getLayerProps(id);
       this.index++;
       this.layers[id] = {

src/js/map-listeners.js

@@ -68,7 +68,7 @@ const addListeners = () => {
   // FIXME le mecanisme de GFI est à revoir afin de pouvoir requêter toutes les couches
   // ou la plus au dessus de la pile.
   map.on("click", (ev) => {
-    if (!Globals.interactivity.activated) {
+    if (!Globals.interactivity.shown) {
       return;
     }
     let features = map.queryRenderedFeatures(ev.point);

src/js/nav.js

@@ -126,7 +126,7 @@ class MenuNavigation {
 
                 DOM.$tabContainer.style.backgroundColor = "white";
                 DOM.$sideBySideBtn.classList.add('d-none');
-                Globals.interactivity.disable();
+                Globals.interactivity.hardDisable();
                 Globals.routeDraw.activate();
                 Globals.currentScrollIndex = 1;
                 break;
@@ -168,7 +168,7 @@ class MenuNavigation {
                 DOM.$sideBySideBtn.classList.add('d-none');
                 DOM.$backTopLeftBtn.classList.remove('d-none');
                 Globals.isochrone.interactive(true);
-                Globals.interactivity.disable();
+                Globals.interactivity.hardDisable();
                 Globals.currentScrollIndex = 1;
                 break;
             case "parameterScreen":
@@ -183,6 +183,7 @@ class MenuNavigation {
                 break;
             case "directionsResults":
                 DOM.$tabContainer.style.backgroundColor = "white";
+                Globals.interactivity.enable();
                 DOM.$tabContainer.style.removeProperty("height");
                 Globals.currentScrollIndex = 2;
                 break;
@@ -212,7 +213,7 @@ class MenuNavigation {
                 DOM.$backTopLeftBtn.classList.remove('d-none');
                 DOM.$sideBySideBtn.classList.add('d-none');
                 Globals.directions.interactive(true);
-                Globals.interactivity.disable();
+                Globals.interactivity.hardDisable();
                 Globals.currentScrollIndex = 2;
                 break;
             default:
@@ -265,7 +266,7 @@ class MenuNavigation {
                 DOM.$sideBySideBtn.classList.remove('d-none');
                 DOM.$tabContainer.style.removeProperty("background-color");
                 Globals.routeDraw.clear();
-                Globals.interactivity.active();
+                Globals.interactivity.enable();
                 break;
             case "poi":
                 DOM.$search.style.display = "flex";
@@ -302,7 +303,7 @@ class MenuNavigation {
                 DOM.$sideBySideBtn.classList.remove('d-none');
                 Globals.isochrone.clear();
                 Globals.isochrone.interactive(false);
-                Globals.interactivity.active();
+                Globals.interactivity.enable();
                 break;
             case "search":
                 DOM.$rech.blur();
@@ -339,6 +340,7 @@ class MenuNavigation {
                 Globals.currentScrollIndex = 1;
             case "directionsResults":
                 DOM.$tabContainer.style.removeProperty("background-color");
+                Globals.interactivity.hardDisable();
                 isSpecific = true;
                 isFinished = true;
                 break;
@@ -359,7 +361,7 @@ class MenuNavigation {
                 DOM.$sideBySideBtn.classList.remove('d-none');
                 Globals.directions.clear();
                 Globals.directions.interactive(false);
-                Globals.interactivity.active();
+                Globals.interactivity.enable();
                 break;
             default:
                 break;

src/js/route-draw/route-draw-dom.js

@@ -226,7 +226,9 @@ let RouteDrawDOM = {
         let totalSeconds = 0;
         this.dom.detailsList.innerHTML = "";
         if (data.steps.length > 0) {
-            for (let i = 0; i < data.points.length; i++) {
+            // Code facilement adaptable si on veut afficher toutes les étapes (ADDSTEPS)
+            // ADDSTEPS:  i += data.points.length - 1 --> i++
+            for (let i = 0; i < data.points.length; i += data.points.length - 1) {
                 const waypoint = data.points[i];
                 var waypointDiv = document.createElement("div");
                 waypointDiv.classList.add("routeDrawWaypointDiv");
@@ -254,18 +256,15 @@ let RouteDrawDOM = {
                 waypointLabelDurationTextSpan.innerText = waypointLabelDurationText;
 
                 if (i > 0) {
-                    const step = data.steps[i - 1];
-
+                    // ADDSTEPS: const step = data.steps[i - 1];
                     // Ajout de la div du step
                     var stepDiv = document.createElement("div");
                     stepDiv.classList.add("routeDrawStepDiv");
-                    stepDiv.innerText = utils.convertDistance(step.properties.distance) +
+                    stepDiv.innerText = utils.convertDistance(data.distance) + // ADDSTEPS: data.distance -> step.porperties.distance
                         " / " +
-                        utils.convertSecondsToTime(step.properties.duration);
+                        utils.convertSecondsToTime(data.duration); // ADDSTEPS: data.duration -> step.porperties.duration
                     this.dom.detailsList.appendChild(stepDiv);
-
-                    totalSeconds += step.properties.duration;
-
+                    totalSeconds += data.duration; // ADDSTEPS: data.duration -> step.porperties.duration
                     waypointLabelDurationTextSpan.innerText = utils.convertSecondsToTime(totalSeconds);
                 }
                 waypointLabel.appendChild(waypointLabelDurationTextSpan);

src/js/route-draw/route-draw-styles.js

@@ -10,7 +10,7 @@ const layers = {
     },
     paint: {
       "line-color": "#26a581",
-      "line-opacity": 0.55,
+      "line-opacity": ["case", ["boolean", ["get", "invisible"], false], 0, 0.55],
       "line-width": [
         "interpolate",
         ["exponential", 1.5],
@@ -34,7 +34,7 @@ const layers = {
     },
     paint: {
       "line-color": "#26a581",
-      "line-opacity": 0.85,
+      "line-opacity": ["case", ["boolean", ["get", "invisible"], false], 0, 0.85],
       "line-width": [
         "interpolate",
         ["exponential", 1.5],