@geotrekce/geotrek-rando-widget 0.0.3 → 0.0.6

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

@@ -4,10 +4,11 @@ import arrowBackImage from '../../assets/arrow-back.svg';
 export class GrwApp {
   constructor() {
     this.showTrek = false;
-    this.showMap = false;
+    this.showTreksMap = false;
+    this.showTrekMap = false;
+    this.showFilters = false;
     this.isLargeView = false;
     this.language = 'fr';
-    this.appName = 'Geotrek Rando Widget';
     this.colorPrimary = '#6b0030';
     this.colorPrimaryShade = '#4a0021';
     this.colorPrimaryTint = '#974c6e';
@@ -16,11 +17,15 @@ export class GrwApp {
     this.colorArrivalIcon = '#85003b';
     this.colorSensitiveArea = '#4974a5';
     this.colorPoiIcon = '#974c6e';
-    this.largeViewSize = 664;
+    this.handlePopStateBind = this.handlePopState.bind(this);
+    this.largeViewSize = 1024;
   }
   onTrekCardPress(event) {
     this.currentTrekId = event.detail;
     this.showTrek = !this.showTrek;
+    const url = new URL(window.location.toString());
+    url.searchParams.set('trek', this.currentTrekId.toString());
+    window.history.pushState({}, '', url);
   }
   onWindowResize() {
     this.handleView();
@@ -30,6 +35,14 @@ export class GrwApp {
   }
   componentDidLoad() {
     this.handleView();
+    window.addEventListener('popstate', this.handlePopStateBind, false);
+    const url = new URL(window.location.toString());
+    const trekParam = url.searchParams.get('trek');
+    if (trekParam) {
+      window.history.replaceState({ isInitialHistoryWithTrek: true }, '', url);
+      this.currentTrekId = Number(trekParam);
+      this.showTrek = !this.showTrek;
+    }
   }
   onTrekDetailsClose() {
     this.currentTrekId = null;
@@ -37,24 +50,75 @@ export class GrwApp {
   }
   handleView() {
     this.isLargeView = this.element.getBoundingClientRect().width >= this.largeViewSize;
-    this.showMap = this.isLargeView;
+    this.showTreksMap = this.isLargeView;
+    this.showTrekMap = this.isLargeView;
+  }
+  handleFilters() {
+    this.showFilters = !this.showFilters;
+  }
+  handleBackButton() {
+    if (window.history.state.isInitialHistoryWithTrek) {
+      this.onTrekDetailsClose();
+      const url = new URL(window.location.toString());
+      url.searchParams.delete('trek');
+      window.history.pushState({}, '', url);
+    }
+    else {
+      window.history.back();
+    }
+  }
+  handlePopState() {
+    const url = new URL(window.location.toString());
+    const trekParam = url.searchParams.get('trek');
+    if (trekParam) {
+      this.currentTrekId = Number(trekParam);
+      this.showTrek = !this.showTrek;
+    }
+    else {
+      this.onTrekDetailsClose();
+    }
+  }
+  handleShowMap() {
+    if (this.currentTrekId) {
+      this.showTrekMap = !this.showTrekMap;
+    }
+    else {
+      this.showTreksMap = !this.showTreksMap;
+    }
+  }
+  disconnectedCallback() {
+    window.removeEventListener('popstate', this.handlePopStateBind);
   }
   render() {
-    return (h(Host, { style: { '--color-primary': this.colorPrimary, '--color-primary-tint': this.colorPrimaryTint } },
+    return (h(Host, { style: { '--color-primary': this.colorPrimary, '--color-primary-tint': this.colorPrimaryTint, '--color-primary-shade': this.colorPrimaryShade } },
       h("grw-treks-provider", { api: this.api, language: this.language, "in-bbox": this.inBbox, cities: this.cities, districts: this.districts, structures: this.structures, themes: this.themes, portals: this.portals, routes: this.routes, practices: this.practices }),
       this.showTrek && this.currentTrekId && h("grw-trek-provider", { api: state.api, language: this.language, "trek-id": this.currentTrekId }),
       h("div", { class: "app-container" },
-        h("div", { class: this.isLargeView ? 'large-view-header-container' : 'header-container' }, this.showTrek ? h("div", { onClick: () => this.onTrekDetailsClose(), class: "arrow-back-icon", innerHTML: arrowBackImage }) : h("div", { class: "title" }, this.appName)),
+        h("div", { class: this.isLargeView ? 'large-view-header-container' : 'header-container' },
+          this.showTrek ? (h("div", { onClick: () => this.handleBackButton(), class: "arrow-back-icon", innerHTML: arrowBackImage })) : (h("div", { onClick: () => this.handleFilters(), class: "handle-filters-button" }, "FILTRER")),
+          !this.showTrek && this.showFilters && (h("div", { class: "options-container" },
+            h("div", { class: "filters-container" },
+              h("div", { class: "current-treks-length" }, `${state.currentTreks.length} résultat${state.currentTreks.length > 1 ? 's' : ''}`),
+              h("div", { onClick: () => this.handleFilters(), class: "close-filters-button" }, "X"),
+              h("div", null,
+                h("grw-filter", { filterName: "Pratique", filterType: "practices", filterNameProperty: "name" })),
+              h("div", { class: "filter-margin-top" },
+                h("grw-filter", { filterName: "Difficult\u00E9", filterType: "difficulties", filterNameProperty: "label" })),
+              h("div", { class: "filter-margin-top" },
+                h("grw-filter", { filterName: "Dur\u00E9e", filterType: "durations", filterNameProperty: "name" }))),
+            h("div", { onClick: () => this.handleFilters(), class: "back-filters-container" }))),
+          h("div", { class: "attribution-container" },
+            h("a", { target: "_blank", href: "https://geotrek.fr" }, "GEOTREK"))),
         h("div", { class: "content-container" },
           h("div", { class: this.isLargeView ? 'large-view-app-treks-list-container' : 'app-treks-list-container', style: { display: this.showTrek ? 'none' : 'flex', position: this.showTrek ? 'absolute' : 'relative' } },
-            h("grw-treks-list", { "color-primary": this.colorPrimary, "color-primary-tint": this.colorPrimaryTint })),
+            h("grw-treks-list", { "is-large-view": this.isLargeView, "color-primary": this.colorPrimary, "color-primary-tint": this.colorPrimaryTint })),
           this.showTrek && !state.currentTrek && (h("div", { class: this.isLargeView ? 'large-view-loader-container' : 'loader-container' },
             h("span", { class: "loader" }))),
           state.currentTrek && (h("div", { class: this.isLargeView ? 'large-view-app-trek-detail-container' : 'app-trek-detail-container' },
             h("grw-trek-detail", { "color-primary": this.colorPrimary, "color-primary-shade": this.colorPrimaryShade, "color-primary-tint": this.colorPrimaryTint }))),
-          h("grw-map", { class: this.isLargeView ? 'large-view-app-map-container' : 'app-map-container', style: { visibility: this.showMap ? 'visible' : 'hidden' }, "url-layer": this.urlLayer, center: this.center, zoom: this.zoom, attribution: this.attribution, "color-trek-line": this.colorTrekLine, "color-departure-icon": this.colorDepartureIcon, "color-arrival-icon": this.colorArrivalIcon, "color-sensitive-area": this.colorSensitiveArea, "color-poi-icon": this.colorPoiIcon })),
+          h("grw-map", { class: this.isLargeView ? 'large-view-app-map-container' : 'app-map-container', style: { visibility: (this.showTreksMap && !this.showTrek) || (this.showTrekMap && this.showTrek) ? 'visible' : 'hidden' }, "url-layer": this.urlLayer, center: this.center, zoom: this.zoom, attribution: this.attribution, "color-primary": this.colorPrimary, "color-primary-tint": this.colorPrimaryTint, "color-trek-line": this.colorTrekLine, "color-departure-icon": this.colorDepartureIcon, "color-arrival-icon": this.colorArrivalIcon, "color-sensitive-area": this.colorSensitiveArea, "color-poi-icon": this.colorPoiIcon })),
         h("div", { class: "map-visibility-button", style: { display: this.isLargeView ? 'none' : 'flex' } },
-          h("div", { onClick: () => (this.showMap = !this.showMap) }, this.showMap ? (this.showTrek ? 'Voir la fiche' : 'Voir la liste') : 'Voir la carte')))));
+          h("div", { onClick: () => this.handleShowMap() }, this.showTreksMap || this.showTrekMap ? (this.showTrek ? 'Voir la fiche' : 'Voir la liste') : 'Voir la carte')))));
   }
   static get is() { return "grw-app"; }
   static get encapsulation() { return "shadow"; }
