Skip to content

Commit 138afd0

Browse files
azarzazarz
committed
feat(layers): add tags to new layers and specific tags.
1 parent 947b40a commit 138afd0

17 files changed

Lines changed: 239 additions & 32 deletions

‎.github/workflows/static.yml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ jobs:
3737
cp config/gfi-rules.json public/gfi-rules.json
3838
cp config/layer-popups.json public/layer-popups.json
3939
cp config/isochrone-layers.json public/isochrone-layers.json
40+
cp config/layer-tags.json public/layer-tags.json
4041
cp www/data/mixte.json public/mixte.json
4142
cp www/data/plan-ign-interactif-style.json public/plan-ign-interactif-style.json
4243
cp www/data/poi-osm-style.json public/poi-osm-style.json

‎config/base-layer-config-new.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
{
22
"base-layers": [
33
"PLAN.IGN.INTERACTIF$TMS",
4-
"ORTHOIMAGERY.ORTHOPHOTOS$WMTS",
54
"PLANIGN.LIDAR.SURSOL.2$TMS",
5+
"ORTHOIMAGERY.ORTHOPHOTOS$WMTS",
66
"PLAN.IGN.MIXTE$TMS",
77
"GEOGRAPHICALGRIDSYSTEMS.MAPS$WMTS",
88
"GEOGRAPHICALGRIDSYSTEMS.MAPS.SCAN25TOUR$WMTS"

‎config/layer-tags.json‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"season_tag": {
3+
"layers": ["DATATOURISME.FMA$TMS", "HIKING.GEOTREK$TMS", "ITINERAIRES-RANDO-TMS$TMS", "IGNF_SITES-UNESCO$WMS", "POI.MONUMENTS_BDD_WLD_WM$WMS", "POI.MUSEUM$WMS"],
4+
"name": "Pack été",
5+
"textColor": "#3F4A55",
6+
"tagColor": "#FFF200",
7+
"tagIcon": "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzUwNzFfMTI3ODMpIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik04LjY2NjY5IDEzLjMzMzNWMTUuMzMzM0g3LjMzMzM1VjEzLjMzMzNIOC42NjY2OVpNMTIuMjQyNyAxMS4zTDEzLjY1NjcgMTIuNzE0TDEyLjcxNCAxMy42NTY2TDExLjMgMTIuMjQyNkwxMi4yNDI3IDExLjNaTTMuNzU3MzUgMTEuM0w0LjcwMDAyIDEyLjI0MjZMMy4yODYwMiAxMy42NTY2TDIuMzQzMzUgMTIuNzE0TDMuNzU3MzUgMTEuM1pNOC4wMDAwMiAzLjk5OTk2QzEwLjIwOTIgMy45OTk5NiAxMiA1Ljc5MDgyIDEyIDcuOTk5OTZDMTIgMTAuMjA5MSAxMC4yMDkyIDEyIDguMDAwMDIgMTJDNS43OTA4OCAxMiA0LjAwMDAyIDEwLjIwOTEgNC4wMDAwMiA3Ljk5OTk2QzQuMDAwMDIgNS43OTA4MiA1Ljc5MDg4IDMuOTk5OTYgOC4wMDAwMiAzLjk5OTk2Wk04LjAwMDAyIDUuMzMzMjlDNi41MjcyNiA1LjMzMzI5IDUuMzMzMzUgNi41MjcyIDUuMzMzMzUgNy45OTk5NkM1LjMzMzM1IDkuNDcyNzIgNi41MjcyNiAxMC42NjY2IDguMDAwMDIgMTAuNjY2NkM5LjQ3Mjc4IDEwLjY2NjYgMTAuNjY2NyA5LjQ3MjcyIDEwLjY2NjcgNy45OTk5NkMxMC42NjY3IDYuNTI3MiA5LjQ3Mjc4IDUuMzMzMjkgOC4wMDAwMiA1LjMzMzI5Wk0xNS4zMzM0IDcuMzMzMjlWOC42NjY2M0gxMy4zMzM0VjcuMzMzMjlIMTUuMzMzNFpNMi42NjY2OSA3LjMzMzI5VjguNjY2NjNIMC42NjY2ODdWNy4zMzMyOUgyLjY2NjY5Wk0zLjI4NjAyIDIuMzQzMjlMNC43MDAwMiAzLjc1NzI5TDMuNzU3MzUgNC42OTk5NkwyLjM0MzM1IDMuMjg2NjNWMy4yODU5NkwzLjI4NjAyIDIuMzQzMjlaTTEyLjcxNCAyLjM0MjYzTDEzLjY1NjcgMy4yODU5NkwxMi4yNDI3IDQuNjk5OTZMMTEuMyAzLjc1NzI5TDEyLjcxNCAyLjM0MzI5VjIuMzQyNjNaTTguNjY2NjkgMC42NjY2MjZWMi42NjY2M0g3LjMzMzM1VjAuNjY2NjI2SDguNjY2NjlaIiBmaWxsPSIjMDkxNjI1Ii8+CjwvZz4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcDBfNTA3MV8xMjc4MyI+CjxyZWN0IHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0id2hpdGUiLz4KPC9jbGlwUGF0aD4KPC9kZWZzPgo8L3N2Zz4K"
8+
}
9+
}

‎config/layers-config.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -271,6 +271,7 @@
271271
"format": "image/png"
272272
},
273273
"DATATOURISME.FMA$TMS": {
274+
"new": true,
274275
"interactive": true,
275276
"serverUrl": "pmtiles://https://data.geopf.fr/chunk/telechargement/download/DATATOURISME.FMA/archive/data.pmtiles",
276277
"title": "Animations locales",
@@ -280,6 +281,7 @@
280281
"styles": ["https://ignf.github.io/cartes-ign-app/datatourisme.json", "data/datatourisme.json"]
281282
},
282283
"ITINERAIRES-RANDO-TMS$TMS": {
284+
"new": true,
283285
"serverUrl": "https://data.geopf.fr/private/tms/1.0.0/",
284286
"interactive": true,
285287
"title": "Sentiers balisés",
@@ -289,6 +291,7 @@
289291
"styles": ["https://ignf.github.io/cartes-ign-app/sentiers-balises.json", "data/sentiers-balises.json"]
290292
},
291293
"HIKING.GEOTREK$TMS": {
294+
"new": true,
292295
"title": "Idées rando",
293296
"interactive": true,
294297
"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 @@
352355
"styles": [ "https://ignf.github.io/cartes-ign-app/mixte.json", "data/mixte.json"]
353356
},
354357
"PLANIGN.LIDAR.SURSOL.2$TMS": {
358+
"new": true,
355359
"interactive": false,
356360
"serverUrl": "https://data.geopf.fr/private/wmts",
357361
"title": "Plan IGN HD",

‎src/css/index.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -162,6 +162,14 @@ input[type="submit"].disabled {
162162
font-size: 14px;
163163
}
164164

165+
#onboardingDiv > .form-submit.form-submit-secondary {
166+
margin-top: 16px;
167+
padding-top: 0;
168+
background-color: unset;
169+
color: var(--darker-green);
170+
171+
}
172+
165173
#onboardingDiv > .form-submit.event {
166174
background-color: var(--event-main);
167175
}

