feat(layers): add tags to new layers and specific tags.

Author: azarz

.github/workflows/static.yml

@@ -37,6 +37,7 @@ jobs:
           cp config/gfi-rules.json public/gfi-rules.json
           cp config/layer-popups.json public/layer-popups.json
           cp config/isochrone-layers.json public/isochrone-layers.json
+          cp config/layer-tags.json public/layer-tags.json
           cp www/data/mixte.json public/mixte.json
           cp www/data/plan-ign-interactif-style.json public/plan-ign-interactif-style.json
           cp www/data/poi-osm-style.json public/poi-osm-style.json

config/base-layer-config-new.json

@@ -1,8 +1,8 @@
 {
     "base-layers": [
       "PLAN.IGN.INTERACTIF$TMS",
-      "ORTHOIMAGERY.ORTHOPHOTOS$WMTS",
       "PLANIGN.LIDAR.SURSOL.2$TMS",
+      "ORTHOIMAGERY.ORTHOPHOTOS$WMTS",
       "PLAN.IGN.MIXTE$TMS",
       "GEOGRAPHICALGRIDSYSTEMS.MAPS$WMTS",
       "GEOGRAPHICALGRIDSYSTEMS.MAPS.SCAN25TOUR$WMTS"

config/layer-tags.json

@@ -0,0 +1,9 @@
+{
+  "season_tag": {
+    "layers": ["DATATOURISME.FMA$TMS", "ITINERAIRES-RANDO-TMS$TMS", "HIKING.GEOTREK$TMS", "IGNF_SITES-UNESCO$WMS", "POI.MONUMENTS_BDD_WLD_WM$WMS", "POI.MUSEUM$WMS"],
+    "name": "Pack été",
+    "textColor": "#3F4A55",
+    "tagColor": "#FFF200",
+    "tagIcon": "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzUwNzFfMTI3ODMpIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik04LjY2NjY5IDEzLjMzMzNWMTUuMzMzM0g3LjMzMzM1VjEzLjMzMzNIOC42NjY2OVpNMTIuMjQyNyAxMS4zTDEzLjY1NjcgMTIuNzE0TDEyLjcxNCAxMy42NTY2TDExLjMgMTIuMjQyNkwxMi4yNDI3IDExLjNaTTMuNzU3MzUgMTEuM0w0LjcwMDAyIDEyLjI0MjZMMy4yODYwMiAxMy42NTY2TDIuMzQzMzUgMTIuNzE0TDMuNzU3MzUgMTEuM1pNOC4wMDAwMiAzLjk5OTk2QzEwLjIwOTIgMy45OTk5NiAxMiA1Ljc5MDgyIDEyIDcuOTk5OTZDMTIgMTAuMjA5MSAxMC4yMDkyIDEyIDguMDAwMDIgMTJDNS43OTA4OCAxMiA0LjAwMDAyIDEwLjIwOTEgNC4wMDAwMiA3Ljk5OTk2QzQuMDAwMDIgNS43OTA4MiA1Ljc5MDg4IDMuOTk5OTYgOC4wMDAwMiAzLjk5OTk2Wk04LjAwMDAyIDUuMzMzMjlDNi41MjcyNiA1LjMzMzI5IDUuMzMzMzUgNi41MjcyIDUuMzMzMzUgNy45OTk5NkM1LjMzMzM1IDkuNDcyNzIgNi41MjcyNiAxMC42NjY2IDguMDAwMDIgMTAuNjY2NkM5LjQ3Mjc4IDEwLjY2NjYgMTAuNjY2NyA5LjQ3MjcyIDEwLjY2NjcgNy45OTk5NkMxMC42NjY3IDYuNTI3MiA5LjQ3Mjc4IDUuMzMzMjkgOC4wMDAwMiA1LjMzMzI5Wk0xNS4zMzM0IDcuMzMzMjlWOC42NjY2M0gxMy4zMzM0VjcuMzMzMjlIMTUuMzMzNFpNMi42NjY2OSA3LjMzMzI5VjguNjY2NjNIMC42NjY2ODdWNy4zMzMyOUgyLjY2NjY5Wk0zLjI4NjAyIDIuMzQzMjlMNC43MDAwMiAzLjc1NzI5TDMuNzU3MzUgNC42OTk5NkwyLjM0MzM1IDMuMjg2NjNWMy4yODU5NkwzLjI4NjAyIDIuMzQzMjlaTTEyLjcxNCAyLjM0MjYzTDEzLjY1NjcgMy4yODU5NkwxMi4yNDI3IDQuNjk5OTZMMTEuMyAzLjc1NzI5TDEyLjcxNCAyLjM0MzI5VjIuMzQyNjNaTTguNjY2NjkgMC42NjY2MjZWMi42NjY2M0g3LjMzMzM1VjAuNjY2NjI2SDguNjY2NjlaIiBmaWxsPSIjMDkxNjI1Ii8+CjwvZz4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcDBfNTA3MV8xMjc4MyI+CjxyZWN0IHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0id2hpdGUiLz4KPC9jbGlwUGF0aD4KPC9kZWZzPgo8L3N2Zz4K"
+  }
+}

config/layers-config.json

@@ -271,6 +271,7 @@
       "format": "image/png"
     },
     "DATATOURISME.FMA$TMS": {
+      "new": true,
       "interactive": true,
       "serverUrl": "pmtiles://https://data.geopf.fr/chunk/telechargement/download/DATATOURISME.FMA/archive/data.pmtiles",
       "title": "Animations locales",
@@ -280,15 +281,17 @@
       "styles": ["https://ignf.github.io/cartes-ign-app/datatourisme.json", "data/datatourisme.json"]
     },
     "ITINERAIRES-RANDO-TMS$TMS": {
+      "new": true,
       "serverUrl": "https://data.geopf.fr/private/tms/1.0.0/",
       "interactive": true,
-      "title": "Sentiers balisés",
+      "title": "Sentiers de randonnée balisés",
       "description": "Les sentiers et chemins représentés correspondent à des itinéraires balisés, équipés de repères visuels facilitant l’orientation et garantissant un suivi du parcours en toute sécurité.<br>Ceux levés par l’IGN sont issus d’aménagements locaux effectués dans le cadre d’aménagements inscrits dans des plans locaux ou départementaux de randonnée pédestre.<br>Seuls les itinéraires destinés à la pratique pédestre sont représentés.",
       "source": "FFRandonnée, Club vosgien, IGN et acteurs locaux",
       "format": "application/x-protobuf",
       "styles": ["https://ignf.github.io/cartes-ign-app/sentiers-balises.json", "data/sentiers-balises.json"]
     },
     "HIKING.GEOTREK$TMS": {
+      "new": true,
       "title": "Idées rando",
       "interactive": true,
       "description": "Randonnées proposées par des partenaires de référence (parcs nationaux et régionaux, collectivités territoriales, offices de tourisme, etc.).<br>Sont représentés des itinéraires dédiés aux activités pédestres, cyclistes et équestres.<br>Leur répartition sur le territoire est variable, car elle dépend des partenariats établis avec ces acteurs.",
@@ -352,6 +355,7 @@
       "styles": [ "https://ignf.github.io/cartes-ign-app/mixte.json", "data/mixte.json"]
     },
     "PLANIGN.LIDAR.SURSOL.2$TMS": {
+      "new": true,
       "interactive": false,
       "serverUrl": "https://data.geopf.fr/private/wmts",
       "title": "Plan IGN HD",

src/css/index.css

@@ -162,6 +162,14 @@ input[type="submit"].disabled {
   font-size: 14px;
 }
 
+#onboardingDiv > .form-submit.form-submit-secondary {
+  margin-top: 16px;
+  padding-top: 0;
+  background-color: unset;
+  color: var(--darker-green);
+
+}
+
 #onboardingDiv > .form-submit.event {
   background-color: var(--event-main);
 }

