edito: offlineMaps tweaks

Author: azarz

src/css/offline-maps.css

@@ -1,5 +1,5 @@
 #whiteScreen.downloadOverlay {
-  background-color: rgba(0,0,0,.7);
+  background-color: rgba(0,0,0,.5);
   /* Carré de 200px de côté au centre */
   clip-path: polygon(
     0% 0%, 0% 100%, calc(50% - 100px) 100%, calc(50% - 100px) calc(50% - 100px),

src/html/tabs/offlineMapsWindow.html

@@ -33,10 +33,10 @@ <h3>Téléchargement de votre carte...</h3>
   </div>
   <div id="offlineMapsWindowName" class="d-none">
     <h3>Succès du téléchargement !</h3>
-    Dernière étape, donner un nom à votre carte.
+    Dernière étape : nommer la carte.
     <div class="dsign-form-element">
-      <input type="text" id="offlineMaps-title" name="offlineMaps-title" class="landmark-input-text" placeholder=" " title="Nommer votre carte">
-      <label class="dsign-form-label">Nommer votre carte</label>
+      <input type="text" id="offlineMaps-title" name="offlineMaps-title" class="landmark-input-text" placeholder=" " title="Titre">
+      <label class="dsign-form-label">Titre</label>
     </div>
     <div id="offlineMapsSave" class="form-submit">Enregistrer</div>
   </div>

src/js/event-listeners.js

@@ -197,6 +197,7 @@ function addListeners() {
       return;
     }
     Globals.online = newStatus;
+    const planIgnLayerBtn = document.getElementById("PLAN.IGN.INTERACTIF$TMS");
     if (newStatus) {
       PopupUtils.showOnlinePopup(`
       <div id="onlinePopup">
@@ -207,6 +208,9 @@ function addListeners() {
           </div>
       </div>
       `, map);
+      if (Capacitor.isNativePlatform()) {
+        this.map.setGlyphs("https://data.geopf.fr/annexes/ressources/vectorTiles/fonts/{fontstack}/{range}.pbf");
+      }
     } else {
       PopupUtils.showOnlinePopup(`
       <div id="onlinePopup">
@@ -217,6 +221,13 @@ function addListeners() {
           </div>
       </div>
       `, map);
+      if (Capacitor.isNativePlatform()) {
+        this.map.setGlyphs("data/fallback_glyphs/{fontstack}/{range}.pbf");
+      }
+      // Active Plan IGN
+      if (!planIgnLayerBtn.classList.contains("selectedLayer")) {
+        planIgnLayerBtn.click();
+      }
     }
   });
 

src/js/layer-manager/layer-catalogue.js

@@ -302,6 +302,15 @@ class LayerCatalogue extends EventTarget {
       });
       return;
     }
+    // Si on est hors ligne : impossible d'enlever Plan IGN
+    if (!Globals.online && layerName === "PLAN.IGN.INTERACTIF$TMS") {
+      Toast.show({
+        text: "Impossible d'enlever le Plan IGN en mode hors-ligne",
+        duration: "short",
+        position: "bottom"
+      });
+      return;
+    }
     var element = document.getElementById(layerName);
     element.classList.remove("selectedLayer");
 

src/js/layer-manager/layer-switcher.js

@@ -16,6 +16,7 @@ import ImageNotFound from "../../html/img/image-not-found.png";
 import DomUtils from "../utils/dom-utils";
 
 import { Toast } from "@capacitor/toast";
