@geotrekce/geotrek-rando-widget 0.3.5 → 0.4.0

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

@@ -9,9 +9,11 @@ import { translate } from 'i18n/i18n';
 import { getTrekGeometry } from 'services/treks.service';
 export class GrwMap {
   constructor() {
+    this.maxZoom = 19;
     this.userLayersState = {};
     this.tileLayer = [];
     this.handleTreksWithinBoundsBind = this.handleTreksWithinBounds.bind(this);
+    this.handleTouristicContentsWithinBoundsBind = this.handleTouristicContentsWithinBounds.bind(this);
     this.mapIsReady = false;
     this.nameLayer = undefined;
     this.urlLayer = undefined;
@@ -39,8 +41,8 @@ export class GrwMap {
     }
   }
   descriptionIsInViewport(event) {
-    if (this.currentPointsReferenceLayer) {
-      this.handleLayerVisibility(event.detail, this.currentPointsReferenceLayer);
+    if (this.currentReferencePointsLayer) {
+      this.handleLayerVisibility(event.detail, this.currentReferencePointsLayer);
     }
   }
   parkingIsInViewport(event) {
@@ -68,6 +70,11 @@ export class GrwMap {
       this.handleLayerVisibility(event.detail, this.currentToutisticContentsLayer);
     }
   }
+  touristicEventsIsInViewport(event) {
+    if (this.currentToutisticEventsLayer) {
+      this.handleLayerVisibility(event.detail, this.currentToutisticEventsLayer);
+    }
+  }
   onCardTrekMouseOver(event) {
     if (!state.parentTrek && (!state.selectedTrekId || state.selectedTrekId !== event.detail)) {
       state.selectedTrekId = event.detail;
@@ -81,7 +88,7 @@ export class GrwMap {
       this.addSelectedCurrentStep(event.detail);
     }
   }
-  oncardTrekMouseLeave() {
+  onCardTrekMouseLeave() {
     if (!this.trekPopupIsOpen && state.selectedTrekId) {
       this.trekPopupIsOpen = false;
       state.selectedTrekId = null;
@@ -93,6 +100,15 @@ export class GrwMap {
       this.removeSelectedCurrentStep();
     }
   }
+  onTouristicContentMouseOver(event) {
+    this.touristicContentPopupIsOpen = false;
+    state.selectedTouristicContentId = null;
+    this.addSelectedTouristicContent(event.detail);
+  }
+  onTouristicContentMouseLeave() {
+    state.selectedTouristicContentId = null;
+    this.removeSelectedTouristicContent();
+  }
   componentDidLoad() {
     this.map = L.map(this.mapRef, {
       center: this.center.split(',').map(Number),
@@ -107,7 +123,7 @@ export class GrwMap {
       this.tileLayer.push({
         key: `${nameLayers[index]}`,
         value: L.tileLayer(urlLayer, {
-          maxZoom: 19,
+          maxZoom: this.maxZoom,
           attribution: `${attributionLayers[index] && attributionLayers[index] !== '' ? attributionLayers[index].concat(' | ') : ''}Powered by <a target="_blank" href="https://geotrek.fr/">Geotrek</a>`,
         }),
       });
@@ -142,6 +158,15 @@ export class GrwMap {
     else if (state.currentTreks) {
       this.addTreks();
     }
+    else if (state.currentTouristicContent) {
+      this.addTouristicContent();
+    }
+    else if (state.currentTouristicEvent) {
+      this.addTouristicEvent();
+    }
+    else if (state.touristicContents) {
+      this.addTouristicContents();
+    }
     onChange('currentTreks', () => {
       if (state.currentTrek) {
         this.removeTreks();
@@ -149,6 +174,8 @@ export class GrwMap {
       }
       else if (state.currentTreks) {
         this.removeTrek();
+        this.removeTouristicContent();
+        this.removeTouristicEvent();
         this.addTreks();
       }
     });
@@ -157,11 +184,66 @@ export class GrwMap {
         this.removeTreks();
         this.addTrek();
       }
-      else {
+      else if (state.currentTreks) {
+        this.removeTrek();
+        this.removeTouristicContent();
+        this.removeTouristicEvent();
+        this.addTreks();
+      }
+    });
+    onChange('currentTouristicContent', () => {
+      if (state.currentTouristicContent) {
+        this.removeTrek();
+        this.removeTouristicContents();
+        this.addTouristicContent();
+      }
+      else if (state.touristicContents) {
+        this.removeTouristicContent();
+        this.addTouristicContents();
+      }
+      else if (state.currentTrek) {
+        this.removeTouristicContent();
+        this.addTrek();
+      }
+      else if (state.currentTreks) {
+        this.removeTouristicContent();
+        this.addTreks();
+      }
+    });
+    onChange('currentTouristicEvent', () => {
+      if (state.currentTouristicEvent) {
         this.removeTrek();
+        this.addTouristicEvent();
+      }
+      else if (state.currentTrek) {
+        this.removeTouristicEvent();
+        this.addTrek();
+      }
+      else if (state.currentTreks) {
+        this.removeTouristicEvent();
         this.addTreks();
       }
     });
+    onChange('currentTouristicContents', () => {
+      if (state.currentTouristicContent) {
+        this.removeTouristicContents();
+        this.addTouristicContent();
+      }
+      else if (state.currentTouristicContents) {
+        this.removeTouristicContent();
+        this.addTouristicContents();
+      }
+    });
+    onChange('mode', () => {
+      if (state.mode === 'treks') {
+        this.removeTouristicContents();
+        this.addTreks();
+      }
+      else if (state.mode === 'touristicContents') {
+        this.removeTreks();
+        this.addTouristicContents();
+      }
+    });
   }
   handleLayerVisibility(visible, layer) {
     if (visible && !this.map.hasLayer(layer)) {
@@ -174,14 +256,15 @@ export class GrwMap {
   }
   addTreks() {
     var _a;
-    const trekscurrentDepartureCoordinates = [];
+    state.treksWithinBounds = state.currentTreks;
+    const treksCurrentDepartureCoordinates = [];
     const treksFeatureCollection = {
       type: 'FeatureCollection',
       features: [],
     };
     if (state.currentTreks) {
       for (const trek of state.currentTreks) {
-        trekscurrentDepartureCoordinates.push(trek.departure_geom);
+        treksCurrentDepartureCoordinates.push(trek.departure_geom);
         treksFeatureCollection.features.push({
           type: 'Feature',
           geometry: { type: 'Point', coordinates: trek.departure_geom },
@@ -195,12 +278,12 @@ export class GrwMap {
       }
     }
     if (!this.treksLayer) {
-      if (trekscurrentDepartureCoordinates.length > 0 && !state.currentMapTreksBounds) {
-        this.bounds = L.latLngBounds(trekscurrentDepartureCoordinates.map(coordinate => [coordinate[1], coordinate[0]]));
+      if (treksCurrentDepartureCoordinates.length > 0 && !state.currentMapBounds) {
+        this.bounds = L.latLngBounds(treksCurrentDepartureCoordinates.map(coordinate => [coordinate[1], coordinate[0]]));
       }
       else {
-        if (state.currentMapTreksBounds) {
-          this.bounds = state.currentMapTreksBounds;
+        if (state.currentMapBounds) {
+          this.bounds = state.currentMapBounds;
         }
       }
       this.treksLayer = L.geoJSON(treksFeatureCollection, {
@@ -253,8 +336,8 @@ export class GrwMap {
       this.map.addLayer(this.treksMarkerClusterGroup);
     }
     else {
-      if (trekscurrentDepartureCoordinates.length > 0) {
-        this.bounds = L.latLngBounds(trekscurrentDepartureCoordinates.map(coordinate => [coordinate[1], coordinate[0]]));
+      if (treksCurrentDepartureCoordinates.length > 0) {
+        this.bounds = L.latLngBounds(treksCurrentDepartureCoordinates.map(coordinate => [coordinate[1], coordinate[0]]));
       }
       else {
         this.map.fire('moveend');
@@ -270,7 +353,7 @@ export class GrwMap {
   }
   removeTreks() {
     if (this.treksLayer) {
-      state.currentMapTreksBounds = this.map.getBounds();
+      state.currentMapBounds = this.map.getBounds();
       this.map.removeLayer(this.treksMarkerClusterGroup);
       this.treksLayer = null;
       this.treksMarkerClusterGroup = null;
@@ -278,13 +361,19 @@ export class GrwMap {
     }
   }
   handleTreksWithinBounds() {
-    if ((state.currentTreks && !state.currentMapTreksBounds) ||
-      (state.currentTreks && state.currentMapTreksBounds && state.currentMapTreksBounds.toBBoxString() !== this.map.getBounds().toBBoxString())) {
+    if ((state.currentTreks && !state.currentMapBounds) ||
+      (state.currentTreks && state.currentMapBounds && state.currentMapBounds.toBBoxString() !== this.map.getBounds().toBBoxString())) {
       state.treksWithinBounds = state.currentTreks.filter(trek => this.map.getBounds().contains(L.latLng(trek.departure_geom[1], trek.departure_geom[0])));
     }
   }
+  handleTouristicContentsWithinBounds() {
+    if ((state.currentTouristicContents && !state.currentMapBounds) ||
+      (state.currentTouristicContents && state.currentMapBounds && state.currentMapBounds.toBBoxString() !== this.map.getBounds().toBBoxString())) {
+      state.touristicContentsWithinBounds = state.currentTouristicContents.filter(touristicContent => this.map.getBounds().contains(L.latLng(touristicContent.geometry.coordinates[1], touristicContent.geometry.coordinates[0])));
+    }
+  }
   addTrek() {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     this.trekPopupIsOpen = false;
     state.selectedTrekId = null;
     this.hideTrekLine();
@@ -380,12 +469,12 @@ export class GrwMap {
         },
       });
     }
-    if (state.touristicContents && state.touristicContents.length > 0) {
+    if (state.trekTouristicContents && state.trekTouristicContents.length > 0) {
       const currentTouristicContentsFeatureCollection = {
         type: 'FeatureCollection',
         features: [],
       };
-      for (const touristicContent of state.touristicContents) {
+      for (const touristicContent of state.trekTouristicContents) {
         currentTouristicContentsFeatureCollection.features.push({
           type: 'Feature',
           properties: {
@@ -407,7 +496,7 @@ export class GrwMap {
         onEachFeature: (geoJsonPoint, layer) => {
           layer.once('mouseover', () => {
             const touristicContentTooltip = L.DomUtil.create('div');
-            touristicContentTooltip.className = 'poi-tooltip';
+            touristicContentTooltip.className = 'touristic-content-tooltip';
             const touristicContentName = L.DomUtil.create('div');
             touristicContentName.innerHTML = geoJsonPoint.properties.name;
             touristicContentName.className = 'touristic-content-name';
@@ -417,6 +506,43 @@ export class GrwMap {
         },
       });
     }
+    if (state.touristicEvents && state.touristicEvents.length > 0) {
+      const currentTouristicEventsFeatureCollection = {
+        type: 'FeatureCollection',
+        features: [],
+      };
+      for (const touristicEvent of state.touristicEvents) {
+        currentTouristicEventsFeatureCollection.features.push({
+          type: 'Feature',
+          properties: {
+            name: touristicEvent.name,
+            type_pictogram: (_c = state.touristicEventTypes.find(touristicEventType => touristicEventType.id === touristicEvent.type)) === null || _c === void 0 ? void 0 : _c.pictogram,
+          },
+          geometry: touristicEvent.geometry,
+        });
+      }
+      this.currentToutisticEventsLayer = L.geoJSON(currentTouristicEventsFeatureCollection, {
+        pointToLayer: (geoJsonPoint, latlng) => L.marker(latlng, {
+          icon: L.divIcon({
+            html: geoJsonPoint.properties.type_pictogram ? `<img src=${geoJsonPoint.properties.type_pictogram} />` : `<img />`,
+            className: 'touristic-event-icon',
+            iconSize: 48,
+          }),
+          autoPanOnFocus: false,
+        }),
+        onEachFeature: (geoJsonPoint, layer) => {
+          layer.once('mouseover', () => {
+            const touristicEventTooltip = L.DomUtil.create('div');
+            touristicEventTooltip.className = 'touristic-event-tooltip';
+            const touristicEventName = L.DomUtil.create('div');
+            touristicEventName.innerHTML = geoJsonPoint.properties.name;
+            touristicEventName.className = 'touristic-event-name';
+            touristicEventTooltip.appendChild(touristicEventName);
+            layer.bindTooltip(touristicEventTooltip).openTooltip();
+          });
+        },
+      });
+    }
     if (state.currentInformationDesks && state.currentInformationDesks.length > 0) {
       const currentInformationDesksFeatureCollection = {
         type: 'FeatureCollection',
@@ -454,17 +580,17 @@ export class GrwMap {
       });
     }
     if (state.currentTrek.points_reference) {
-      const currentPointsReferenceFeatureCollection = {
+      const currentReferencePointsFeatureCollection = {
         type: 'FeatureCollection',
         features: [],
       };
-      currentPointsReferenceFeatureCollection.features.push({
+      currentReferencePointsFeatureCollection.features.push({
         type: 'Feature',
         properties: {},
         geometry: state.currentTrek.points_reference,
       });
       let index = 0;
-      this.currentPointsReferenceLayer = L.geoJSON(currentPointsReferenceFeatureCollection, {
+      this.currentReferencePointsLayer = L.geoJSON(currentReferencePointsFeatureCollection, {
         pointToLayer: (_geoJsonPoint, latlng) => {
           index += 1;
           return L.marker(latlng, {
@@ -492,7 +618,7 @@ export class GrwMap {
             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,
+              practice: (_d = state.practices.find(practice => practice.id === trek.practice)) === null || _d === void 0 ? void 0 : _d.pictogram,
               imgSrc: trek.attachments && trek.attachments.length > 0 && trek.attachments[0].thumbnail,
             },
           });
@@ -589,8 +715,8 @@ export class GrwMap {
     if (this.currentStepsLayer) {
       overlays[translate[state.language].layers.steps] = this.currentStepsLayer;
     }
-    if (this.currentPointsReferenceLayer) {
-      overlays[translate[state.language].layers.pointsReference] = this.currentPointsReferenceLayer;
+    if (this.currentReferencePointsLayer) {
+      overlays[translate[state.language].layers.referencePoints] = this.currentReferencePointsLayer;
     }
     if (this.currentParkingLayer) {
       overlays[translate[state.language].layers.parking] = this.currentParkingLayer;
@@ -607,6 +733,9 @@ export class GrwMap {
     if (this.currentToutisticContentsLayer) {
       overlays[translate[state.language].layers.touristicContents] = this.currentToutisticContentsLayer;
     }
+    if (this.currentToutisticEventsLayer) {
+      overlays[translate[state.language].layers.touristicEvents] = this.currentToutisticEventsLayer;
+    }
     if (this.layersControl) {
       Object.keys(overlays).forEach(key => {
         this.layersControl.addOverlay(overlays[key], key);
@@ -826,9 +955,9 @@ export class GrwMap {
       this.map.removeLayer(this.currentInformationDesksLayer);
       this.currentInformationDesksLayer = null;
     }
-    if (this.currentPointsReferenceLayer) {
-      this.map.removeLayer(this.currentPointsReferenceLayer);
-      this.currentPointsReferenceLayer = null;
+    if (this.currentReferencePointsLayer) {
+      this.map.removeLayer(this.currentReferencePointsLayer);
+      this.currentReferencePointsLayer = null;
     }
     if (this.currentStepsLayer) {
       this.map.removeLayer(this.currentStepsLayer);
@@ -838,6 +967,10 @@ export class GrwMap {
       this.map.removeLayer(this.currentToutisticContentsLayer);
       this.currentToutisticContentsLayer = null;
     }
+    if (this.currentToutisticEventsLayer) {
+      this.map.removeLayer(this.currentToutisticEventsLayer);
+      this.currentToutisticEventsLayer = null;
+    }
   }
   disconnectedCallback() {
     if (this.resetStoreOnDisconnected) {
@@ -865,6 +998,284 @@ export class GrwMap {
       this.currentTrekLayer = null;
     }
   }
+  addTouristicContent() {
+    this.touristicContentPopupIsOpen = false;
+    state.selectedTouristicContentId = null;
+    this.removeSelectedTouristicContent();
+    const touristicContentsFeatureCollection = {
+      type: 'FeatureCollection',
+      features: [],
+    };
+    if (state.currentTouristicContent) {
+      touristicContentsFeatureCollection.features.push({
+        type: 'Feature',
+        geometry: { type: 'Point', coordinates: state.currentTouristicContent.geometry.coordinates },
+        properties: {
+          id: state.currentTouristicContent.id,
+          name: state.currentTouristicContent.name,
+          practice: state.touristicContentCategories.find(touristicContentCategory => touristicContentCategory.id === state.currentTouristicContent.category).pictogram,
+        },
+      });
+    }
+    if (!this.currentToutisticContentLayer) {
+      this.currentToutisticContentLayer = L.geoJSON(touristicContentsFeatureCollection, {
+        pointToLayer: (geoJsonPoint, latlng) => L.marker(latlng, {
+          icon: L.divIcon({
+            html: geoJsonPoint.properties.practice
+              ? `<div class="touristic-content-marker-container"><img src=${geoJsonPoint.properties.practice} /></div>`
+              : `<div class="touristic-content-marker-container"></div>`,
+            className: 'touristic-content-marker',
+            iconSize: 32,
+            iconAnchor: [18, 0],
+          }),
+          autoPanOnFocus: false,
+        }),
+      });
+      this.map.addLayer(this.currentToutisticContentLayer);
+    }
+    this.map.setView([state.currentTouristicContent.geometry.coordinates[1], state.currentTouristicContent.geometry.coordinates[0]], this.maxZoom);
+    !this.mapIsReady && (this.mapIsReady = !this.mapIsReady);
+  }
+  removeTouristicContent() {
+    if (this.currentToutisticContentLayer) {
+      this.map.removeLayer(this.currentToutisticContentLayer);
+      this.currentToutisticContentLayer = null;
+    }
+  }
+  addTouristicContents() {
+    state.touristicContentsWithinBounds = state.touristicContents;
+    const touristicContentsCurrentCoordinates = [];
+    const touristicContentsFeatureCollection = {
+      type: 'FeatureCollection',
+      features: [],
+    };
+    if (state.touristicContents) {
+      if (touristicContentsCurrentCoordinates.length > 0 && !state.currentMapBounds) {
+        this.bounds = L.latLngBounds(touristicContentsCurrentCoordinates.map(coordinate => [coordinate[1], coordinate[0]]));
+      }
+      else {
+        if (state.currentMapBounds) {
+          this.bounds = state.currentMapBounds;
+        }
+      }
+      for (const currentTouristicContent of state.currentTouristicContents) {
+        touristicContentsCurrentCoordinates.push(currentTouristicContent.geometry.coordinates);
+        touristicContentsFeatureCollection.features.push({
+          type: 'Feature',
+          geometry: { type: 'Point', coordinates: currentTouristicContent.geometry.coordinates },
+          properties: {
+            id: currentTouristicContent.id,
+            name: currentTouristicContent.name,
+            practice: state.touristicContentCategories.find(touristicContentCategory => touristicContentCategory.id === currentTouristicContent.category).pictogram,
+          },
+        });
+      }
+    }
+    if (!this.toutisticContentsLayer) {
+      if (touristicContentsCurrentCoordinates.length > 0 && !state.currentMapBounds) {
+        this.bounds = L.latLngBounds(touristicContentsCurrentCoordinates.map(coordinate => [coordinate[1], coordinate[0]]));
+      }
+      else {
+        if (state.currentMapBounds) {
+          this.bounds = state.currentMapBounds;
+        }
+      }
+      this.toutisticContentsLayer = L.geoJSON(touristicContentsFeatureCollection, {
+        pointToLayer: (geoJsonPoint, latlng) => L.marker(latlng, {
+          icon: L.divIcon({
+            html: geoJsonPoint.properties.practice
+              ? `<div class="touristic-content-marker-container"><img src=${geoJsonPoint.properties.practice} /></div>`
+              : `<div class="touristic-content-marker-container"></div>`,
+            className: 'touristic-content-marker',
+            iconSize: 32,
+            iconAnchor: [18, 0],
+          }),
+          autoPanOnFocus: false,
+        }),
+        onEachFeature: (geoJsonPoint, layer) => {
+          layer.once('click', () => {
+            const touristicContentCoordinatesPopup = L.DomUtil.create('div');
+            touristicContentCoordinatesPopup.className = 'touristic-content-coordinates-popup';
+            if (geoJsonPoint.properties.imgSrc) {
+              const touristicCotentImg = L.DomUtil.create('img');
+              touristicCotentImg.src = geoJsonPoint.properties.imgSrc;
+              touristicContentCoordinatesPopup.appendChild(touristicCotentImg);
+            }
+            const touristicContentName = L.DomUtil.create('div');
+            touristicContentName.innerHTML = geoJsonPoint.properties.name;
+            touristicContentName.className = 'touristic-content-name';
+            touristicContentCoordinatesPopup.appendChild(touristicContentName);
+            const touristicContentButton = L.DomUtil.create('button');
+            touristicContentButton.innerHTML = 'Afficher le détail';
+            touristicContentButton.className = 'touristic-content-button';
+            touristicContentButton.onclick = () => this.touristicContentCardPress.emit(geoJsonPoint.properties.id);
+            touristicContentCoordinatesPopup.appendChild(touristicContentButton);
+            layer.bindPopup(touristicContentCoordinatesPopup, { interactive: true, autoPan: false, closeButton: false }).openPopup();
+          });
+          layer.on('mouseover', e => {
+            this.addSelectedTouristicContent(geoJsonPoint.properties.id, e.latlng);
+          });
+        },
+      });
+      this.touristicContentsMarkerClusterGroup = L.markerClusterGroup({
+        showCoverageOnHover: false,
+        removeOutsideVisibleBounds: false,
+        iconCreateFunction: cluster => {
+          return L.divIcon({
+            html: '<div>' + cluster.getChildCount() + '</div>',
+            className: 'touristic-content-marker-cluster-group-icon',
+            iconSize: 48,
+            iconAnchor: [24, 24],
+          });
+        },
+      });
+      this.touristicContentsMarkerClusterGroup.addLayer(this.toutisticContentsLayer);
+      this.map.addLayer(this.touristicContentsMarkerClusterGroup);
+    }
+    else {
+      if (touristicContentsCurrentCoordinates.length > 0) {
+        this.bounds = L.latLngBounds(touristicContentsCurrentCoordinates.map(coordinate => [coordinate[1], coordinate[0]]));
+      }
+      else {
+        this.map.fire('moveend');
+      }
+      this.toutisticContentsLayer.clearLayers();
+      this.toutisticContentsLayer.addData(touristicContentsFeatureCollection);
+      this.touristicContentsMarkerClusterGroup.clearLayers();
+      this.touristicContentsMarkerClusterGroup.addLayer(this.toutisticContentsLayer);
+    }
+    this.bounds && this.map.fitBounds(this.bounds);
+    !this.mapIsReady && (this.mapIsReady = !this.mapIsReady);
+    this.map.on('moveend', this.handleTouristicContentsWithinBoundsBind);
+  }
+  removeTouristicContents() {
+    if (this.toutisticContentsLayer) {
+      state.currentMapBounds = this.map.getBounds();
+      this.map.removeLayer(this.touristicContentsMarkerClusterGroup);
+      this.toutisticContentsLayer = null;
+      this.touristicContentsMarkerClusterGroup = null;
+      this.map.off('moveend', this.handleTouristicContentsWithinBoundsBind);
+    }
+  }
+  addTouristicEvent() {
+    const touristicEventsFeatureCollection = {
+      type: 'FeatureCollection',
+      features: [],
+    };
+    if (state.currentTouristicEvent) {
+      touristicEventsFeatureCollection.features.push({
+        type: 'Feature',
+        geometry: { type: 'Point', coordinates: state.currentTouristicEvent.geometry.coordinates },
+        properties: {
+          id: state.currentTouristicEvent.id,
+          name: state.currentTouristicEvent.name,
+          type: state.touristicEventTypes.find(touristicEventType => touristicEventType.id === state.currentTouristicEvent.type).pictogram,
+        },
+      });
+    }
+    if (!this.currentToutisticEventLayer) {
+      this.currentToutisticEventLayer = L.geoJSON(touristicEventsFeatureCollection, {
+        pointToLayer: (geoJsonPoint, latlng) => L.marker(latlng, {
+          icon: L.divIcon({
+            html: geoJsonPoint.properties.type
+              ? `<div class="touristic-event-marker-container"><img src=${geoJsonPoint.properties.type} /></div>`
+              : `<div class="touristic-event-marker-container"></div>`,
+            className: 'touristic-event-marker',
+            iconSize: 32,
+            iconAnchor: [18, 0],
+          }),
+          autoPanOnFocus: false,
+        }),
+      });
+      this.map.addLayer(this.currentToutisticEventLayer);
+    }
+    this.map.setView([state.currentTouristicEvent.geometry.coordinates[1], state.currentTouristicEvent.geometry.coordinates[0]], this.maxZoom);
+    !this.mapIsReady && (this.mapIsReady = !this.mapIsReady);
+  }
+  removeTouristicEvent() {
+    if (this.currentToutisticEventLayer) {
+      this.map.removeLayer(this.currentToutisticEventLayer);
+      this.currentToutisticEventLayer = null;
+    }
+  }
+  addSelectedTouristicContent(id, customCoordinates) {
+    var _a;
+    const touristicContentFeatureCollection = {
+      type: 'FeatureCollection',
+      features: [],
+    };
+    if (state.touristicContents) {
+      const touristicContent = state.touristicContents.find(touristicContent => touristicContent.id === id);
+      touristicContentFeatureCollection.features.push({
+        type: 'Feature',
+        geometry: { type: 'Point', coordinates: customCoordinates ? [customCoordinates.lng, customCoordinates.lat] : touristicContent.geometry.coordinates },
+        properties: {
+          id: touristicContent.id,
+          name: touristicContent.name,
+          category: (_a = state.touristicContentCategories.find(practice => practice.id === touristicContent.category)) === null || _a === void 0 ? void 0 : _a.pictogram,
+          imgSrc: touristicContent.attachments && touristicContent.attachments.length > 0 && touristicContent.attachments[0].thumbnail,
+        },
+      });
+    }
+    this.removeSelectedTouristicContent();
+    state.selectedTouristicContentId = id;
+    this.selectedTouristicContentLayer = L.geoJSON(touristicContentFeatureCollection, {
+      pointToLayer: (geoJsonPoint, latlng) => L.marker(latlng, {
+        zIndexOffset: 4000000,
+        icon: L.divIcon({
+          html: geoJsonPoint.properties.category
+            ? `<div class="touristic-content-marker-container"><img src=${geoJsonPoint.properties.category} /></div>`
+            : `<div class="touristic-content-trek-marker-container"></div>`,
+          className: 'selected-touristic-content-marker',
+          iconSize: 64,
+          iconAnchor: [36, 36],
+        }),
+        autoPanOnFocus: false,
+      }),
+      onEachFeature: (geoJsonPoint, layer) => {
+        layer.once('click', () => {
+          const touristicContentDeparturePopup = L.DomUtil.create('div');
+          touristicContentDeparturePopup.className = 'touristic-content-coordinates-popup';
+          if (geoJsonPoint.properties.imgSrc) {
+            const touristicContentImg = L.DomUtil.create('img');
+            touristicContentImg.src = geoJsonPoint.properties.imgSrc;
+            touristicContentDeparturePopup.appendChild(touristicContentImg);
+          }
+          const touristicContentName = L.DomUtil.create('div');
+          touristicContentName.innerHTML = geoJsonPoint.properties.name;
+          touristicContentName.className = 'touristic-content-name';
+          touristicContentDeparturePopup.appendChild(touristicContentName);
+          const touristicContentButton = L.DomUtil.create('button');
+          touristicContentButton.innerHTML = 'Afficher le détail';
+          touristicContentButton.className = 'touristic-content-button';
+          touristicContentButton.onclick = () => this.touristicContentCardPress.emit(geoJsonPoint.properties.id);
+          touristicContentDeparturePopup.appendChild(touristicContentButton);
+          layer.bindPopup(touristicContentDeparturePopup, { interactive: true, autoPan: false, closeButton: false }).openPopup();
+        });
+        layer.on('mouseout', () => {
+          if (!this.touristicContentPopupIsOpen) {
+            state.selectedTouristicContentId = null;
+            this.removeSelectedTouristicContent();
+          }
+        });
+        layer.on('popupopen', () => {
+          this.touristicContentPopupIsOpen = Boolean(state.selectedTouristicContentId);
+        });
+        layer.on('popupclose', () => {
+          if (state.selectedTouristicContentId) {
+            this.touristicContentPopupIsOpen = false;
+            state.selectedTouristicContentId = null;
+            this.removeSelectedTouristicContent();
+          }
+        });
+      },
+    }).addTo(this.map);
+  }
+  removeSelectedTouristicContent() {
+    state.selectedTouristicContentId = null;
+    this.selectedTouristicContentLayer && this.map.removeLayer(this.selectedTouristicContentLayer);
+    this.selectedTouristicContentLayer = null;
+  }
   render() {
     const layersImageSrc = getAssetPath(`${Build.isDev ? '/' : ''}assets/layers.svg`);
     const contractImageSrc = getAssetPath(`${Build.isDev ? '/' : ''}assets/contract.svg`);
@@ -1203,6 +1614,21 @@ export class GrwMap {
           "resolved": "number",
           "references": {}
         }
+      }, {
+        "method": "touristicContentCardPress",
+        "name": "touristicContentCardPress",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        }
       }];
   }
   static get listeners() {
@@ -1254,6 +1680,12 @@ export class GrwMap {
         "target": "window",
         "capture": false,
         "passive": false
+      }, {
+        "name": "touristicEventsIsInViewport",
+        "method": "touristicEventsIsInViewport",
+        "target": "window",
+        "capture": false,
+        "passive": false
       }, {
         "name": "cardTrekMouseOver",
         "method": "onCardTrekMouseOver",
@@ -1262,7 +1694,19 @@ export class GrwMap {
         "passive": false
       }, {
         "name": "cardTrekMouseLeave",
-        "method": "oncardTrekMouseLeave",
+        "method": "onCardTrekMouseLeave",
+        "target": "window",
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "cardTouristicContentMouseOver",
+        "method": "onTouristicContentMouseOver",
+        "target": "window",
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "cardTouristicContentMouseLeave",
+        "method": "onTouristicContentMouseLeave",
         "target": "window",
         "capture": false,
         "passive": false