@@ -236,24 +300,6 @@ export class GrwApp {
       "attribute": "practices",
       "reflect": false
     },
-    "appName": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "app-name",
-      "reflect": false,
-      "defaultValue": "'Geotrek Rando Widget'"
-    },
     "urlLayer": {
       "type": "string",
       "mutable": false,
@@ -469,7 +515,9 @@ export class GrwApp {
   }; }
   static get states() { return {
     "showTrek": {},
-    "showMap": {},
+    "showTreksMap": {},
+    "showTrekMap": {},
+    "showFilters": {},
     "isLargeView": {},
     "currentTrekId": {}
   }; }

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

@@ -0,0 +1,29 @@
+.filter-name {
+  margin-left: 8px;
+  color: var(--color-primary);
+  font-size: 24px;
+  font-weight: bold;
+}
+
+.filter-button-container {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+.filter-button-container .filter-button,
+.filter-button-container .selected-filter-button {
+  user-select: none;
+  cursor: pointer;
+  border: 1px var(--color-primary) solid;
+  border-radius: 8px;
+  margin: 8px 0px 0px 8px;
+  padding: 8px;
+}
+.filter-button-container .filter-button {
+  color: var(--color-primary);
+  background-color: #ffffff;
+}
+.filter-button-container .selected-filter-button {
+  color: #ffffff;
+  background-color: var(--color-primary);
+}

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

@@ -0,0 +1,132 @@
+import { Component, Host, h, Prop } from '@stencil/core';
+import state from 'store/store';
+export class GrwFilter {
+  constructor() {
+    this.filters = [
+      { property: 'practices', trekProperty: 'practice', type: 'include' },
+      { property: 'difficulties', trekProperty: 'difficulty', type: 'include' },
+      { property: 'durations', trekProperty: 'duration', type: 'interval' },
+    ];
+  }
+  handleFilter(_event, filterToHandle) {
+    const filterFromState = [...state[this.filterType]];
+    filterFromState.find(currentFilter => currentFilter.id === filterToHandle.id).selected = !filterFromState.find(currentFilter => currentFilter.id === filterToHandle.id)
+      .selected;
+    state[this.filterType] = filterFromState;
+    let isUsingFilter = false;
+    let filtersTreks = [];
+    for (const filter of this.filters) {
+      const currentFiltersId = state[filter.property].filter(currentFilter => currentFilter.selected).map(currentFilter => currentFilter.id);
+      if (currentFiltersId.length > 0) {
+        if (filtersTreks.length > 0) {
+          if (filter.type === 'include') {
+            filtersTreks = [...filtersTreks.filter(trek => currentFiltersId.includes(trek[filter.trekProperty]))];
+          }
+          else if (filter.type === 'interval') {
+            let minValue;
+            let maxValue;
+            for (const currentFilterId of currentFiltersId) {
+              const currentFilter = state[filter.property].find(property => property.id === currentFilterId);
+              if (isNaN(minValue) || currentFilter.minValue < minValue) {
+                minValue = currentFilter.minValue;
+              }
+              if (isNaN(maxValue) || currentFilter.maxValue > maxValue) {
+                maxValue = currentFilter.maxValue;
+              }
+            }
+            filtersTreks = [...filtersTreks.filter(trek => trek[filter.trekProperty] >= minValue && trek[filter.trekProperty] <= maxValue)];
+          }
+        }
+        else {
+          if (!isUsingFilter) {
+            isUsingFilter = true;
+          }
+          if (filter.type === 'include') {
+            filtersTreks = [...state.treks.filter(trek => currentFiltersId.includes(trek[filter.trekProperty]))];
+          }
+          else if (filter.type === 'interval') {
+            let minValue;
+            let maxValue;
+            for (const currentFilterId of currentFiltersId) {
+              const currentFilter = state[filter.property].find(property => property.id === currentFilterId);
+              if (isNaN(minValue) || currentFilter.minValue < minValue) {
+                minValue = currentFilter.minValue;
+              }
+              if (isNaN(maxValue) || currentFilter.maxValue > maxValue) {
+                maxValue = currentFilter.maxValue;
+              }
+            }
+            filtersTreks = [...state.treks.filter(trek => trek[filter.trekProperty] >= minValue && trek[filter.trekProperty] <= maxValue)];
+          }
+        }
+      }
+    }
+    state.currentTreks = isUsingFilter ? filtersTreks : state.treks;
+  }
+  render() {
+    return (h(Host, null,
+      h("div", { class: "filter-name" }, this.filterName),
+      h("div", { class: "filter-button-container" }, state[this.filterType].map(currentFilter => (h("div", { onClick: event => this.handleFilter(event, currentFilter), class: currentFilter.selected ? 'selected-filter-button' : 'filter-button' }, currentFilter[this.filterNameProperty]))))));
+  }
+  static get is() { return "grw-filter"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["grw-filter.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["grw-filter.css"]
+  }; }
+  static get properties() { return {
+    "filterType": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "filter-type",
+      "reflect": false
+    },
+    "filterName": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "filter-name",
+      "reflect": false
+    },
+    "filterNameProperty": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "filter-name-property",
+      "reflect": false
+    }
+  }; }
+}