‎src/css/layer-catalogue.css‎

Lines changed: 88 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,6 @@
4848
height: 92px;
4949
}
5050

51-
.layer-title-thematic,
5251
.layer-title {
5352
font-family: "Open Sans Semibold";
5453
font-size: 12px;
@@ -58,8 +57,45 @@
5857
text-align: left
5958
}
6059

60+
.layer-tags {
61+
display: flex;
62+
max-width: 100%;
63+
gap: 4px;
64+
}
65+
66+
.tagSmall {
67+
height: 15px;
68+
width: 15px;
69+
flex-shrink: 0;
70+
border-radius: 100%;
71+
background-size: 11px;
72+
background-repeat: no-repeat;
73+
background-position: center;
74+
}
75+
76+
.baseLayer .layer-tags {
77+
display: none;
78+
}
79+
6180
.layer-title-thematic {
6281
color: var(--dark-green);
82+
font-family: "Open Sans Bold";
83+
font-size: 9px;
84+
text-transform: uppercase;
85+
line-height: 11px;
86+
color: var(--mid-grey);
87+
text-overflow: ellipsis;
88+
background-color: var(--light-grey);
89+
padding: 4px 6px;
90+
border-radius: 100px;
91+
width: fit-content;
92+
max-width: calc(100% - 12px);
93+
flex-shrink: 1;
94+
max-height: 10px;
95+
text-align: left;
96+
white-space: nowrap;
97+
overflow: clip;
98+
min-width: 0;
6399
}
64100

65101
#layerManagerWindow #thematicLayers {
@@ -84,22 +120,27 @@
84120