src/css/layer-catalogue.css

@@ -48,7 +48,6 @@
   height: 92px;
 }
 
-.layer-title-thematic,
 .layer-title {
   font-family: "Open Sans Semibold";
   font-size: 12px;
@@ -58,8 +57,45 @@
   text-align: left
 }
 
+.layer-tags {
+  display: flex;
+  max-width: 100%;
+  gap: 4px;
+}
+
+.tagSmall {
+  height: 15px;
+  width: 15px;
+  flex-shrink: 0;
+  border-radius: 100%;
+  background-size: 11px;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+.baseLayer .layer-tags {
+  display: none;
+}
+
 .layer-title-thematic {
   color: var(--dark-green);
+  font-family: "Open Sans Bold";
+  font-size: 9px;
+  text-transform: uppercase;
+  line-height: 11px;
+  color: var(--mid-grey);
+  text-overflow: ellipsis;
+  background-color: var(--light-grey);
+  padding: 4px 6px;
+  border-radius: 100px;
+  width: fit-content;
+  max-width: calc(100% - 12px);
+  flex-shrink: 1;
+  max-height: 10px;
+  text-align: left;
+  white-space: nowrap;
+  overflow: clip;
+  min-width: 0;
 }
 
 #layerManagerWindow #thematicLayers {
@@ -84,22 +120,27 @@
 
 .selectedLayer .layer-badge {
   position: absolute;
-  width: 18px;
-  height: 18px;
-  bottom: 14px;
-  right: 10px;
+  width: 16px;
+  height: 16px;
+  bottom: 6px;
+  right: 6px;
   background-repeat: no-repeat;
   background-image: url("assets/selected-layer.svg");
-  border: 2px solid white;
+  background-size: 16px;
+  border: 1px solid white;
   border-radius: 50%;
 }
 
+.layer-interactive-badge-false {
+  display: none;
+}
+
 .layer-interactive-badge-true {
   position: absolute;
   width: 15px;
   height: 15px;
   top: 8px;
-  left: 8px;
+  left: 6px;
   background-repeat: no-repeat;
   background-image: url("assets/map-buttons/interactivity.svg");
   background-color: white;
@@ -109,6 +150,23 @@
   border-radius: 50%;
 }
 
+.layer-new-badge-false {
+  display: none;
+}
+
+.layer-new-badge-true {
+  position: absolute;
+  top: 8px;
+  right: 6px;
+  color: white;
+  background-color: #6B7FFF;
+  font-family: 'Open Sans Bold';
+  font-size: 8px;
+  width: fit-content;
+  padding: 6px;
+  border-radius: 100px;
+}
+
 .selectedLayer .layerImg {
   border: solid 2px var(--dark-green);
 }
@@ -206,23 +264,31 @@
 }
 
 .thematicButton {
-  display: block;
-  border: 1px solid var(--dark-grey);
+  display: flex;
+  border: 1px solid var(--grey-2);
   color: var(--dark-grey);
-  background-color: #fff0;
   border-radius: 50px;
-  padding: 10px;
+  padding: 12px 14px;
   cursor: pointer;
   text-align: center;
   white-space: nowrap;
-  margin-right: 10px;
-  font-family: "Open Sans Bold";
-  font-size: 11px;
+  margin-right: 6px;
+  font-family: "Open Sans Semibold";
+  font-size: 12px;
+  height: 33px;
+  align-items: center;
+  background-color: var(--light-grey);
+}
+
+.thematicButton.seasonalTag {
+  padding-left: 30px;
+  background-repeat: no-repeat;
+  background-position: 9px center;
 }
 
 .thematic-button-active {
-  color: var(--dark-green);
-  border-color: var(--dark-green);
+  color: var(--darker-green);
+  border: 2px solid var(--darker-green);
 }
 
 .small-layers {
@@ -236,11 +302,14 @@
   display: flex;
   align-items: center;
   gap: 10px;
+  background-color: var(--light-grey);
+  padding: 10px 16px 10px 12px;
+  border-radius: 8px;
 }
 
 .smallLayer .layerImg {
-  width: 40px;
-  height: 40px;
+  width: 32px;
+  height: 32px;
   flex-shrink: 0;
   border-radius: 8px;
 }