package/dist/collection/components/grw-information-desk-detail/grw-information-desk-detail.css

@@ -1,7 +1,9 @@
 :host {
   display: flex;
   flex-direction: column;
-  padding: 0px 8px 8px 8px;
+}
+:host a {
+  color: var(--color-primary);
 }
 
 .information-desk-img {
@@ -12,17 +14,16 @@
   border-radius: 8px;
 }
 
-.information-desk-right-container {
+.information-desk-sub-container {
   display: flex;
   flex-direction: column;
-  padding: 8px;
 }
 
 .information-desk-name {
   color: var(--color-primary);
   font-size: 24px;
   font-weight: bold;
-  padding: 0px 0px 8px 0px;
+  padding: 12px 0px;
 }
 
 .information-desk-description {

package/dist/collection/components/grw-information-desk-detail/grw-information-desk-detail.js

@@ -4,7 +4,7 @@ export class GrwInformationDeskDetail {
     return (h(Host, null,
       this.informationDesk.photo_url && (h("div", { class: "information-desk-img" },
         h("img", { src: this.informationDesk.photo_url, loading: "lazy" }))),
-      h("div", { class: "information-desk-right-container" },
+      h("div", { class: "information-desk-sub-container" },
         this.informationDesk.name && h("div", { class: "information-desk-name" }, this.informationDesk.name),
         this.informationDesk.description && h("div", { class: "information-desk-description", innerHTML: this.informationDesk.description }),
         this.informationDesk.postal_code ||

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

@@ -750,8 +750,13 @@ grw-map {
 
 .poi-tooltip .poi-name,
 .poi-tooltip .information-desks-name,
+.poi-tooltip .sensitive-area-name,
 .information-desks-tooltip .poi-name,
-.information-desks-tooltip .information-desks-name {
+.information-desks-tooltip .information-desks-name,
+.information-desks-tooltip .sensitive-area-name,
+.sensitive-area-tooltip .poi-name,
+.sensitive-area-tooltip .information-desks-name,
+.sensitive-area-tooltip .sensitive-area-name {
   color: var(--color-primary);
   font-weight: bold;
   font-size: 12px;
@@ -800,4 +805,17 @@ grw-map {
   height: 48px;
   font-size: 24px;
   color: #ffffff;
+}
+
+.point-reference-icon {
+  background-color: #ff0000;
+  border: 1px solid #ffffff;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 24px;
+  height: 24px;
+  font-size: 18px;
+  color: #ffffff;
 }

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

@@ -14,6 +14,7 @@ export class GrwMap {
     this.colorArrivalIcon = '#85003b';
     this.colorSensitiveArea = '	#4974a5';
     this.colorPoiIcon = '#974c6e';
+    this.handleTreksWithinBoundsBind = this.handleTreksWithinBounds.bind(this);
   }
   componentDidLoad() {
     this.map = L.map(this.element, {
@@ -31,11 +32,11 @@ export class GrwMap {
     else if (state.currentTrek) {
       this.addTreks();
     }
-    onChange('treks', () => {
+    onChange('currentTreks', () => {
       if (state.currentTrek) {
         this.addTrek();
       }
-      else if (state.treks) {
+      else if (state.currentTreks) {
         this.addTreks();
       }
     });
@@ -57,7 +58,7 @@ export class GrwMap {
       type: 'FeatureCollection',
       features: [],
     };
-    for (const trek of state.treks) {
+    for (const trek of state.currentTreks) {
       trekscurrentDepartureCoordinates.push(trek.departure_geom);
       treksFeatureCollection.features.push({
         type: 'Feature',
@@ -66,51 +67,69 @@ export class GrwMap {
           id: trek.id,
           name: trek.name,
           practice: (_a = state.practices.find(practice => practice.id === trek.practice)) === null || _a === void 0 ? void 0 : _a.pictogram,
-          imgSrc: trek.attachments && trek.attachments.length > 0 && trek.attachments[0].url,
+          imgSrc: trek.attachments && trek.attachments.length > 0 && trek.attachments[0].thumbnail,
         },
       });
     }
-    if (trekscurrentDepartureCoordinates.length > 0) {
-      const bounds = L.latLngBounds(trekscurrentDepartureCoordinates.map(coordinate => [coordinate[1], coordinate[0]]));
-      this.currentBounds = bounds;
-      this.map.fitBounds(this.currentBounds);
-    }
-    this.treksLayer = L.geoJSON(treksFeatureCollection, {
-      pointToLayer: (geoJsonPoint, latlng) => L.marker(latlng, {
-        icon: L.divIcon({
-          html: geoJsonPoint.properties.practice && `<img src=${geoJsonPoint.properties.practice} />`,
-          className: 'trek-marker',
-          iconSize: 48,
+    if (!this.treksLayer) {
+      if (trekscurrentDepartureCoordinates.length > 0 && !state.currentMapTreksBounds) {
+        const bounds = L.latLngBounds(trekscurrentDepartureCoordinates.map(coordinate => [coordinate[1], coordinate[0]]));
+        this.map.fitBounds(bounds);
+      }
+      else {
+        this.map.fitBounds(state.currentMapTreksBounds);
+      }
+      this.treksLayer = L.geoJSON(treksFeatureCollection, {
+        pointToLayer: (geoJsonPoint, latlng) => L.marker(latlng, {
+          icon: L.divIcon({
+            html: geoJsonPoint.properties.practice ? `<img src=${geoJsonPoint.properties.practice} />` : `<img />`,
+            className: 'trek-marker',
+            iconSize: 48,
+          }),
+          autoPanOnFocus: false,
         }),
-        autoPanOnFocus: false,
-      }),
-      onEachFeature: (geoJsonPoint, layer) => {
-        layer.once('click', () => {
-          const trekDeparturePopup = L.DomUtil.create('div');
-          trekDeparturePopup.className = 'trek-departure-popup';
-          trekDeparturePopup.onclick = () => this.trekCardPress.emit(geoJsonPoint.properties.id);
-          const trekName = L.DomUtil.create('div');
-          trekName.innerHTML = geoJsonPoint.properties.name;
-          trekName.className = 'trek-name';
-          if (geoJsonPoint.properties.imgSrc) {
-            trekName.className += ' trek-name-margin-top';
-            const trekImg = L.DomUtil.create('img');
-            trekImg.src = geoJsonPoint.properties.imgSrc;
-            trekDeparturePopup.appendChild(trekImg);
-          }
-          trekDeparturePopup.appendChild(trekName);
-          layer.bindPopup(trekDeparturePopup, { interactive: true, autoPan: false, closeButton: false }).openPopup();
-        });
-      },
-    }).addTo(this.map);
+        onEachFeature: (geoJsonPoint, layer) => {
+          layer.once('click', () => {
+            const trekDeparturePopup = L.DomUtil.create('div');
+            trekDeparturePopup.className = 'trek-departure-popup';
+            trekDeparturePopup.onclick = () => this.trekCardPress.emit(geoJsonPoint.properties.id);
+            const trekName = L.DomUtil.create('div');
+            trekName.innerHTML = geoJsonPoint.properties.name;
+            trekName.className = 'trek-name';
+            if (geoJsonPoint.properties.imgSrc) {
+              trekName.className += ' trek-name-margin-top';
+              const trekImg = L.DomUtil.create('img');
+              trekImg.src = geoJsonPoint.properties.imgSrc;
+              trekDeparturePopup.appendChild(trekImg);
+            }
+            trekDeparturePopup.appendChild(trekName);
+            layer.bindPopup(trekDeparturePopup, { interactive: true, autoPan: false, closeButton: false }).openPopup();
+          });
+        },
+      }).addTo(this.map);
+    }
+    else {
+      if (trekscurrentDepartureCoordinates.length > 0) {
+        const bounds = L.latLngBounds(trekscurrentDepartureCoordinates.map(coordinate => [coordinate[1], coordinate[0]]));
+        this.map.fitBounds(bounds);
+      }
+      this.treksLayer.clearLayers();
+      this.treksLayer.addData(treksFeatureCollection);
+    }
     !this.mapIsReady && (this.mapIsReady = !this.mapIsReady);
+    this.map.on('moveend', this.handleTreksWithinBoundsBind);
   }
   removeTreks() {
     if (this.treksLayer) {
+      state.currentMapTreksBounds = this.map.getBounds();
       this.map.removeLayer(this.treksLayer);
       this.treksLayer = null;
+      this.map.off('moveend', this.handleTreksWithinBoundsBind);
     }
   }
+  handleTreksWithinBounds() {
+    state.treksWithinBounds = state.currentTreks.filter(trek => this.map.getBounds().contains(L.latLng(trek.departure_geom[1], trek.departure_geom[0])));
+  }
   addTrek() {
     const currentTrekFeature = {
       type: 'Feature',
@@ -124,8 +143,7 @@ export class GrwMap {
       interactive: false,
     }).addTo(this.map);
     const bounds = L.latLngBounds(state.currentTrek.geometry.coordinates.map(coordinate => [coordinate[1], coordinate[0]]));
-    this.currentBounds = bounds;
-    this.map.fitBounds(this.currentBounds);
+    this.map.fitBounds(bounds);
     const currentDepartureCoordinates = [state.currentTrek.geometry.coordinates.at(0)[0], state.currentTrek.geometry.coordinates.at(0)[1]];
     const currentArrivalCoordinates = [state.currentTrek.geometry.coordinates.at(-1)[0], state.currentTrek.geometry.coordinates.at(-1)[1]];
     const currentDepartureArrivalFeatureCollection = {
@@ -184,11 +202,24 @@ export class GrwMap {
       for (const sensitiveArea of state.currentSensitiveAreas) {
         currentSensitiveAreasFeatureCollection.features.push({
           type: 'Feature',
-          properties: {},
+          properties: { name: sensitiveArea.name },
           geometry: sensitiveArea.geometry,
         });
       }
-      this.currentSensitiveAreasLayer = L.geoJSON(currentSensitiveAreasFeatureCollection, { style: () => ({ color: this.colorSensitiveArea }) }).addTo(this.map);
+      this.currentSensitiveAreasLayer = L.geoJSON(currentSensitiveAreasFeatureCollection, {
+        onEachFeature: (geoJsonPoint, layer) => {
+          layer.once('mouseover', () => {
+            const sensitiveAreaTooltip = L.DomUtil.create('div');
+            sensitiveAreaTooltip.className = 'sensitive-area-tooltip';
+            const sensitiveAreaName = L.DomUtil.create('div');
+            sensitiveAreaName.innerHTML = geoJsonPoint.properties.name;
+            sensitiveAreaName.className = 'sensitive-area-name';
+            sensitiveAreaTooltip.appendChild(sensitiveAreaName);
+            layer.bindTooltip(sensitiveAreaTooltip).openTooltip();
+          });
+        },
+        style: () => ({ color: this.colorSensitiveArea }),
+      }).addTo(this.map);
       L.Control.SensitiveAreasCheckboxContainer = L.Control.extend({
         onAdd: () => {
           const sensitiveAreasCheckboxContainer = L.DomUtil.create('div');
@@ -282,6 +313,32 @@ export class GrwMap {
         },
       }).addTo(this.map);
     }
+    if (state.currentTrek.points_reference) {
+      const currentPointsReferenceFeatureCollection = {
+        type: 'FeatureCollection',
+        features: [],
+      };
+      currentPointsReferenceFeatureCollection.features.push({
+        type: 'Feature',
+        properties: {},
+        geometry: state.currentTrek.points_reference,
+      });
+      let index = 0;
+      this.currentPointsReferenceLayer = L.geoJSON(currentPointsReferenceFeatureCollection, {
+        pointToLayer: (_geoJsonPoint, latlng) => {
+          index += 1;
+          return L.marker(latlng, {
+            icon: L.divIcon({
+              html: index,
+              className: 'point-reference-icon',
+              iconSize: 24,
+            }),
+            autoPanOnFocus: false,
+            interactive: false,
+          });
+        },
+      }).addTo(this.map);
+    }
     !this.mapIsReady && (this.mapIsReady = !this.mapIsReady);
   }
   removeTrek() {
@@ -311,6 +368,10 @@ export class GrwMap {
       this.map.removeLayer(this.currentInformationDesksLayer);
       this.currentInformationDesksLayer = null;
     }
+    if (this.currentPointsReferenceLayer) {
+      this.map.removeLayer(this.currentPointsReferenceLayer);
+      this.currentPointsReferenceLayer = null;
+    }
   }
   render() {
     return (h(Host, { style: {

package/dist/collection/components/grw-poi-detail/grw-poi-detail.css

@@ -1,7 +1,9 @@
 :host {
   display: flex;
   flex-direction: column;
-  padding: 0px 8px 8px 8px;
+}
+:host a {
+  color: var(--color-primary);
 }
 
 .poi-img {
@@ -12,17 +14,16 @@
   border-radius: 8px;
 }
 
-.poi-right-container {
+.poi-sub-container {
   display: flex;
   flex-direction: column;
-  padding: 8px;
 }
 
 .poi-name {
   color: var(--color-primary);
   font-size: 24px;
   font-weight: bold;
-  padding: 0px 0px 8px 0px;
+  padding: 12px 0px;
 }
 
 .poi-description {

package/dist/collection/components/grw-poi-detail/grw-poi-detail.js

@@ -4,7 +4,7 @@ export class GrwPoiDetail {
     return (h(Host, null,
       this.poi.attachments && this.poi.attachments[0] && this.poi.attachments[0].thumbnail && (h("div", { class: "poi-img" },
         h("img", { src: this.poi.attachments[0].thumbnail, loading: "lazy" }))),
-      h("div", { class: "poi-right-container" },
+      h("div", { class: "poi-sub-container" },
         h("div", { class: "poi-name" }, this.poi.name),
         h("div", { class: "poi-description", innerHTML: this.poi.description }))));
   }