85121
.selectedLayer .layer-badge {
86122
position: absolute;
87-
width: 18px;
88-
height: 18px;
89-
bottom: 14px;
90-
right: 10px;
123+
width: 16px;
124+
height: 16px;
125+
bottom: 6px;
126+
right: 6px;
91127
background-repeat: no-repeat;
92128
background-image: url("assets/selected-layer.svg");
93-
border: 2px solid white;
129+
background-size: 16px;
130+
border: 1px solid white;
94131
border-radius: 50%;
95132
}
96133

134+
.layer-interactive-badge-false {
135+
display: none;
136+
}
137+
97138
.layer-interactive-badge-true {
98139
position: absolute;
99140
width: 15px;
100141
height: 15px;
101142
top: 8px;
102-
left: 8px;
143+
left: 6px;
103144
background-repeat: no-repeat;
104145
background-image: url("assets/map-buttons/interactivity.svg");
105146
background-color: white;
@@ -109,6 +150,23 @@
109150
border-radius: 50%;
110151
}
111152

153+
.layer-new-badge-false {
154+
display: none;
155+
}
156+
157+
.layer-new-badge-true {
158+
position: absolute;
159+
top: 8px;
160+
right: 6px;
161+
color: white;
162+
background-color: #6B7FFF;
163+
font-family: 'Open Sans Bold';
164+
font-size: 8px;
165+
width: fit-content;
166+
padding: 6px;
167+
border-radius: 100px;
168+
}
169+
112170
.selectedLayer .layerImg {
113171
border: solid 2px var(--dark-green);
114172
}
@@ -206,23 +264,31 @@
206264
}
207265

208266
.thematicButton {
209-
display: block;
210-
border: 1px solid var(--dark-grey);
267+
display: flex;
268+
border: 1px solid var(--grey-2);
211269
color: var(--dark-grey);
212-
background-color: #fff0;
213270
border-radius: 50px;
214-
padding: 10px;
271+
padding: 12px 14px;
215272
cursor: pointer;
216273
text-align: center;
217274
white-space: nowrap;
218-
margin-right: 10px;
219-
font-family: "Open Sans Bold";
220-
font-size: 11px;
275+
margin-right: 6px;
276+
font-family: "Open Sans Semibold";
277+
font-size: 12px;
278+
height: 33px;
279+
align-items: center;
280+
background-color: var(--light-grey);
281+
}
282+
283+
.thematicButton.seasonalTag {
284+
padding-left: 30px;
285+
background-repeat: no-repeat;
286+
background-position: 9px center;
221287
}
222288

223289
.thematic-button-active {
224-
color: var(--dark-green);
225-
border-color: var(--dark-green);
290+
color: var(--darker-green);
291+
border: 2px solid var(--darker-green);
226292
}
227293

228294
.small-layers {
@@ -236,11 +302,14 @@
236302
display: flex;
237303
align-items: center;
238304
gap: 10px;
305+
background-color: var(--light-grey);
306+
padding: 10px 16px 10px 12px;
307+
border-radius: 8px;
239308
}
240309

241310
.smallLayer .layerImg {
242-
width: 40px;
243-
height: 40px;
311+
width: 32px;
312+
height: 32px;
244313
flex-shrink: 0;
245314
border-radius: 8px;
246315
}
@@ -250,6 +319,7 @@
250319
width: 36px;
251320
border-radius: 8px;
252321
object-fit: cover;
322+
border: unset;
253323
}
254324

255325
.smallLayer .layer-title {

‎src/css/map-buttons.css‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,10 +38,12 @@
3838
}
3939

4040
#layerManagerBtn {
41+
--backgroundColor: white;
4142
background-image: url("assets/map-buttons/layers.svg");
4243
position: fixed;
4344
top: calc(146px + var(--safe-area-inset-top));
4445
transition: top 0.3s, opacity 0.5s;
46+
background-color: var(--backgroundColor);
4547
}
4648

4749
#eventMapBtn {
@@ -250,7 +252,6 @@
250252
display: flex;
251253
align-items: center;
252254
justify-content: center;
253-
background-position: 13px center;
254255
transition: top 0.3s, opacity 0.5s;
255256
font-size: 14px;
256257
}