@@ -250,6 +319,7 @@
   width: 36px;
   border-radius: 8px;
   object-fit: cover;
+  border: unset;
 }
 
 .smallLayer .layer-title {

src/css/map-buttons.css

@@ -38,10 +38,12 @@
 }
 
 #layerManagerBtn {
+  --backgroundColor: white;
   background-image: url("assets/map-buttons/layers.svg");
   position: fixed;
   top: calc(146px + var(--safe-area-inset-top));
   transition: top 0.3s, opacity 0.5s;
+  background-color: var(--backgroundColor);
 }
 
 #eventMapBtn {
@@ -250,7 +252,6 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background-position: 13px center;
   transition: top 0.3s, opacity 0.5s;
   font-size: 14px;
 }

src/js/event-listeners.js

@@ -201,6 +201,11 @@ function addListeners() {
   const reloadSource = (sourceId) => {
     const map = Globals.map;
     const sourceDef = map.getStyle().sources[sourceId];
+    sourceDef.url = sourceDef.url.replace(
+      /nocachetoken=\d+/,
+      `nocachetoken=${Date.now()}`
+    );
+
     const layer = map.getStyle().layers.filter(
       l => l.source === sourceId
     )[0];

src/js/index.js

@@ -163,9 +163,11 @@ function app() {
       for (let i = 0; i < layers.length; i++) {
         const layer = layers[i];
         if (layer.onBoardingCfg) {
-          StatusPopups.getOnboardingModal(layer.id, layer.onBoardingCfg.html);
-          tempOnboarding = true;
-          break;
+          const result = StatusPopups.getOnboardingModal(layer.id, layer.onBoardingCfg.html);
+          if (result === 1) {
+            tempOnboarding = true;
+            break;
+          }
         }
       }
       if (!tempOnboarding) {

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

@@ -76,6 +76,14 @@ class LayerCatalogue extends EventTarget {
       return;
     }
 
+    const tplTags = (tagsConfig) => {
+      let result = "";
+      tagsConfig.forEach((tag) => {
+        result += `<div class="tagSmall" style="background-color:${tag.tagColor};background-image:url(${tag.tagIcon});"></div>`;
+      });
+      return result;
+    };
+
     const tplLayer = (opts) => {
       const defaultOpacity = opts.defaultOpacity || 100;
       return `
@@ -84,8 +92,9 @@ class LayerCatalogue extends EventTarget {
           <img src="${opts.layerQuickLook}" alt="${opts.layerTitle}" onerror="this.onerror=null;this.src='${ImageNotFound}'" />
           <div class="layer-badge"></div>
           <div class="layer-interactive-badge-${opts.interactive}" ></div>
+          <div class="layer-new-badge-${opts.isNew}" >NOUVEAU</div>
         </div>
-        <div class="layer-title-thematic">${opts.layerThematic}</div>
+        <div class="layer-tags">${tplTags(opts.tagsConfig)}<div class="layer-title-thematic">${opts.layerThematic}</div></div>
         <div id="${opts.layerName}" class="layer-title">${opts.layerTitle}</div>
       </div>
       `;
@@ -105,12 +114,16 @@ class LayerCatalogue extends EventTarget {
         layerThematic : "",
         interactive: props.interactive,
         defaultOpacity: props.defaultOpacity || 100,
+        isNew: props.isNew,
+        tagsConfig: props.tagConfigs,
       });
     }
 
     var strThematicButtons = "";
     var strThematicLayers = "";
     var thematicButtons = LayersConfig.getThematics();
+    thematicButtons = thematicButtons.filter(item => item !== "Tous");
+    thematicButtons.unshift("Tous");
     var tempLayers = LayersConfig.getTempLayers();
     if (tempLayers.length > 0) {
       for(let k = 0; k < tempLayers.length; k++) {
@@ -124,14 +137,25 @@ class LayerCatalogue extends EventTarget {
           layerThematic : "Évènements",
           interactive: true,
           defaultOpacity: tempLayer.defaultOpacity || 100,
+          isNew: props.isNew,
+          tagsConfig: props.tagConfigs,
         });
       }
     }
 
     for (let l = 0; l < thematicButtons.length; l++) {
       const name = thematicButtons[l];
+      let additionalStyle = "";
+      let additionalClass = "";
+      for (const tag in config.layerTags) {
+        if (config.layerTags[tag].name === name) {
+          additionalStyle = `style="color=${config.layerTags[tag].textColor};background-color:${config.layerTags[tag].tagColor};background-image:url(${config.layerTags[tag].tagIcon});"`;
+          additionalClass = "seasonalTag";
+          break;
+        }
+      }
       strThematicButtons += `
-      <button class="thematicButton" data-name="${name}">
+      <button class="thematicButton ${additionalClass}" ${additionalStyle} data-name="${name}">
         ${name}
       </button>
       `;
@@ -150,6 +174,8 @@ class LayerCatalogue extends EventTarget {
         layerThematic : thematic,
         interactive: props.interactive,
         defaultOpacity: props.defaultOpacity || 100,
+        isNew: props.isNew,
+        tagsConfig: props.tagConfigs,
       });
     }