+import { Capacitor } from "@capacitor/core";
 
 /**
  * Gestionnaire de couches
@@ -621,7 +622,7 @@ class LayerSwitcher extends EventTarget {
           this.map.setSprite(data_1.sprite);
           this.map.setGlyphs(data_1.glyphs);
           // Fallback for offline glyphs
-          if (!Globals.online) {
+          if (!Globals.online && Capacitor.isNativePlatform()) {
             this.map.setGlyphs("data/fallback_glyphs/{fontstack}/{range}.pbf");
           }
           const data_2 = data_1;

src/js/my-account/my-account-dom.js

@@ -680,6 +680,11 @@ let MyAccountDOM = {
     // Au clic sur la carte : zoomer sur l'emprise
 
     container.querySelector(`#offline-map-basic-tools_ID_${offlineMapId}`).addEventListener("click", () => {
+      // Place le plan IGN au dessus de la pile des couches
+      const planIgnLayerBtn = document.getElementById("PLAN.IGN.INTERACTIF$TMS");
+      do {
+        planIgnLayerBtn.click();
+      } while (!planIgnLayerBtn.classList.contains("selectedLayer"));
       this.hide();
       this.map.fitBounds([[offlineMap.boundingBox.minLng, offlineMap.boundingBox.minLat], [offlineMap.boundingBox.maxLng, offlineMap.boundingBox.maxLat]]);
     });

src/js/offline-maps.js

@@ -254,10 +254,10 @@ class OfflineMaps {
     PopupUtils.showPopup(
       `
       <div id="planIgnInfoPopup">
-          <div class="divPositionTitle">Pourquoi uniquement plan IGN ?</div>
+          <div class="divPositionTitle">Pourquoi uniquement Plan IGN ?</div>
           <div class="divPopupClose" onclick="onClosePlanIgnInfoPopup(event)"></div>
           <div class="divPopupContent">
-              L'adresse affichée est obtenue grâce au service de géocodage inverse. Ce service retourne, à partir d'un point sur la carte, l'adresse de la Base Adresse Nationale (BAN) la plus proche. Selon ce principe, une adresse affichée peut différer de l'adresse connue d'un lieu.
+            Certaines cartes SCAN - dont le SCAN 25 - ne sont pas libres de droits. Pour garantir la gratuité de l'application, le téléchargement pour une utilisation hors ligne est uniquement disponible à partir du Plan IGN.
           </div>
       </div>
       `,
@@ -284,6 +284,7 @@ class OfflineMaps {
       duration: "long",
       position: "bottom"
     });
+    Globals.menu.open("myaccount");
   }
 
   /**
@@ -332,6 +333,9 @@ class OfflineMaps {
    * Locks the map view before downloading
    */
   #lockView() {
+    if (this.map.getZoom() < 8) {
+      return;
+    }
     this.dom.selectOnMapScreen.classList.add("d-none");
     this.dom.failedWindow.classList.add("d-none");
     this.dom.startDownloadScreen.classList.remove("d-none");
@@ -457,9 +461,6 @@ class OfflineMaps {
         this.#setLayerSource(this.map, layer.id, "offline-plan-ign");
       }
     });
-    if (Capacitor.isNativePlatform()) {
-      this.map.setGlyphs("data/fallback_glyphs/{fontstack}/{range}.pbf");
-    }
   }
 
   /**
@@ -471,9 +472,6 @@ class OfflineMaps {
         this.#setLayerSource(this.map, layer.id, "plan_ign");
       }
     });
-    if (Capacitor.isNativePlatform()) {
-      this.map.setGlyphs("https://data.geopf.fr/annexes/ressources/vectorTiles/fonts/{fontstack}/{range}.pbf");
-    }
   }
 
   /**

src/js/poi.js

@@ -4,6 +4,8 @@
  * This program and the accompanying materials are made available under the terms of the GPL License, Version 3.0.
  */
 
+import { Capacitor } from "@capacitor/core";
+
 import LayersConfig from "./layer-manager/layer-config";
 import LayersGroup from "./layer-manager/layer-group";
 
@@ -107,7 +109,7 @@ class POI {
         this.map.setSprite(data.sprite);
         this.map.setGlyphs(data.glyphs);
         // Fallback for offline glyphs
-        if (!Globals.online) {
+        if (!Globals.online && Capacitor.isNativePlatform()) {
           this.map.setGlyphs("data/fallback_glyphs/{fontstack}/{range}.pbf");
         }
         this.#loadSprite(data.sprite);