@geotrekce/geotrek-rando-widget 0.3.4 → 0.3.6

package/dist/collection/components/grw-map/grw-map.css

@@ -1221,8 +1221,14 @@ svg.leaflet-image-layer.leaflet-interactive path {
   font-size: 16px;
 }
 
-.trek-marker div,
-.selected-trek-marker div {
+.trek-marker .trek-marker-container,
+.trek-marker .step-marker-container,
+.step-marker .trek-marker-container,
+.step-marker .step-marker-container,
+.selected-trek-marker .trek-marker-container,
+.selected-trek-marker .step-marker-container,
+.selected-step-marker .trek-marker-container,
+.selected-step-marker .step-marker-container {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -1231,24 +1237,67 @@ svg.leaflet-image-layer.leaflet-interactive path {
   width: 32px;
   height: 32px;
   transform: rotate(-45deg);
-  background-color: var(--color-surface);
 }
-.trek-marker div img,
-.selected-trek-marker div img {
+.trek-marker .trek-marker-container img,
+.trek-marker .trek-marker-container .step-number,
+.trek-marker .step-marker-container img,
+.trek-marker .step-marker-container .step-number,
+.step-marker .trek-marker-container img,
+.step-marker .trek-marker-container .step-number,
+.step-marker .step-marker-container img,
+.step-marker .step-marker-container .step-number,
+.selected-trek-marker .trek-marker-container img,
+.selected-trek-marker .trek-marker-container .step-number,
+.selected-trek-marker .step-marker-container img,
+.selected-trek-marker .step-marker-container .step-number,
+.selected-step-marker .trek-marker-container img,
+.selected-step-marker .trek-marker-container .step-number,
+.selected-step-marker .step-marker-container img,
+.selected-step-marker .step-marker-container .step-number {
+  display: flex;
+  justify-content: center;
+  align-items: center;
   transform: rotate(45deg);
   position: absolute;
   z-index: 20;
   width: 24px !important;
 }
+.trek-marker .trek-marker-container,
+.step-marker .trek-marker-container,
+.selected-trek-marker .trek-marker-container,
+.selected-step-marker .trek-marker-container {
+  background-color: var(--color-surface);
+}
+.trek-marker .step-marker-container,
+.step-marker .step-marker-container,
+.selected-trek-marker .step-marker-container,
+.selected-step-marker .step-marker-container {
+  background-color: var(--color-surface-variant);
+}
 
-.selected-trek-marker div {
+.selected-trek-marker .trek-marker-container,
+.selected-trek-marker .step-marker-container,
+.selected-step-marker .trek-marker-container,
+.selected-step-marker .step-marker-container {
   width: 64px;
   height: 64px;
 }
-.selected-trek-marker div img {
+.selected-trek-marker .trek-marker-container img,
+.selected-trek-marker .trek-marker-container .step-number,
+.selected-trek-marker .step-marker-container img,
+.selected-trek-marker .step-marker-container .step-number,
+.selected-step-marker .trek-marker-container img,
+.selected-step-marker .trek-marker-container .step-number,
+.selected-step-marker .step-marker-container img,
+.selected-step-marker .step-marker-container .step-number {
   width: 48px !important;
 }
 
+.step-marker,
+.selected-step-marker {
+  color: var(--color-on-surface-variant);
+}
+
 .map-loader-container {
   position: absolute;
   z-index: 500;
@@ -1327,12 +1376,15 @@ svg.leaflet-image-layer.leaflet-interactive path {
 .poi-tooltip .poi-name,
 .poi-tooltip .information-desks-name,
 .poi-tooltip .sensitive-area-name,
+.poi-tooltip .touristic-content-name,
 .information-desks-tooltip .poi-name,
 .information-desks-tooltip .information-desks-name,
 .information-desks-tooltip .sensitive-area-name,
+.information-desks-tooltip .touristic-content-name,
 .sensitive-area-tooltip .poi-name,
 .sensitive-area-tooltip .information-desks-name,
-.sensitive-area-tooltip .sensitive-area-name {
+.sensitive-area-tooltip .sensitive-area-name,
+.sensitive-area-tooltip .touristic-content-name {
   color: var(--color-primary-app);
   font-weight: 400;
   font-size: 16px;
@@ -1360,7 +1412,8 @@ svg.leaflet-image-layer.leaflet-interactive path {
 }
 
 .poi-icon,
-.information-desks-icon {
+.information-desks-icon,
+.touristic-content-icon {
   background-color: var(--color-poi-icon);
   border-radius: 50%;
   display: flex;
@@ -1368,7 +1421,8 @@ svg.leaflet-image-layer.leaflet-interactive path {
   align-items: center;
 }
 .poi-icon img,
-.information-desks-icon img {
+.information-desks-icon img,
+.touristic-content-icon img {
   width: 36px !important;
 }
 

package/dist/collection/components/grw-map/grw-map.js

@@ -33,7 +33,12 @@ export class GrwMap {
   onCenterOnMap(event) {
     this.map.setView(new L.LatLng(event.detail.latitude, event.detail.longitude), 17, { animate: false });
   }
-  descriptionReferenceIsInViewport(event) {
+  stepsIsInViewport(event) {
+    if (this.currentStepsLayer) {
+      this.handleLayerVisibility(event.detail, this.currentStepsLayer);
+    }
+  }
+  descriptionIsInViewport(event) {
     if (this.currentPointsReferenceLayer) {
       this.handleLayerVisibility(event.detail, this.currentPointsReferenceLayer);
     }
@@ -58,21 +63,35 @@ export class GrwMap {
       this.handleLayerVisibility(event.detail, this.currentPoisLayer);
     }
   }
+  touristicContentsIsInViewport(event) {
+    if (this.currentToutisticContentsLayer) {
+      this.handleLayerVisibility(event.detail, this.currentToutisticContentsLayer);
+    }
+  }
   onCardTrekMouseOver(event) {
-    if (!state.selectedTrekId || state.selectedTrekId !== event.detail) {
+    if (!state.parentTrek && (!state.selectedTrekId || state.selectedTrekId !== event.detail)) {
       state.selectedTrekId = event.detail;
       this.hideTrekLine();
       this.showTrekLine(event.detail);
       this.addSelectedCurrentTrek(event.detail);
     }
+    else if (state.parentTrek) {
+      this.stepPopupIsOpen = false;
+      state.selectedStepId = null;
+      this.addSelectedCurrentStep(event.detail);
+    }
   }
   oncardTrekMouseLeave() {
-    if (!this.trekPopupIsOpen) {
+    if (!this.trekPopupIsOpen && state.selectedTrekId) {
       this.trekPopupIsOpen = false;
       state.selectedTrekId = null;
       this.hideTrekLine();
       this.removeSelectedCurrentTrek();
     }
+    else if (this.currentStepsLayer) {
+      state.selectedStepId = null;
+      this.removeSelectedCurrentStep();
+    }
   }
   componentDidLoad() {
     this.map = L.map(this.mapRef, {
@@ -187,7 +206,9 @@ export class GrwMap {
       this.treksLayer = L.geoJSON(treksFeatureCollection, {
         pointToLayer: (geoJsonPoint, latlng) => L.marker(latlng, {
           icon: L.divIcon({
-            html: geoJsonPoint.properties.practice ? `<div><img src=${geoJsonPoint.properties.practice} /><img/></div>` : `<div/></div>`,
+            html: geoJsonPoint.properties.practice
+              ? `<div class="trek-marker-container"><img src=${geoJsonPoint.properties.practice} /></div>`
+              : `<div class="trek-marker-container"></div>`,
             className: 'trek-marker',
             iconSize: 32,
             iconAnchor: [18, 0],
@@ -263,7 +284,7 @@ export class GrwMap {
     }
   }
   addTrek() {
-    var _a;
+    var _a, _b, _c;
     this.trekPopupIsOpen = false;
     state.selectedTrekId = null;
     this.hideTrekLine();
@@ -359,6 +380,43 @@ export class GrwMap {
         },
       });
     }
+    if (state.touristicContents && state.touristicContents.length > 0) {
+      const currentTouristicContentsFeatureCollection = {
+        type: 'FeatureCollection',
+        features: [],
+      };
+      for (const touristicContent of state.touristicContents) {
+        currentTouristicContentsFeatureCollection.features.push({
+          type: 'Feature',
+          properties: {
+            name: touristicContent.name,
+            category_pictogram: (_b = state.touristicContentCategories.find(touristicContentCategory => touristicContentCategory.id === touristicContent.category)) === null || _b === void 0 ? void 0 : _b.pictogram,
+          },
+          geometry: touristicContent.geometry,
+        });
+      }
+      this.currentToutisticContentsLayer = L.geoJSON(currentTouristicContentsFeatureCollection, {
+        pointToLayer: (geoJsonPoint, latlng) => L.marker(latlng, {
+          icon: L.divIcon({
+            html: geoJsonPoint.properties.category_pictogram ? `<img src=${geoJsonPoint.properties.category_pictogram} />` : `<img />`,
+            className: 'touristic-content-icon',
+            iconSize: 48,
+          }),
+          autoPanOnFocus: false,
+        }),
+        onEachFeature: (geoJsonPoint, layer) => {
+          layer.once('mouseover', () => {
+            const touristicContentTooltip = L.DomUtil.create('div');
+            touristicContentTooltip.className = 'poi-tooltip';
+            const touristicContentName = L.DomUtil.create('div');
+            touristicContentName.innerHTML = geoJsonPoint.properties.name;
+            touristicContentName.className = 'touristic-content-name';
+            touristicContentTooltip.appendChild(touristicContentName);
+            layer.bindTooltip(touristicContentTooltip).openTooltip();
+          });
+        },
+      });
+    }
     if (state.currentInformationDesks && state.currentInformationDesks.length > 0) {
       const currentInformationDesksFeatureCollection = {
         type: 'FeatureCollection',
@@ -421,6 +479,66 @@ export class GrwMap {
         },
       });
     }
+    if (!this.currentStepsLayer && state.parentTrekId && state.parentTrek && state.currentTrek.id === state.parentTrekId) {
+      const stepsFeatureCollection = {
+        type: 'FeatureCollection',
+        features: [],
+      };
+      if (state.currentTrekSteps) {
+        for (const trek of state.currentTrekSteps) {
+          stepsFeatureCollection.features.push({
+            type: 'Feature',
+            geometry: { type: 'Point', coordinates: trek.departure_geom },
+            properties: {
+              id: trek.id,
+              name: trek.name,
+              practice: (_c = state.practices.find(practice => practice.id === trek.practice)) === null || _c === void 0 ? void 0 : _c.pictogram,
+              imgSrc: trek.attachments && trek.attachments.length > 0 && trek.attachments[0].thumbnail,
+            },
+          });
+        }
+      }
+      let stepIndex = 0;
+      this.currentStepsLayer = L.geoJSON(stepsFeatureCollection, {
+        pointToLayer: (_geoJsonPoint, latlng) => {
+          stepIndex += 1;
+          return L.marker(latlng, {
+            zIndexOffset: 4000000,
+            icon: L.divIcon({
+              html: `<div class="step-marker-container"><div class="step-number">${stepIndex}</div></div>`,
+              className: 'step-marker',
+              iconSize: 32,
+              iconAnchor: [18, 0],
+            }),
+            autoPanOnFocus: false,
+          });
+        },
+        onEachFeature: (geoJsonPoint, layer) => {
+          layer.once('click', () => {
+            const trekDeparturePopup = L.DomUtil.create('div');
+            trekDeparturePopup.className = 'trek-departure-popup';
+            if (geoJsonPoint.properties.imgSrc) {
+              const trekImg = L.DomUtil.create('img');
+              trekImg.src = geoJsonPoint.properties.imgSrc;
+              trekDeparturePopup.appendChild(trekImg);
+            }
+            const trekName = L.DomUtil.create('div');
+            trekName.innerHTML = geoJsonPoint.properties.name;
+            trekName.className = 'trek-name';
+            trekDeparturePopup.appendChild(trekName);
+            const trekButton = L.DomUtil.create('button');
+            trekButton.innerHTML = 'Afficher le détail';
+            trekButton.className = 'trek-button';
+            trekButton.onclick = () => this.trekCardPress.emit(geoJsonPoint.properties.id);
+            trekDeparturePopup.appendChild(trekButton);
+            layer.bindPopup(trekDeparturePopup, { interactive: true, autoPan: false, closeButton: false }).openPopup();
+          });
+          layer.on('mouseover', e => {
+            this.addSelectedCurrentStep(geoJsonPoint.properties.id, e.latlng);
+          });
+        },
+      });
+    }
     const elevationOptions = {
       srcFolder: 'https://unpkg.com/@raruto/leaflet-elevation/src/',
       elevationDiv: `#elevation`,
@@ -468,6 +586,9 @@ export class GrwMap {
     });
     this.elevationControl.load(elevation);
     const overlays = {};
+    if (this.currentStepsLayer) {
+      overlays[translate[state.language].layers.steps] = this.currentStepsLayer;
+    }
     if (this.currentPointsReferenceLayer) {
       overlays[translate[state.language].layers.pointsReference] = this.currentPointsReferenceLayer;
     }
@@ -483,6 +604,9 @@ export class GrwMap {
     if (this.currentPoisLayer) {
       overlays[translate[state.language].layers.pois] = this.currentPoisLayer;
     }
+    if (this.currentToutisticContentsLayer) {
+      overlays[translate[state.language].layers.touristicContents] = this.currentToutisticContentsLayer;
+    }
     if (this.layersControl) {
       Object.keys(overlays).forEach(key => {
         this.layersControl.addOverlay(overlays[key], key);
@@ -521,7 +645,9 @@ export class GrwMap {
       pointToLayer: (geoJsonPoint, latlng) => L.marker(latlng, {
         zIndexOffset: 4000000,
         icon: L.divIcon({
-          html: geoJsonPoint.properties.practice ? `<div><img src=${geoJsonPoint.properties.practice} /><img/></div>` : `<div/></div>`,
+          html: geoJsonPoint.properties.practice
+            ? `<div class="trek-marker-container"><img src=${geoJsonPoint.properties.practice} /></div>`
+            : `<div class="trek-marker-container"></div>`,
           className: 'selected-trek-marker',
           iconSize: 64,
           iconAnchor: [36, 36],
@@ -574,6 +700,83 @@ export class GrwMap {
     this.selectedCurrentTrekLayer && this.map.removeLayer(this.selectedCurrentTrekLayer);
     this.selectedCurrentTrekLayer = null;
   }
+  addSelectedCurrentStep(id, customCoordinates) {
+    var _a;
+    const stepsFeatureCollection = {
+      type: 'FeatureCollection',
+      features: [],
+    };
+    if (state.currentTrekSteps) {
+      const stepIndex = state.currentTrekSteps.findIndex(trek => trek.id === id);
+      stepsFeatureCollection.features.push({
+        type: 'Feature',
+        geometry: { type: 'Point', coordinates: customCoordinates ? [customCoordinates.lng, customCoordinates.lat] : state.currentTrekSteps[stepIndex].departure_geom },
+        properties: {
+          id: state.currentTrekSteps[stepIndex].id,
+          name: state.currentTrekSteps[stepIndex].name,
+          practice: (_a = state.practices.find(practice => practice.id === state.currentTrekSteps[stepIndex].practice)) === null || _a === void 0 ? void 0 : _a.pictogram,
+          imgSrc: state.currentTrekSteps[stepIndex].attachments && state.currentTrekSteps[stepIndex].attachments.length > 0 && state.currentTrekSteps[stepIndex].attachments[0].thumbnail,
+          index: stepIndex + 1,
+        },
+      });
+    }
+    this.removeSelectedCurrentStep();
+    state.selectedStepId = id;
+    this.selectedCurrentStepLayer = L.geoJSON(stepsFeatureCollection, {
+      pointToLayer: (geoJsonPoint, latlng) => L.marker(latlng, {
+        zIndexOffset: 4000000,
+        icon: L.divIcon({
+          html: `<div class="step-marker-container"><div class="step-number">${geoJsonPoint.properties.index}</div></div>`,
+          className: 'selected-step-marker',
+          iconSize: 64,
+          iconAnchor: [36, 36],
+        }),
+        autoPanOnFocus: false,
+      }),
+      onEachFeature: (geoJsonPoint, layer) => {
+        layer.once('click', () => {
+          const trekDeparturePopup = L.DomUtil.create('div');
+          trekDeparturePopup.className = 'trek-departure-popup';
+          if (geoJsonPoint.properties.imgSrc) {
+            const trekImg = L.DomUtil.create('img');
+            trekImg.src = geoJsonPoint.properties.imgSrc;
+            trekDeparturePopup.appendChild(trekImg);
+          }
+          const trekName = L.DomUtil.create('div');
+          trekName.innerHTML = geoJsonPoint.properties.name;
+          trekName.className = 'trek-name';
+          trekDeparturePopup.appendChild(trekName);
+          const trekButton = L.DomUtil.create('button');
+          trekButton.innerHTML = 'Afficher le détail';
+          trekButton.className = 'trek-button';
+          trekButton.onclick = () => this.trekCardPress.emit(geoJsonPoint.properties.id);
+          trekDeparturePopup.appendChild(trekButton);
+          layer.bindPopup(trekDeparturePopup, { interactive: true, autoPan: false, closeButton: false }).openPopup();
+        });
+        layer.on('mouseout', () => {
+          if (!this.stepPopupIsOpen) {
+            state.selectedTrekId = null;
+            this.removeSelectedCurrentStep();
+          }
+        });
+        layer.on('popupopen', () => {
+          this.stepPopupIsOpen = Boolean(state.selectedStepId);
+        });
+        layer.on('popupclose', () => {
+          if (state.selectedStepId) {
+            this.stepPopupIsOpen = false;
+            state.selectedStepId = null;
+            this.removeSelectedCurrentStep();
+          }
+        });
+      },
+    }).addTo(this.map);
+  }
+  removeSelectedCurrentStep() {
+    state.selectedStepId = null;
+    this.selectedCurrentStepLayer && this.map.removeLayer(this.selectedCurrentStepLayer);
+    this.selectedCurrentStepLayer = null;
+  }
   handleLayersControlEvent() {
     const userLayersState = this.layersControl._layerControlInputs;
     userLayersState.forEach((userLayerState) => {
@@ -627,6 +830,14 @@ export class GrwMap {
       this.map.removeLayer(this.currentPointsReferenceLayer);
       this.currentPointsReferenceLayer = null;
     }
+    if (this.currentStepsLayer) {
+      this.map.removeLayer(this.currentStepsLayer);
+      this.currentStepsLayer = null;
+    }
+    if (this.currentToutisticContentsLayer) {
+      this.map.removeLayer(this.currentToutisticContentsLayer);
+      this.currentToutisticContentsLayer = null;
+    }
   }
   disconnectedCallback() {
     if (this.resetStoreOnDisconnected) {
@@ -1002,8 +1213,14 @@ export class GrwMap {
         "capture": false,
         "passive": false
       }, {
-        "name": "descriptionReferenceIsInViewport",
-        "method": "descriptionReferenceIsInViewport",
+        "name": "stepsIsInViewport",
+        "method": "stepsIsInViewport",
+        "target": "window",
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "descriptionIsInViewport",
+        "method": "descriptionIsInViewport",
         "target": "window",
         "capture": false,
         "passive": false
@@ -1031,6 +1248,12 @@ export class GrwMap {
         "target": "window",
         "capture": false,
         "passive": false
+      }, {
+        "name": "touristicContentsIsInViewport",
+        "method": "touristicContentsIsInViewport",
+        "target": "window",
+        "capture": false,
+        "passive": false
       }, {
         "name": "cardTrekMouseOver",
         "method": "onCardTrekMouseOver",