‎src/js/event-listeners.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -201,6 +201,11 @@ function addListeners() {
201201
const reloadSource = (sourceId) => {
202202
const map = Globals.map;
203203
const sourceDef = map.getStyle().sources[sourceId];
204+
sourceDef.url = sourceDef.url.replace(
205+
/nocachetoken=\d+/,
206+
`nocachetoken=${Date.now()}`
207+
);
208+
204209
const layer = map.getStyle().layers.filter(
205210
l => l.source === sourceId
206211
)[0];

‎src/js/index.js‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -163,9 +163,11 @@ function app() {
163163
for (let i = 0; i < layers.length; i++) {
164164
const layer = layers[i];
165165
if (layer.onBoardingCfg) {
166-
StatusPopups.getOnboardingModal(layer.id, layer.onBoardingCfg.html);
167-
tempOnboarding = true;
168-
break;
166+
const result = StatusPopups.getOnboardingModal(layer.id, layer.onBoardingCfg.html);
167+
if (result === 1) {
168+
tempOnboarding = true;
169+
break;
170+
}
169171
}
170172
}
171173
if (!tempOnboarding) {

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

Lines changed: 28 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,14 @@ class LayerCatalogue extends EventTarget {
7676
return;
7777
}
7878

79+
const tplTags = (tagsConfig) => {
80+
let result = "";
81+
tagsConfig.forEach((tag) => {
82+
result += `<div class="tagSmall" style="background-color:${tag.tagColor};background-image:url(${tag.tagIcon});"></div>`;
83+
});
84+
return result;
85+
};
86+
7987
const tplLayer = (opts) => {
8088
const defaultOpacity = opts.defaultOpacity || 100;
8189
return `
@@ -84,8 +92,9 @@ class LayerCatalogue extends EventTarget {
8492
<img src="${opts.layerQuickLook}" alt="${opts.layerTitle}" onerror="this.onerror=null;this.src='${ImageNotFound}'" />
8593
<div class="layer-badge"></div>
8694
<div class="layer-interactive-badge-${opts.interactive}" ></div>
95+
<div class="layer-new-badge-${opts.isNew}" >NOUVEAU</div>
8796
</div>
88-
<div class="layer-title-thematic">${opts.layerThematic}</div>
97+
<div class="layer-tags">${tplTags(opts.tagsConfig)}<div class="layer-title-thematic">${opts.layerThematic}</div></div>
8998
<div id="${opts.layerName}" class="layer-title">${opts.layerTitle}</div>
9099
</div>
91100
`;
@@ -105,12 +114,16 @@ class LayerCatalogue extends EventTarget {
105114
layerThematic : "",
106115
interactive: props.interactive,
107116
defaultOpacity: props.defaultOpacity || 100,
117+
isNew: props.isNew,
118+
tagsConfig: props.tagConfigs,
108119
});
109120
}
110121

111122
var strThematicButtons = "";
112123
var strThematicLayers = "";
113124
var thematicButtons = LayersConfig.getThematics();
125+
thematicButtons = thematicButtons.filter(item => item !== "Tous");
126+
thematicButtons.unshift("Tous");
114127
var tempLayers = LayersConfig.getTempLayers();
115128
if (tempLayers.length > 0) {
116129
for(let k = 0; k < tempLayers.length; k++) {
@@ -124,14 +137,25 @@ class LayerCatalogue extends EventTarget {
124137
layerThematic : "Évènements",
125138
interactive: true,
126139
defaultOpacity: tempLayer.defaultOpacity || 100,
140+
isNew: props.isNew,
141+
tagsConfig: props.tagConfigs,
127142
});
128143
}
129144
}
130145

131146
for (let l = 0; l < thematicButtons.length; l++) {
132147
const name = thematicButtons[l];
148+
let additionalStyle = "";
149+
let additionalClass = "";
150+
for (const tag in config.layerTags) {
151+
if (config.layerTags[tag].name === name) {
152+
additionalStyle = `style="color=${config.layerTags[tag].textColor};background-color:${config.layerTags[tag].tagColor};background-image:url(${config.layerTags[tag].tagIcon});"`;
153+
additionalClass = "seasonalTag";
154+
break;
155+
}
156+
}
133157
strThematicButtons += `
134-
<button class="thematicButton" data-name="${name}">
158+
<button class="thematicButton ${additionalClass}" ${additionalStyle} data-name="${name}">
135159
${name}
136160
</button>
137161
`;
@@ -150,6 +174,8 @@ class LayerCatalogue extends EventTarget {
150174
layerThematic : thematic,
151175
interactive: props.interactive,
152176
defaultOpacity: props.defaultOpacity || 100,
177+
isNew: props.isNew,
178+
tagsConfig: props.tagConfigs,
153179
});
154180
}
155181

0 commit comments

Comments
 (0)