Feat/online styles (#133)

IGNF · Dec 17, 2024 · e0bb500 · e0bb500
1 parent 3ccc832
commit e0bb500
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 202 deletions.
diff --git a/src/js/data-layer/layers-config.json b/src/js/data-layer/layers-config.json
@@ -4719,6 +4719,12 @@
           "name": "standard",
           "title": "Style standard",
           "current": true,
+          "url": "https://ignf.github.io/cartes-ign-app/plan-ign-interactif-style.json"
+        },
+        {
+          "name": "fallback",
+          "title": "Style standard",
+          "current": true,
           "url": "data/plan-ign-interactif-style.json"
         }
       ],
@@ -4764,6 +4770,12 @@
           "name": "standard",
           "title": "Style standard",
           "current": true,
+          "url": "https://ignf.github.io/cartes-ign-app/mixte.json"
+        },
+        {
+          "name": "fallback",
+          "title": "Style standard",
+          "current": true,
           "url": "data/mixte.json"
         }
       ],
@@ -4806,6 +4818,12 @@
           "name": "standard",
           "title": "Style standard",
           "current": true,
+          "url": "https://ignf.github.io/cartes-ign-app/poi-osm-style.json"
+        },
+        {
+          "name": "fallback",
+          "title": "Style standard",
+          "current": true,
           "url": "data/poi-osm-style.json"
         }
       ],

diff --git a/src/js/layer-manager/layer-config.js b/src/js/layer-manager/layer-config.js
@@ -82,6 +82,10 @@ const getLayerProps = (id) => {
   if (!style) {
     style = props.styles[0];
   }
+  var fallbackStyle = "";
+  if (isVector) {
+    fallbackStyle = props.styles[1];
+  }
   var format = props.formats.length ? props.formats.find((f) => { return f.current === true; }) : "";
   if (!format) {
     format = props.formats[0];
@@ -103,6 +107,7 @@ const getLayerProps = (id) => {
     maj: props.maj || "",
     type: (isVector) ? "vector" : "raster",
     style: (isVector) ? style.url : style.name || "normal",
+    fallbackStyle: (isVector) ? fallbackStyle.url : style.name || "normal",
     format: format.name || "",
     url: props.serviceParams.serverUrl[key],
     minNativeZoom: minNativeZoom,

diff --git a/src/js/layer-manager/layer-switcher.js b/src/js/layer-manager/layer-switcher.js
@@ -561,6 +561,7 @@ class LayerSwitcher extends EventTarget {
 
     var type = this.layers[id].type;
     var style = [];
+    var fallback = [];
     if (type === "raster") {
       style.push({
         id : id,
@@ -569,6 +570,7 @@ class LayerSwitcher extends EventTarget {
       });
     } else if (type === "vector") {
       style = this.layers[id].style; // url !
+      fallback = this.layers[id].fallbackStyle; // url !;
     } else {
       // ex. geojson
       this.layers[id].error = true;
@@ -588,11 +590,10 @@ class LayerSwitcher extends EventTarget {
       });
     } else {
       // Vecteur
-      promise = fetch(style)
-        .then((response) => {
-          return response.json();
-        })
-        .then((data) => {
+      var fetchStyle = async (style, fallback) => {
+        try {
+          const response = await fetch(style);
+          const data = await response.json();
           // INFO
           // on ajoute les sources !
           // les sources des couches tuiles vectorielles ne sont pas pré chargées
@@ -602,32 +603,33 @@ class LayerSwitcher extends EventTarget {
             if (Object.hasOwnProperty.call(data.sources, key)) {
               const source = data.sources[key];
               // on ne peut pas ajouter la même source !
-              if (! this.map.getStyle().sources[key]) {
+              if (!this.map.getStyle().sources[key]) {
                 this.map.addSource(key, source);
               }
             }
           }
-          return data;
-        })
-        .then((data) => {
+          const data_1 = data;
           // les sprites et les glyphs sont uniques sinon exceptions !
           // mais, normalement, on ajoute que des couches IGN, on mutualise sur ces informations.
           // FIXME comment gerer les exceptions ?
-          if (!data.sprite.startsWith("http")) {
-            data.sprite = document.URL + data.sprite;
+          if (!data_1.sprite.startsWith("http")) {
+            data_1.sprite = document.URL + data_1.sprite;
           }
-          this.map.setSprite(data.sprite);
-          this.map.setGlyphs(data.glyphs);
-          return data;
-        })
-        .then((data) => {
-          LayersGroup.addGroup(id, data.layers, layerIdBefore);
-          this.layers[id].style = data.layers; // sauvegarde !
-        })
-        .catch((e) => {
-          this.layers[id].error = true;
-          throw new Error(e);
-        });
+          this.map.setSprite(data_1.sprite);
+          this.map.setGlyphs(data_1.glyphs);
+          const data_2 = data_1;
+          LayersGroup.addGroup(id, data_2.layers, layerIdBefore);
+          this.layers[id].style = data_2.layers; // sauvegarde !
+        } catch (e) {
+          if (fallback) {
+            fetchStyle(fallback, null);
+          } else {
+            this.layers[id].error = true;
+            throw new Error(e);
+          }
+        }
+      };
+      promise = fetchStyle(style, fallback);
     }
 
     return promise;
@@ -655,6 +657,7 @@ class LayerSwitcher extends EventTarget {
       title: props.title,
       quickLookUrl: LayersAdditional.getQuickLookUrl(id.split("$")[0]),
       style: props.style,
+      fallbackStyle: props.fallbackStyle,
       type: props.type,
       base: props.base,
       opacity: layerOptions.opacity,

diff --git a/src/js/map-interactivity/gfi-rules.js b/src/js/map-interactivity/gfi-rules.js
@@ -5,6 +5,13 @@
  */
 
 import InseeCommWiki from "../data-layer/com_wiki.json";
+let inseeCommWiki;
+try {
+  const resp = await fetch("https://ignf.github.io/cartes-ign-app/com_wiki.json");
+  inseeCommWiki = await resp.json();
+} catch (e) {
+  inseeCommWiki = InseeCommWiki;
+}
 
 const gfiRules = {
   "TRANSPORTS.DRONES.RESTRICTIONS$GEOPORTAIL:OGC:WMTS": {
@@ -290,7 +297,7 @@ const gfiRules = {
                 if (!featureProperties["insee_com"]) {
                   return "";
                 }
-                featureProperties[match[1]] = InseeCommWiki[featureProperties["insee_com"]];
+                featureProperties[match[1]] = inseeCommWiki[featureProperties["insee_com"]];
                 if (!featureProperties[match[1]]) {
                   return "";
                 }