feat(route-draw): enhancements

deploiement-appli-mobile.md

@@ -0,0 +1,82 @@
+# Application mobile Géoportail - procédure de déploiement
+
+## Prérequis
+
+- [node](https://nodejs.org/en/)
+- [Cordova](https://cordova.apache.org/#getstarted)
+
+## Capacitor
+- `npm run build`
+- `npx cap sync`
+- `cd android && ./gradlew assembleRelease`
+- `zipalign 4 ./android/app/build/outputs/apk/release/app-release-signed.apk ./android/app/build/outputs/apk/release/app-release-aligned.apk`
+- `apksigner sign --ks /<chemin_vers>/ign.keystore --v1-signing-enabled true --v2-signing-enabled true ./android/app/build/outputs/apk/release/app-release-aligned.apk`
+
+- Génération des assets : https://github.com/ionic-team/capacitor-assets
+
+## Android
+
+### Prérequis spécifiques
+- Avoir le keystore ign.keystore sur la machine
+- `zipalign` (`apt install zipalign`)
+- [Installer les dépendances de Cordova pour Android (JDK, Android SDK, etc)](https://cordova.apache.org/docs/en/latest/guide/platforms/android/#installing-the-requirements)
+
+### Étapes
+
+Voici les étapes à réaliser pour déployer la dernière version du code de l'application Android du dépôt de l'UL :
+
+#### Construction du binaire
+- `git clone https://gitlab.ul.geoportail.rie.gouv.fr/ign/appli-mobile-geoportail`
+- `cd appli-mobile-geoportail`
+- `git checkout android`
+- `cordova platform add android`
+- `npm install`
+- `cordova build android --release --prod -- --packageType apk`
+- `jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore /<chemin_vers>/ign.keystore ./platforms/android/app/build/outputs/apk/release/app-release-unsigned.apk geoportail_mobile` (passphrase : G3oportail)
+- `zipalign 4 ./platforms/android/app/build/outputs/apk/release/app-release-unsigned.apk ./platforms/android/app/build/outputs/apk/release/app-release.apk`
+- `apksigner sign --ks /<chemin_vers>/ign.keystore --v1-signing-enabled true --v2-signing-enabled true ./platforms/android/app/build/outputs/apk/release/app-release.apk`
+
+Le fichier `app-release.apk` ainsi créé est signé et est prête à être déposé sur la Google Play Console.
+
+#### Déploiement en bêta
+
+- Accéder à la [Google Play Console](https://play.google.com/console/developers/4728683733784898454/app-list) et sélectionner l'application Géoportail (le nom varie, mais a toujours en sous-titre fr.ign.geoportail)
+
+- Sur le panneau situé à gauche, dans la section `Publier`, dans la sous-section `Tests`, sélectionner (par exemple) `Test ouvert`.
+
+- Cliquer sur `Créer une release` en haut à droite.
+
+- Dans la section `Apps bundles et APK`, cliquer sur `Importer` et sélectionner le fichier créé précédemment : `app-release.apk`.
+
+- Remplir les informations, enregistrer puis examiner la release.
+
+- Pour promouvoir la release, dans l'écran récapitulatif des tests ouverts, sous la section `Releases`, cliquer sur `Promouvoir la release`
+
+## iOS
+
+### Prérequis spécifiques
+- N'est possible que sur Mac
+- [Installer les dépendances de Cordova pour iOS](https://cordova.apache.org/docs/en/latest/guide/platforms/ios/#installing-the-requirements)
+- Avoir dans le trouseau d'accès un certificat de publication App Store
+
+### Étapes
+
+#### Construction et téléversement du binaire
+- `git clone https://gitlab.ul.geoportail.rie.gouv.fr/ign/appli-mobile-geoportail`
+- `cd appli-mobile-geoportail`
+- `git checkout ios`
+- `cordova platform add ios`
+- `cordova build ios `
+
+- Un fichier `Géoportail.xcodeproj` a été créé dans le dossier `./platforms/ios`. L'ouvrir avec XCode.
+- Dans XCode, dans l'onglet Certificats et signatures, entrer le certificat de publication App Store.
+- Dans le menu général (barre tout en haut de l'écran) : `Product > Destination > Any iOS device (arm64)`
+- Dans le menu général (barre tout en haut de l'écran) : `Product > Archive`
+
+- Une nouvelle fenêtre s'ouvre après la construction du binaire (quelques minutes). Cliquer sur `Distribute App`.
+- Appuyer sur Next et OK 6 fois, jusqu'à ce que l'application soit téléversée.
+
+#### Déploiement en bêta
+- Accéder à [App Store Connect](https://appstoreconnect.apple.com/apps/748345888/testflight/ios) et sélectionner l'application mobile Géoportail.
+- Dans la section `TestFlight`, le dernier binaire doit appparaître. Sinon, attendre quelques minutes.
+- Cliquer sur la version du build à tester, entrer les informations et les groupes de testeurs, puis lancer la vérification manuelle.

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;