@geotrekce/geotrek-rando-widget 0.2.15 → 0.3.0

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

@@ -1 +1 @@
-{"version":3,"file":"grw-filter.js","sourceRoot":"","sources":["../../../src/components/grw-filter/grw-filter.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC9E,OAAO,KAAK,MAAM,aAAa,CAAC;AAChC,OAAO,EAAE,sBAAsB,EAAE,MAAM,aAAa,CAAC;AAOrD,MAAM,OAAO,SAAS;;;;;;EAMpB,aAAa;IACX,IAAI,CAAC,WAAW,EAAE,CAAC;EACrB,CAAC;EAED,YAAY,CAAC,MAAkB,EAAE,cAAmB;IAClD,MAAM,eAAe,GAAG,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC;IACpD,eAAe,CAAC,IAAI,CAAC,aAAa,CAAC,EAAE,CAAC,aAAa,CAAC,EAAE,KAAK,cAAc,CAAC,EAAE,CAAC,CAAC,QAAQ,GAAG,CAAC,eAAe,CAAC,IAAI,CAAC,aAAa,CAAC,EAAE,CAAC,aAAa,CAAC,EAAE,KAAK,cAAc,CAAC,EAAE,CAAC;OACpK,QAAQ,CAAC;IACZ,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,GAAG,eAAe,CAAC;IACzC,KAAK,CAAC,YAAY,GAAG,sBAAsB,EAAE,CAAC;EAChD,CAAC;EAED,WAAW;IACT,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,OAAO,CAAC,aAAa,CAAC,EAAE,CAAC,CAAC,aAAa,CAAC,QAAQ,GAAG,KAAK,CAAC,CAAC,CAAC;IAClF,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;EAC9B,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC;MACpC,WAAK,KAAK,EAAC,2BAA2B,IAAE,IAAI,CAAC,UAAU,CAAO;MAC9D,WAAK,KAAK,EAAC,yBAAyB,IACjC,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,aAAa,CAAC,EAAE,CAAC,CAC3C,cAAQ,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,aAAa,CAAC,EAAE,KAAK,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,eAAe;QAC1I,aAAa,CAAC,QAAQ,IAAI,YAAM,KAAK,EAAC,4CAA4C,YAAa;QAC/F,aAAa,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAChC,CACV,CAAC,CACE,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, Listen, forceUpdate } from '@stencil/core';\nimport state from 'store/store';\nimport { handleFiltersAndSearch } from 'utils/utils';\n\n@Component({\n  tag: 'grw-filter',\n  styleUrl: 'grw-filter.scss',\n  shadow: true,\n})\nexport class GrwFilter {\n  filterRef: HTMLElement;\n  @Prop() filterType: string;\n  @Prop() filterName: string;\n  @Prop() filterNameProperty: string;\n  @Listen('resetFilter', { target: 'window' })\n  onResetFilter() {\n    this.resetFilter();\n  }\n\n  handleFilter(_event: MouseEvent, filterToHandle: any) {\n    const filterFromState = [...state[this.filterType]];\n    filterFromState.find(currentFilter => currentFilter.id === filterToHandle.id).selected = !filterFromState.find(currentFilter => currentFilter.id === filterToHandle.id)\n      .selected;\n    state[this.filterType] = filterFromState;\n    state.currentTreks = handleFiltersAndSearch();\n  }\n\n  resetFilter() {\n    state[this.filterType].forEach(currentFilter => (currentFilter.selected = false));\n    forceUpdate(this.filterRef);\n  }\n\n  render() {\n    return (\n      <Host ref={el => (this.filterRef = el)}>\n        <div class=\"filter-name display-large\">{this.filterName}</div>\n        <div class=\"filter-button-container\">\n          {state[this.filterType].map(currentFilter => (\n            <button onClick={event => this.handleFilter(event, currentFilter)} class={currentFilter.selected ? 'selected-filter-button' : 'filter-button'}>\n              {currentFilter.selected && <span class=\"material-symbols material-symbols-outlined\">check</span>}\n              {currentFilter[this.filterNameProperty]}\n            </button>\n          ))}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"grw-filter.js","sourceRoot":"","sources":["../../../src/components/grw-filter/grw-filter.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC9E,OAAO,KAAK,MAAM,aAAa,CAAC;AAChC,OAAO,EAAE,OAAO,EAAE,sBAAsB,EAAE,MAAM,aAAa,CAAC;AAO9D,MAAM,OAAO,SAAS;;;;;;;EAOpB,aAAa;IACX,IAAI,CAAC,WAAW,EAAE,CAAC;EACrB,CAAC;EAED,YAAY,CAAC,MAAkB,EAAE,cAAmB;IAClD,MAAM,eAAe,GAAG,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC;IACpD,eAAe,CAAC,IAAI,CAAC,aAAa,CAAC,EAAE,CAAC,aAAa,CAAC,EAAE,KAAK,cAAc,CAAC,EAAE,CAAC,CAAC,QAAQ,GAAG,CAAC,eAAe,CAAC,IAAI,CAAC,aAAa,CAAC,EAAE,CAAC,aAAa,CAAC,EAAE,KAAK,cAAc,CAAC,EAAE,CAAC;OACpK,QAAQ,CAAC;IACZ,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,GAAG,eAAe,CAAC;IAEzC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;IACxB,OAAO;OACJ,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,OAAO,KAAK,IAAI,CAAC,OAAO,CAAC;OACjD,OAAO,CAAC,MAAM,CAAC,EAAE;MAChB,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC;IACzF,CAAC,CAAC,CAAC;IAEL,KAAK,CAAC,YAAY,GAAG,sBAAsB,EAAE,CAAC;EAChD,CAAC;EAED,WAAW;IACT,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;EAC9B,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC;MACpC,WAAK,KAAK,EAAC,2BAA2B,IAAE,IAAI,CAAC,UAAU,CAAO;MAC9D,WAAK,KAAK,EAAC,yBAAyB,IACjC,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,aAAa,CAAC,EAAE,CAAC,CAC3C,cAAQ,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,aAAa,CAAC,EAAE,KAAK,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,eAAe;QAC1I,aAAa,CAAC,QAAQ,IAAI,YAAM,KAAK,EAAC,4CAA4C,YAAa;QAC/F,aAAa,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAChC,CACV,CAAC,CACE,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, Listen, forceUpdate } from '@stencil/core';\nimport state from 'store/store';\nimport { filters, handleFiltersAndSearch } from 'utils/utils';\n\n@Component({\n  tag: 'grw-filter',\n  styleUrl: 'grw-filter.scss',\n  shadow: true,\n})\nexport class GrwFilter {\n  filterRef: HTMLElement;\n  @Prop() filterType: string;\n  @Prop() filterName: string;\n  @Prop() filterNameProperty: string;\n  @Prop() segment: string;\n  @Listen('resetFilter', { target: 'window' })\n  onResetFilter() {\n    this.resetFilter();\n  }\n\n  handleFilter(_event: MouseEvent, filterToHandle: any) {\n    const filterFromState = [...state[this.filterType]];\n    filterFromState.find(currentFilter => currentFilter.id === filterToHandle.id).selected = !filterFromState.find(currentFilter => currentFilter.id === filterToHandle.id)\n      .selected;\n    state[this.filterType] = filterFromState;\n\n    state[this.segment] = 0;\n    filters\n      .filter(filter => filter.segment === this.segment)\n      .forEach(filter => {\n        state[this.segment] += state[filter.property].filter(filter => filter.selected).length;\n      });\n\n    state.currentTreks = handleFiltersAndSearch();\n  }\n\n  resetFilter() {\n    forceUpdate(this.filterRef);\n  }\n\n  render() {\n    return (\n      <Host ref={el => (this.filterRef = el)}>\n        <div class=\"filter-name display-large\">{this.filterName}</div>\n        <div class=\"filter-button-container\">\n          {state[this.filterType].map(currentFilter => (\n            <button onClick={event => this.handleFilter(event, currentFilter)} class={currentFilter.selected ? 'selected-filter-button' : 'filter-button'}>\n              {currentFilter.selected && <span class=\"material-symbols material-symbols-outlined\">check</span>}\n              {currentFilter[this.filterNameProperty]}\n            </button>\n          ))}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1119,6 +1119,21 @@ svg.leaflet-image-layer.leaflet-interactive path {
   text-align: center;
 }
 
+.leaflet-cluster-anim .leaflet-marker-icon, .leaflet-cluster-anim .leaflet-marker-shadow {
+  -webkit-transition: -webkit-transform 0.3s ease-out, opacity 0.3s ease-in;
+  -moz-transition: -moz-transform 0.3s ease-out, opacity 0.3s ease-in;
+  -o-transition: -o-transform 0.3s ease-out, opacity 0.3s ease-in;
+  transition: transform 0.3s ease-out, opacity 0.3s ease-in;
+}
+
+.leaflet-cluster-spider-leg {
+  /* stroke-dashoffset (duration and function) should match with leaflet-marker-icon transform in order to track it exactly */
+  -webkit-transition: -webkit-stroke-dashoffset 0.3s ease-out, -webkit-stroke-opacity 0.3s ease-in;
+  -moz-transition: -moz-stroke-dashoffset 0.3s ease-out, -moz-stroke-opacity 0.3s ease-in;
+  -o-transition: -o-stroke-dashoffset 0.3s ease-out, -o-stroke-opacity 0.3s ease-in;
+  transition: stroke-dashoffset 0.3s ease-out, stroke-opacity 0.3s ease-in;
+}
+
 .material-symbols-outlined {
   font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 48;
 }
@@ -1196,15 +1211,42 @@ svg.leaflet-image-layer.leaflet-interactive path {
   display: none;
 }
 
-.trek-marker {
+.treks-marker-cluster-group-icon {
   background-color: var(--color-primary-app);
   border-radius: 50%;
   display: flex;
   justify-content: center;
   align-items: center;
+  color: var(--color-on-primary);
+  font-size: 16px;
 }
-.trek-marker img {
-  width: 36px !important;
+
+.trek-marker div,
+.selected-trek-marker div {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50% 50% 50% 0;
+  border: 2px solid #ffffff;
+  width: 32px;
+  height: 32px;
+  transform: rotate(-45deg);
+  background-color: var(--color-surface);
+}
+.trek-marker div img,
+.selected-trek-marker div img {
+  transform: rotate(45deg);
+  position: absolute;
+  z-index: 20;
+  width: 24px !important;
+}
+
+.selected-trek-marker div {
+  width: 64px;
+  height: 64px;
+}
+.selected-trek-marker div img {
+  width: 48px !important;
 }
 
 .map-loader-container {
@@ -1245,21 +1287,41 @@ svg.leaflet-image-layer.leaflet-interactive path {
   position: relative;
   display: flex;
   flex-direction: column;
-  width: 100px;
-  height: auto;
-  padding: 24px;
 }
 .trek-departure-popup img {
-  border-radius: 8px;
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
 }
 .trek-departure-popup .trek-name {
-  color: var(--color-primary-app);
   font-weight: 400;
   font-size: 16px;
   line-height: 24px;
+  padding: 8px;
 }
-.trek-departure-popup .trek-name-margin-top {
-  margin-top: 12px;
+.trek-departure-popup .trek-button {
+  margin: 0px 8px 8px 8px;
+  user-select: none;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background-color: var(--color-background);
+  color: var(--color-on-surface);
+  padding: 12px 24px;
+  border-radius: 20px;
+  box-sizing: border-box;
+  position: relative;
+  gap: 8px;
+  white-space: nowrap;
+  line-height: 20px;
+  letter-spacing: 0.1000000015px;
+  font-size: 14px;
+  font-weight: 500;
+  box-shadow: var(--elevation-1);
+  transition: box-shadow 0.2s ease-in-out 0s;
 }
 
 .poi-tooltip .poi-name,
@@ -1340,4 +1402,11 @@ svg.leaflet-image-layer.leaflet-interactive path {
   height: var(--map-bottom-space-height);
   width: 100%;
   background-color: var(--color-background);
+}
+
+.leaflet-popup-content-wrapper {
+  cursor: default;
+  padding: 0px;
+  background-color: var(--color-background);
+  box-shadow: var(--elevation-2);
 }

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

@@ -3,15 +3,19 @@ import L from 'leaflet';
 import 'leaflet-rotate';
 import 'leaflet.locatecontrol';
 import '@raruto/leaflet-elevation/dist/leaflet-elevation.min.js';
+import 'leaflet.markercluster/dist/leaflet.markercluster.js';
 import state, { onChange, reset } from 'store/store';
 import { translate } from 'i18n/i18n';
+import { getTrekGeometry } from 'services/treks.service';
 export class GrwMap {
   constructor() {
     this.userLayersState = {};
+    this.tileLayer = [];
     this.handleTreksWithinBoundsBind = this.handleTreksWithinBounds.bind(this);
     this.mapIsReady = false;
+    this.nameLayer = undefined;
     this.urlLayer = undefined;
-    this.attribution = undefined;
+    this.attributionLayer = undefined;
     this.center = '1, 1';
     this.zoom = 10;
     this.colorPrimaryApp = '#6b0030';
@@ -54,6 +58,22 @@ export class GrwMap {
       this.handleLayerVisibility(event.detail, this.currentPoisLayer);
     }
   }
+  onCardTrekMouseOver(event) {
+    if (!state.selectedTrekId || state.selectedTrekId !== event.detail) {
+      state.selectedTrekId = event.detail;
+      this.hideTrekLine();
+      this.showTrekLine(event.detail);
+      this.addSelectedCurrentTrek(event.detail);
+    }
+  }
+  oncardTrekMouseLeave() {
+    if (!this.trekPopupIsOpen) {
+      this.trekPopupIsOpen = false;
+      state.selectedTrekId = null;
+      this.hideTrekLine();
+      this.removeSelectedCurrentTrek();
+    }
+  }
   componentDidLoad() {
     this.map = L.map(this.mapRef, {
       center: this.center.split(',').map(Number),
@@ -61,10 +81,42 @@ export class GrwMap {
     });
     L.control.scale({ metric: true, imperial: false }).addTo(this.map);
     L.control.locate({ showPopup: false }).addTo(this.map);
-    L.tileLayer(this.urlLayer, {
-      maxZoom: 19,
-      attribution: this.attribution,
-    }).addTo(this.map);
+    const nameLayers = this.nameLayer.split(',');
+    const urlLayers = this.urlLayer.split(',http').map((url, index) => (index === 0 ? url : 'http' + url));
+    const attributionLayers = this.attributionLayer.split(',');
+    urlLayers.forEach((urlLayer, index) => {
+      this.tileLayer.push({
+        key: `${nameLayers[index]}`,
+        value: L.tileLayer(urlLayer, {
+          maxZoom: 19,
+          attribution: `${attributionLayers[index] && attributionLayers[index] !== '' ? attributionLayers[index].concat(' | ') : ''}Powered by <a target="_blank" href="https://geotrek.fr/">Geotrek</a>`,
+        }),
+      });
+    });
+    this.tileLayer[0].value.addTo(this.map);
+    if (urlLayers.length > 1) {
+      this.layersControl = L.control
+        .layers(this.tileLayer.reduce((tileLayers, tileLayer) => Object.assign(tileLayers, { [tileLayer.key]: tileLayer.value }), {}), {}, { collapsed: true })
+        .addTo(this.map);
+      L.Control.Contract = L.Control.extend({
+        onAdd: () => {
+          const contractContainer = L.DomUtil.create('div');
+          contractContainer.className = 'leaflet-bar leaflet-control';
+          const contract = contractContainer.appendChild(L.DomUtil.create('a'));
+          contract.href = '#';
+          contract.style.backgroundImage = `var(--contract-image-src)`;
+          contractContainer.onclick = e => {
+            this.bounds && this.map.fitBounds(this.bounds);
+            e.preventDefault();
+          };
+          return contractContainer;
+        },
+      });
+      L.control.contract = opts => {
+        return new L.Control.Contract(opts);
+      };
+      L.control.contract({ position: 'topleft' }).addTo(this.map);
+    }
     if (state.currentTrek) {
       this.addTrek();
     }
@@ -135,9 +187,10 @@ export class GrwMap {
       this.treksLayer = L.geoJSON(treksFeatureCollection, {
         pointToLayer: (geoJsonPoint, latlng) => L.marker(latlng, {
           icon: L.divIcon({
-            html: geoJsonPoint.properties.practice ? `<img src=${geoJsonPoint.properties.practice} />` : `<img />`,
+            html: geoJsonPoint.properties.practice ? `<div><img src=${geoJsonPoint.properties.practice} /><img/></div>` : `<div/></div>`,
             className: 'trek-marker',
-            iconSize: 48,
+            iconSize: 32,
+            iconAnchor: [18, 0],
           }),
           autoPanOnFocus: false,
         }),
@@ -145,21 +198,38 @@ export class GrwMap {
           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);
             }
+            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.hideTrekLine();
+            this.showTrekLine(geoJsonPoint.properties.id);
+            this.addSelectedCurrentTrek(geoJsonPoint.properties.id, e.latlng);
+          });
         },
-      }).addTo(this.map);
+      });
+      this.treksMarkerClusterGroup = L.markerClusterGroup({
+        showCoverageOnHover: false,
+        removeOutsideVisibleBounds: false,
+        iconCreateFunction: cluster => {
+          return L.divIcon({ html: '<div>' + cluster.getChildCount() + '</div>', className: 'treks-marker-cluster-group-icon', iconSize: 48, iconAnchor: [24, 24] });
+        },
+      });
+      this.treksMarkerClusterGroup.addLayer(this.treksLayer);
+      this.map.addLayer(this.treksMarkerClusterGroup);
     }
     else {
       if (trekscurrentDepartureCoordinates.length > 0) {
@@ -170,6 +240,8 @@ export class GrwMap {
       }
       this.treksLayer.clearLayers();
       this.treksLayer.addData(treksFeatureCollection);
+      this.treksMarkerClusterGroup.clearLayers();
+      this.treksMarkerClusterGroup.addLayer(this.treksLayer);
     }
     this.bounds && this.map.fitBounds(this.bounds);
     !this.mapIsReady && (this.mapIsReady = !this.mapIsReady);
@@ -178,8 +250,9 @@ export class GrwMap {
   removeTreks() {
     if (this.treksLayer) {
       state.currentMapTreksBounds = this.map.getBounds();
-      this.map.removeLayer(this.treksLayer);
+      this.map.removeLayer(this.treksMarkerClusterGroup);
       this.treksLayer = null;
+      this.treksMarkerClusterGroup = null;
       this.map.off('moveend', this.handleTreksWithinBoundsBind);
     }
   }
@@ -191,6 +264,10 @@ export class GrwMap {
   }
   addTrek() {
     var _a;
+    this.trekPopupIsOpen = false;
+    state.selectedTrekId = null;
+    this.hideTrekLine();
+    this.removeSelectedCurrentTrek();
     const currentTrekFeature = {
       type: 'Feature',
       geometry: state.currentTrek.geometry,
@@ -406,24 +483,120 @@ export class GrwMap {
     if (this.currentPoisLayer) {
       overlays[translate[state.language].layers.pois] = this.currentPoisLayer;
     }
-    this.layersControl = L.control.layers(null, overlays, { collapsed: true }).addTo(this.map);
+    if (this.layersControl) {
+      Object.keys(overlays).forEach(key => {
+        this.layersControl.addOverlay(overlays[key], key);
+      });
+    }
+    else {
+      this.layersControl = L.control.layers({}, overlays, { collapsed: true }).addTo(this.map);
+    }
     this.handleLayersControlEvent();
     this.bounds = L.latLngBounds(state.currentTrek.geometry.coordinates.map(coordinate => [coordinate[1], coordinate[0]]));
     this.bounds && this.map.fitBounds(this.bounds);
     !this.mapIsReady && (this.mapIsReady = !this.mapIsReady);
   }
+  addSelectedCurrentTrek(id, customCoordinates) {
+    var _a;
+    const treksFeatureCollection = {
+      type: 'FeatureCollection',
+      features: [],
+    };
+    if (state.currentTreks) {
+      const trek = state.currentTreks.find(trek => trek.id === id);
+      treksFeatureCollection.features.push({
+        type: 'Feature',
+        geometry: { type: 'Point', coordinates: customCoordinates ? [customCoordinates.lng, customCoordinates.lat] : trek.departure_geom },
+        properties: {
+          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].thumbnail,
+        },
+      });
+    }
+    this.removeSelectedCurrentTrek();
+    state.selectedTrekId = id;
+    this.selectedCurrentTrekLayer = L.geoJSON(treksFeatureCollection, {
+      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>`,
+          className: 'selected-trek-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.trekPopupIsOpen) {
+            state.selectedTrekId = null;
+            this.hideTrekLine();
+            this.removeSelectedCurrentTrek();
+          }
+        });
+        layer.on('popupopen', () => {
+          this.trekPopupIsOpen = Boolean(state.selectedTrekId);
+        });
+        layer.on('popupclose', () => {
+          if (state.selectedTrekId) {
+            this.trekPopupIsOpen = false;
+            state.selectedTrekId = null;
+            this.hideTrekLine();
+            this.removeSelectedCurrentTrek();
+          }
+        });
+      },
+    }).addTo(this.map);
+  }
+  removeSelectedCurrentTrek() {
+    state.selectedTrekId = null;
+    this.selectedCurrentTrekLayer && this.map.removeLayer(this.selectedCurrentTrekLayer);
+    this.selectedCurrentTrekLayer = null;
+  }
   handleLayersControlEvent() {
     const userLayersState = this.layersControl._layerControlInputs;
     userLayersState.forEach((userLayerState) => {
-      userLayerState.onchange = event => {
-        this.userLayersState[userLayerState.layerId] = event.target.checked;
-      };
+      if (this.layersControl._layers.find(layer => layer.layer._leaflet_id === userLayerState.layerId).overlay) {
+        userLayerState.onchange = event => {
+          this.userLayersState[userLayerState.layerId] = event.target.checked;
+        };
+      }
     });
   }
   removeTrek() {
     if (this.layersControl) {
-      this.map.removeControl(this.layersControl);
-      this.layersControl = null;
+      if (!this.layersControl._layers.some(layer => !layer.overlay)) {
+        this.map.removeControl(this.layersControl);
+        this.layersControl = null;
+      }
+      else {
+        this.layersControl._layers
+          .filter(layer => layer.overlay)
+          .forEach(layer => {
+          this.layersControl.removeLayer(layer.layer);
+        });
+      }
     }
     if (this.elevationControl) {
       this.elevationControl.clear();
@@ -460,8 +633,30 @@ export class GrwMap {
       reset();
     }
   }
+  showTrekLine(id) {
+    getTrekGeometry(id).then(response => {
+      const currentTrekFeature = {
+        type: 'Feature',
+        geometry: response.geometry,
+        properties: {},
+      };
+      this.currentTrekLayer = L.geoJSON(currentTrekFeature, {
+        style: () => ({
+          color: this.colorTrekLine,
+        }),
+        interactive: false,
+      }).addTo(this.map);
+    });
+  }
+  hideTrekLine() {
+    if (this.currentTrekLayer) {
+      this.map.removeLayer(this.currentTrekLayer);
+      this.currentTrekLayer = null;
+    }
+  }
   render() {
     const layersImageSrc = getAssetPath(`${Build.isDev ? '/' : ''}assets/layers.svg`);
+    const contractImageSrc = getAssetPath(`${Build.isDev ? '/' : ''}assets/contract.svg`);
     return (h(Host, { style: {
         '--color-primary-app': this.colorPrimaryApp,
         '--color-on-surface': this.colorOnSurface,
@@ -471,6 +666,7 @@ export class GrwMap {
         '--color-poi-icon': this.colorPoiIcon,
         '--color-trek-line': this.colorTrekLine,
         '--layers-image-src': `url(${layersImageSrc})`,
+        '--contract-image-src': `url(${contractImageSrc})`,
         '--map-bottom-space-height': this.isLargeView ? '0px' : '70px',
       } }, h("div", { id: "map", style: {}, class: state.currentTrek ? 'trek-map' : 'treks-map', ref: el => (this.mapRef = el) }), state.currentTrek && (h("div", null, h("div", { id: "elevation", ref: el => (this.elevationRef = el) }), h("div", { class: "map-bottom-space" }))), !this.mapIsReady && (h("div", { class: "map-loader-container" }, h("span", { class: "loader" })))));
   }
@@ -487,6 +683,23 @@ export class GrwMap {
   }
   static get properties() {
     return {
+      "nameLayer": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "name-layer",
+        "reflect": false
+      },
       "urlLayer": {
         "type": "string",
         "mutable": false,
@@ -504,7 +717,7 @@ export class GrwMap {
         "attribute": "url-layer",
         "reflect": false
       },
-      "attribution": {
+      "attributionLayer": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -518,7 +731,7 @@ export class GrwMap {
           "tags": [],
           "text": ""
         },
-        "attribute": "attribution",
+        "attribute": "attribution-layer",
         "reflect": false
       },
       "center": {
@@ -817,6 +1030,18 @@ export class GrwMap {
         "target": "window",
         "capture": false,
         "passive": false
+      }, {
+        "name": "cardTrekMouseOver",
+        "method": "onCardTrekMouseOver",
+        "target": "window",
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "cardTrekMouseLeave",
+        "method": "oncardTrekMouseLeave",
+        "target": "window",
+        "capture": false,
+        "passive": false
       }];
   }
 }