@geotrekce/geotrek-rando-widget 0.0.2 → 0.0.5

package/dist/components/grw-map2.js

@@ -1,4 +1,4 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { s as state, o as onChange } from './store.js';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
@@ -14142,26 +14142,30 @@ var leafletSrc = createCommonjsModule(function (module, exports) {
 
 const departureArrivalImage = `<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><path d="M80,464V68.14a8,8,0,0,1,4-6.9C91.81,56.66,112.92,48,160,48c64,0,145,48,192,48a199.53,199.53,0,0,0,77.23-15.77A2,2,0,0,1,432,82.08V301.44a4,4,0,0,1-2.39,3.65C421.37,308.7,392.33,320,352,320c-48,0-128-32-192-32s-80,16-80,16" style=";fill:#ffffff;stroke:currentColor;stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px"/></svg>`;
 
-const grwMapCss = ".leaflet-pane,.leaflet-tile,.leaflet-marker-icon,.leaflet-marker-shadow,.leaflet-tile-container,.leaflet-pane>svg,.leaflet-pane>canvas,.leaflet-zoom-box,.leaflet-image-layer,.leaflet-layer{position:absolute;left:0;top:0}.leaflet-container{overflow:hidden}.leaflet-tile,.leaflet-marker-icon,.leaflet-marker-shadow{-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-user-drag:none}.leaflet-tile::selection{background:transparent}.leaflet-safari .leaflet-tile{image-rendering:-webkit-optimize-contrast}.leaflet-safari .leaflet-tile-container{width:1600px;height:1600px;-webkit-transform-origin:0 0}.leaflet-marker-icon,.leaflet-marker-shadow{display:block}.leaflet-container .leaflet-overlay-pane svg{max-width:none !important;max-height:none !important}.leaflet-container .leaflet-marker-pane img,.leaflet-container .leaflet-shadow-pane img,.leaflet-container .leaflet-tile-pane img,.leaflet-container img.leaflet-image-layer,.leaflet-container .leaflet-tile{max-width:none !important;max-height:none !important;width:auto;padding:0}.leaflet-container.leaflet-touch-zoom{-ms-touch-action:pan-x pan-y;touch-action:pan-x pan-y}.leaflet-container.leaflet-touch-drag{-ms-touch-action:pinch-zoom;touch-action:none;touch-action:pinch-zoom}.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom{-ms-touch-action:none;touch-action:none}.leaflet-container{-webkit-tap-highlight-color:transparent}.leaflet-container a{-webkit-tap-highlight-color:rgba(51, 181, 229, 0.4)}.leaflet-tile{filter:inherit;visibility:hidden}.leaflet-tile-loaded{visibility:inherit}.leaflet-zoom-box{width:0;height:0;-moz-box-sizing:border-box;box-sizing:border-box;z-index:800}.leaflet-overlay-pane svg{-moz-user-select:none}.leaflet-pane{z-index:400}.leaflet-tile-pane{z-index:200}.leaflet-overlay-pane{z-index:400}.leaflet-shadow-pane{z-index:500}.leaflet-marker-pane{z-index:600}.leaflet-tooltip-pane{z-index:650}.leaflet-popup-pane{z-index:700}.leaflet-map-pane canvas{z-index:100}.leaflet-map-pane svg{z-index:200}.leaflet-vml-shape{width:1px;height:1px}.lvml{behavior:url(#default#VML);display:inline-block;position:absolute}.leaflet-control{position:relative;z-index:800;pointer-events:visiblePainted;pointer-events:auto}.leaflet-top,.leaflet-bottom{position:absolute;z-index:1000;pointer-events:none}.leaflet-top{top:0}.leaflet-right{right:0}.leaflet-bottom{bottom:0}.leaflet-left{left:0}.leaflet-control{float:left;clear:both}.leaflet-right .leaflet-control{float:right}.leaflet-top .leaflet-control{margin-top:10px}.leaflet-bottom .leaflet-control{margin-bottom:10px}.leaflet-left .leaflet-control{margin-left:10px}.leaflet-right .leaflet-control{margin-right:10px}.leaflet-fade-anim .leaflet-popup{opacity:0;-webkit-transition:opacity 0.2s linear;-moz-transition:opacity 0.2s linear;transition:opacity 0.2s linear}.leaflet-fade-anim .leaflet-map-pane .leaflet-popup{opacity:1}.leaflet-zoom-animated{-webkit-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0}svg.leaflet-zoom-animated{will-change:transform}.leaflet-zoom-anim .leaflet-zoom-animated{-webkit-transition:-webkit-transform 0.25s cubic-bezier(0,0,0.25,1);-moz-transition:-moz-transform 0.25s cubic-bezier(0,0,0.25,1);transition:transform 0.25s cubic-bezier(0,0,0.25,1)}.leaflet-zoom-anim .leaflet-tile,.leaflet-pan-anim .leaflet-tile{-webkit-transition:none;-moz-transition:none;transition:none}.leaflet-zoom-anim .leaflet-zoom-hide{visibility:hidden}.leaflet-interactive{cursor:pointer}.leaflet-grab{cursor:-webkit-grab;cursor:-moz-grab;cursor:grab}.leaflet-crosshair,.leaflet-crosshair .leaflet-interactive{cursor:crosshair}.leaflet-popup-pane,.leaflet-control{cursor:auto}.leaflet-dragging .leaflet-grab,.leaflet-dragging .leaflet-grab .leaflet-interactive,.leaflet-dragging .leaflet-marker-draggable{cursor:move;cursor:-webkit-grabbing;cursor:-moz-grabbing;cursor:grabbing}.leaflet-marker-icon,.leaflet-marker-shadow,.leaflet-image-layer,.leaflet-pane>svg path,.leaflet-tile-container{pointer-events:none}.leaflet-marker-icon.leaflet-interactive,.leaflet-image-layer.leaflet-interactive,.leaflet-pane>svg path.leaflet-interactive,svg.leaflet-image-layer.leaflet-interactive path{pointer-events:visiblePainted;pointer-events:auto}.leaflet-container{background:#ddd;outline-offset:1px}.leaflet-container a{color:#0078A8}.leaflet-zoom-box{border:2px dotted #38f;background:rgba(255,255,255,0.5)}.leaflet-container{font-family:\"Helvetica Neue\", Arial, Helvetica, sans-serif;font-size:12px;font-size:0.75rem;line-height:1.5}.leaflet-bar{box-shadow:0 1px 5px rgba(0,0,0,0.65);border-radius:4px}.leaflet-bar a{background-color:#fff;border-bottom:1px solid #ccc;width:26px;height:26px;line-height:26px;display:block;text-align:center;text-decoration:none;color:black}.leaflet-bar a,.leaflet-control-layers-toggle{background-position:50% 50%;background-repeat:no-repeat;display:block}.leaflet-bar a:hover,.leaflet-bar a:focus{background-color:#f4f4f4}.leaflet-bar a:first-child{border-top-left-radius:4px;border-top-right-radius:4px}.leaflet-bar a:last-child{border-bottom-left-radius:4px;border-bottom-right-radius:4px;border-bottom:none}.leaflet-bar a.leaflet-disabled{cursor:default;background-color:#f4f4f4;color:#bbb}.leaflet-touch .leaflet-bar a{width:30px;height:30px;line-height:30px}.leaflet-touch .leaflet-bar a:first-child{border-top-left-radius:2px;border-top-right-radius:2px}.leaflet-touch .leaflet-bar a:last-child{border-bottom-left-radius:2px;border-bottom-right-radius:2px}.leaflet-control-zoom-in,.leaflet-control-zoom-out{font:bold 18px 'Lucida Console', Monaco, monospace;text-indent:1px}.leaflet-touch .leaflet-control-zoom-in,.leaflet-touch .leaflet-control-zoom-out{font-size:22px}.leaflet-control-layers{box-shadow:0 1px 5px rgba(0,0,0,0.4);background:#fff;border-radius:5px}.leaflet-control-layers-toggle{background-image:url(images/layers.png);width:36px;height:36px}.leaflet-retina .leaflet-control-layers-toggle{background-image:url(images/layers-2x.png);background-size:26px 26px}.leaflet-touch .leaflet-control-layers-toggle{width:44px;height:44px}.leaflet-control-layers .leaflet-control-layers-list,.leaflet-control-layers-expanded .leaflet-control-layers-toggle{display:none}.leaflet-control-layers-expanded .leaflet-control-layers-list{display:block;position:relative}.leaflet-control-layers-expanded{padding:6px 10px 6px 6px;color:#333;background:#fff}.leaflet-control-layers-scrollbar{overflow-y:scroll;overflow-x:hidden;padding-right:5px}.leaflet-control-layers-selector{margin-top:2px;position:relative;top:1px}.leaflet-control-layers label{display:block;font-size:13px;font-size:1.08333em}.leaflet-control-layers-separator{height:0;border-top:1px solid #ddd;margin:5px -10px 5px -6px}.leaflet-default-icon-path{background-image:url(images/marker-icon.png)}.leaflet-container .leaflet-control-attribution{background:#fff;background:rgba(255, 255, 255, 0.8);margin:0}.leaflet-control-attribution,.leaflet-control-scale-line{padding:0 5px;color:#333;line-height:1.4}.leaflet-control-attribution a{text-decoration:none}.leaflet-control-attribution a:hover,.leaflet-control-attribution a:focus{text-decoration:underline}.leaflet-control-attribution svg{display:inline !important}.leaflet-left .leaflet-control-scale{margin-left:5px}.leaflet-bottom .leaflet-control-scale{margin-bottom:5px}.leaflet-control-scale-line{border:2px solid #777;border-top:none;line-height:1.1;padding:2px 5px 1px;white-space:nowrap;overflow:hidden;-moz-box-sizing:border-box;box-sizing:border-box;background:#fff;background:rgba(255, 255, 255, 0.5)}.leaflet-control-scale-line:not(:first-child){border-top:2px solid #777;border-bottom:none;margin-top:-2px}.leaflet-control-scale-line:not(:first-child):not(:last-child){border-bottom:2px solid #777}.leaflet-touch .leaflet-control-attribution,.leaflet-touch .leaflet-control-layers,.leaflet-touch .leaflet-bar{box-shadow:none}.leaflet-touch .leaflet-control-layers,.leaflet-touch .leaflet-bar{border:2px solid rgba(0,0,0,0.2);background-clip:padding-box}.leaflet-popup{position:absolute;text-align:center;margin-bottom:20px}.leaflet-popup-content-wrapper{padding:1px;text-align:left;border-radius:12px}.leaflet-popup-content{margin:13px 24px 13px 20px;line-height:1.3;font-size:13px;font-size:1.08333em;min-height:1px}.leaflet-popup-content p{margin:17px 0;margin:1.3em 0}.leaflet-popup-tip-container{width:40px;height:20px;position:absolute;left:50%;margin-top:-1px;margin-left:-20px;overflow:hidden;pointer-events:none}.leaflet-popup-tip{width:17px;height:17px;padding:1px;margin:-10px auto 0;pointer-events:auto;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:white;color:#333;box-shadow:0 3px 14px rgba(0,0,0,0.4)}.leaflet-container a.leaflet-popup-close-button{position:absolute;top:0;right:0;border:none;text-align:center;width:24px;height:24px;font:16px/24px Tahoma, Verdana, sans-serif;color:#757575;text-decoration:none;background:transparent}.leaflet-container a.leaflet-popup-close-button:hover,.leaflet-container a.leaflet-popup-close-button:focus{color:#585858}.leaflet-popup-scrolled{overflow:auto;border-bottom:1px solid #ddd;border-top:1px solid #ddd}.leaflet-oldie .leaflet-popup-content-wrapper{-ms-zoom:1}.leaflet-oldie .leaflet-popup-tip{width:24px;margin:0 auto;-ms-filter:\"progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)\";filter:progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)}.leaflet-oldie .leaflet-control-zoom,.leaflet-oldie .leaflet-control-layers,.leaflet-oldie .leaflet-popup-content-wrapper,.leaflet-oldie .leaflet-popup-tip{border:1px solid #999}.leaflet-div-icon{background:#fff;border:1px solid #666}.leaflet-tooltip{position:absolute;padding:6px;background-color:#fff;border:1px solid #fff;border-radius:3px;color:#222;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none;box-shadow:0 1px 3px rgba(0,0,0,0.4)}.leaflet-tooltip.leaflet-interactive{cursor:pointer;pointer-events:auto}.leaflet-tooltip-top:before,.leaflet-tooltip-bottom:before,.leaflet-tooltip-left:before,.leaflet-tooltip-right:before{position:absolute;pointer-events:none;border:6px solid transparent;background:transparent;content:\"\"}.leaflet-tooltip-bottom{margin-top:6px}.leaflet-tooltip-top{margin-top:-6px}.leaflet-tooltip-bottom:before,.leaflet-tooltip-top:before{left:50%;margin-left:-6px}.leaflet-tooltip-top:before{bottom:0;margin-bottom:-12px;border-top-color:#fff}.leaflet-tooltip-bottom:before{top:0;margin-top:-12px;margin-left:-6px;border-bottom-color:#fff}.leaflet-tooltip-left{margin-left:-6px}.leaflet-tooltip-right{margin-left:6px}.leaflet-tooltip-left:before,.leaflet-tooltip-right:before{top:50%;margin-top:-6px}.leaflet-tooltip-left:before{right:0;margin-right:-12px;border-left-color:#fff}.leaflet-tooltip-right:before{left:0;margin-left:-12px;border-right-color:#fff}@media print{.leaflet-control{-webkit-print-color-adjust:exact;color-adjust:exact}}grw-map{display:block;height:100%;max-height:100vh}.departure-icon svg,.arrival-icon svg{width:48px;height:48px}.departure-icon svg path,.arrival-icon svg path{fill:currentColor;stroke:currentColor}.departure-icon{color:var(--color-departure-icon)}.arrival-icon{color:var(--color-arrival-icon)}.trek-marker{background-color:var(--color-primary);border-radius:50%;display:flex;justify-content:center;align-items:center}.trek-marker img{width:36px !important}.map-loader-container{position:absolute;z-index:500;width:100%;height:100%;background:rgba(255, 255, 255, 0.5);display:flex;justify-content:center;align-items:center}.map-loader-container .loader{width:48px;height:48px;border:5px solid var(--color-primary-tint);border-bottom-color:var(--color-primary);border-radius:50%;display:inline-block;box-sizing:border-box;animation:rotation 1s linear infinite}@keyframes rotation{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}";
+const grwMapCss = ".leaflet-pane,.leaflet-tile,.leaflet-marker-icon,.leaflet-marker-shadow,.leaflet-tile-container,.leaflet-pane>svg,.leaflet-pane>canvas,.leaflet-zoom-box,.leaflet-image-layer,.leaflet-layer{position:absolute;left:0;top:0}.leaflet-container{overflow:hidden}.leaflet-tile,.leaflet-marker-icon,.leaflet-marker-shadow{-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-user-drag:none}.leaflet-tile::selection{background:transparent}.leaflet-safari .leaflet-tile{image-rendering:-webkit-optimize-contrast}.leaflet-safari .leaflet-tile-container{width:1600px;height:1600px;-webkit-transform-origin:0 0}.leaflet-marker-icon,.leaflet-marker-shadow{display:block}.leaflet-container .leaflet-overlay-pane svg{max-width:none !important;max-height:none !important}.leaflet-container .leaflet-marker-pane img,.leaflet-container .leaflet-shadow-pane img,.leaflet-container .leaflet-tile-pane img,.leaflet-container img.leaflet-image-layer,.leaflet-container .leaflet-tile{max-width:none !important;max-height:none !important;width:auto;padding:0}.leaflet-container.leaflet-touch-zoom{-ms-touch-action:pan-x pan-y;touch-action:pan-x pan-y}.leaflet-container.leaflet-touch-drag{-ms-touch-action:pinch-zoom;touch-action:none;touch-action:pinch-zoom}.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom{-ms-touch-action:none;touch-action:none}.leaflet-container{-webkit-tap-highlight-color:transparent}.leaflet-container a{-webkit-tap-highlight-color:rgba(51, 181, 229, 0.4)}.leaflet-tile{filter:inherit;visibility:hidden}.leaflet-tile-loaded{visibility:inherit}.leaflet-zoom-box{width:0;height:0;-moz-box-sizing:border-box;box-sizing:border-box;z-index:800}.leaflet-overlay-pane svg{-moz-user-select:none}.leaflet-pane{z-index:400}.leaflet-tile-pane{z-index:200}.leaflet-overlay-pane{z-index:400}.leaflet-shadow-pane{z-index:500}.leaflet-marker-pane{z-index:600}.leaflet-tooltip-pane{z-index:650}.leaflet-popup-pane{z-index:700}.leaflet-map-pane canvas{z-index:100}.leaflet-map-pane svg{z-index:200}.leaflet-vml-shape{width:1px;height:1px}.lvml{behavior:url(#default#VML);display:inline-block;position:absolute}.leaflet-control{position:relative;z-index:800;pointer-events:visiblePainted;pointer-events:auto}.leaflet-top,.leaflet-bottom{position:absolute;z-index:1000;pointer-events:none}.leaflet-top{top:0}.leaflet-right{right:0}.leaflet-bottom{bottom:0}.leaflet-left{left:0}.leaflet-control{float:left;clear:both}.leaflet-right .leaflet-control{float:right}.leaflet-top .leaflet-control{margin-top:10px}.leaflet-bottom .leaflet-control{margin-bottom:10px}.leaflet-left .leaflet-control{margin-left:10px}.leaflet-right .leaflet-control{margin-right:10px}.leaflet-fade-anim .leaflet-popup{opacity:0;-webkit-transition:opacity 0.2s linear;-moz-transition:opacity 0.2s linear;transition:opacity 0.2s linear}.leaflet-fade-anim .leaflet-map-pane .leaflet-popup{opacity:1}.leaflet-zoom-animated{-webkit-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0}svg.leaflet-zoom-animated{will-change:transform}.leaflet-zoom-anim .leaflet-zoom-animated{-webkit-transition:-webkit-transform 0.25s cubic-bezier(0,0,0.25,1);-moz-transition:-moz-transform 0.25s cubic-bezier(0,0,0.25,1);transition:transform 0.25s cubic-bezier(0,0,0.25,1)}.leaflet-zoom-anim .leaflet-tile,.leaflet-pan-anim .leaflet-tile{-webkit-transition:none;-moz-transition:none;transition:none}.leaflet-zoom-anim .leaflet-zoom-hide{visibility:hidden}.leaflet-interactive{cursor:pointer}.leaflet-grab{cursor:-webkit-grab;cursor:-moz-grab;cursor:grab}.leaflet-crosshair,.leaflet-crosshair .leaflet-interactive{cursor:crosshair}.leaflet-popup-pane,.leaflet-control{cursor:auto}.leaflet-dragging .leaflet-grab,.leaflet-dragging .leaflet-grab .leaflet-interactive,.leaflet-dragging .leaflet-marker-draggable{cursor:move;cursor:-webkit-grabbing;cursor:-moz-grabbing;cursor:grabbing}.leaflet-marker-icon,.leaflet-marker-shadow,.leaflet-image-layer,.leaflet-pane>svg path,.leaflet-tile-container{pointer-events:none}.leaflet-marker-icon.leaflet-interactive,.leaflet-image-layer.leaflet-interactive,.leaflet-pane>svg path.leaflet-interactive,svg.leaflet-image-layer.leaflet-interactive path{pointer-events:visiblePainted;pointer-events:auto}.leaflet-container{background:#ddd;outline-offset:1px}.leaflet-container a{color:#0078A8}.leaflet-zoom-box{border:2px dotted #38f;background:rgba(255,255,255,0.5)}.leaflet-container{font-family:\"Helvetica Neue\", Arial, Helvetica, sans-serif;font-size:12px;font-size:0.75rem;line-height:1.5}.leaflet-bar{box-shadow:0 1px 5px rgba(0,0,0,0.65);border-radius:4px}.leaflet-bar a{background-color:#fff;border-bottom:1px solid #ccc;width:26px;height:26px;line-height:26px;display:block;text-align:center;text-decoration:none;color:black}.leaflet-bar a,.leaflet-control-layers-toggle{background-position:50% 50%;background-repeat:no-repeat;display:block}.leaflet-bar a:hover,.leaflet-bar a:focus{background-color:#f4f4f4}.leaflet-bar a:first-child{border-top-left-radius:4px;border-top-right-radius:4px}.leaflet-bar a:last-child{border-bottom-left-radius:4px;border-bottom-right-radius:4px;border-bottom:none}.leaflet-bar a.leaflet-disabled{cursor:default;background-color:#f4f4f4;color:#bbb}.leaflet-touch .leaflet-bar a{width:30px;height:30px;line-height:30px}.leaflet-touch .leaflet-bar a:first-child{border-top-left-radius:2px;border-top-right-radius:2px}.leaflet-touch .leaflet-bar a:last-child{border-bottom-left-radius:2px;border-bottom-right-radius:2px}.leaflet-control-zoom-in,.leaflet-control-zoom-out{font:bold 18px 'Lucida Console', Monaco, monospace;text-indent:1px}.leaflet-touch .leaflet-control-zoom-in,.leaflet-touch .leaflet-control-zoom-out{font-size:22px}.leaflet-control-layers{box-shadow:0 1px 5px rgba(0,0,0,0.4);background:#fff;border-radius:5px}.leaflet-control-layers-toggle{background-image:url(images/layers.png);width:36px;height:36px}.leaflet-retina .leaflet-control-layers-toggle{background-image:url(images/layers-2x.png);background-size:26px 26px}.leaflet-touch .leaflet-control-layers-toggle{width:44px;height:44px}.leaflet-control-layers .leaflet-control-layers-list,.leaflet-control-layers-expanded .leaflet-control-layers-toggle{display:none}.leaflet-control-layers-expanded .leaflet-control-layers-list{display:block;position:relative}.leaflet-control-layers-expanded{padding:6px 10px 6px 6px;color:#333;background:#fff}.leaflet-control-layers-scrollbar{overflow-y:scroll;overflow-x:hidden;padding-right:5px}.leaflet-control-layers-selector{margin-top:2px;position:relative;top:1px}.leaflet-control-layers label{display:block;font-size:13px;font-size:1.08333em}.leaflet-control-layers-separator{height:0;border-top:1px solid #ddd;margin:5px -10px 5px -6px}.leaflet-default-icon-path{background-image:url(images/marker-icon.png)}.leaflet-container .leaflet-control-attribution{background:#fff;background:rgba(255, 255, 255, 0.8);margin:0}.leaflet-control-attribution,.leaflet-control-scale-line{padding:0 5px;color:#333;line-height:1.4}.leaflet-control-attribution a{text-decoration:none}.leaflet-control-attribution a:hover,.leaflet-control-attribution a:focus{text-decoration:underline}.leaflet-control-attribution svg{display:inline !important}.leaflet-left .leaflet-control-scale{margin-left:5px}.leaflet-bottom .leaflet-control-scale{margin-bottom:5px}.leaflet-control-scale-line{border:2px solid #777;border-top:none;line-height:1.1;padding:2px 5px 1px;white-space:nowrap;overflow:hidden;-moz-box-sizing:border-box;box-sizing:border-box;background:#fff;background:rgba(255, 255, 255, 0.5)}.leaflet-control-scale-line:not(:first-child){border-top:2px solid #777;border-bottom:none;margin-top:-2px}.leaflet-control-scale-line:not(:first-child):not(:last-child){border-bottom:2px solid #777}.leaflet-touch .leaflet-control-attribution,.leaflet-touch .leaflet-control-layers,.leaflet-touch .leaflet-bar{box-shadow:none}.leaflet-touch .leaflet-control-layers,.leaflet-touch .leaflet-bar{border:2px solid rgba(0,0,0,0.2);background-clip:padding-box}.leaflet-popup{position:absolute;text-align:center;margin-bottom:20px}.leaflet-popup-content-wrapper{padding:1px;text-align:left;border-radius:12px}.leaflet-popup-content{margin:13px 24px 13px 20px;line-height:1.3;font-size:13px;font-size:1.08333em;min-height:1px}.leaflet-popup-content p{margin:17px 0;margin:1.3em 0}.leaflet-popup-tip-container{width:40px;height:20px;position:absolute;left:50%;margin-top:-1px;margin-left:-20px;overflow:hidden;pointer-events:none}.leaflet-popup-tip{width:17px;height:17px;padding:1px;margin:-10px auto 0;pointer-events:auto;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:white;color:#333;box-shadow:0 3px 14px rgba(0,0,0,0.4)}.leaflet-container a.leaflet-popup-close-button{position:absolute;top:0;right:0;border:none;text-align:center;width:24px;height:24px;font:16px/24px Tahoma, Verdana, sans-serif;color:#757575;text-decoration:none;background:transparent}.leaflet-container a.leaflet-popup-close-button:hover,.leaflet-container a.leaflet-popup-close-button:focus{color:#585858}.leaflet-popup-scrolled{overflow:auto;border-bottom:1px solid #ddd;border-top:1px solid #ddd}.leaflet-oldie .leaflet-popup-content-wrapper{-ms-zoom:1}.leaflet-oldie .leaflet-popup-tip{width:24px;margin:0 auto;-ms-filter:\"progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)\";filter:progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)}.leaflet-oldie .leaflet-control-zoom,.leaflet-oldie .leaflet-control-layers,.leaflet-oldie .leaflet-popup-content-wrapper,.leaflet-oldie .leaflet-popup-tip{border:1px solid #999}.leaflet-div-icon{background:#fff;border:1px solid #666}.leaflet-tooltip{position:absolute;padding:6px;background-color:#fff;border:1px solid #fff;border-radius:3px;color:#222;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none;box-shadow:0 1px 3px rgba(0,0,0,0.4)}.leaflet-tooltip.leaflet-interactive{cursor:pointer;pointer-events:auto}.leaflet-tooltip-top:before,.leaflet-tooltip-bottom:before,.leaflet-tooltip-left:before,.leaflet-tooltip-right:before{position:absolute;pointer-events:none;border:6px solid transparent;background:transparent;content:\"\"}.leaflet-tooltip-bottom{margin-top:6px}.leaflet-tooltip-top{margin-top:-6px}.leaflet-tooltip-bottom:before,.leaflet-tooltip-top:before{left:50%;margin-left:-6px}.leaflet-tooltip-top:before{bottom:0;margin-bottom:-12px;border-top-color:#fff}.leaflet-tooltip-bottom:before{top:0;margin-top:-12px;margin-left:-6px;border-bottom-color:#fff}.leaflet-tooltip-left{margin-left:-6px}.leaflet-tooltip-right{margin-left:6px}.leaflet-tooltip-left:before,.leaflet-tooltip-right:before{top:50%;margin-top:-6px}.leaflet-tooltip-left:before{right:0;margin-right:-12px;border-left-color:#fff}.leaflet-tooltip-right:before{left:0;margin-left:-12px;border-right-color:#fff}@media print{.leaflet-control{-webkit-print-color-adjust:exact;color-adjust:exact}}grw-map{font-family:\"Roboto\";display:block;height:100%;max-height:100vh}.departure-icon svg,.arrival-icon svg{width:48px;height:48px}.departure-icon svg path,.arrival-icon svg path{fill:currentColor;stroke:currentColor}.departure-icon{color:var(--color-departure-icon)}.arrival-icon{color:var(--color-arrival-icon)}.trek-marker{background-color:var(--color-primary);border-radius:50%;display:flex;justify-content:center;align-items:center}.trek-marker img{width:36px !important}.map-loader-container{position:absolute;z-index:500;width:100%;height:100%;background:rgba(255, 255, 255, 0.5);display:flex;justify-content:center;align-items:center}.map-loader-container .loader{width:48px;height:48px;border:5px solid var(--color-primary-tint);border-bottom-color:var(--color-primary);border-radius:50%;display:inline-block;box-sizing:border-box;animation:rotation 1s linear infinite}@keyframes rotation{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.leaflet-popup-content{width:144px;margin:0}.trek-departure-popup{position:relative;display:flex;flex-direction:column;width:100px;height:auto;padding:24px}.trek-departure-popup img{border-radius:8px;box-shadow:4px 8px 24px rgba(0, 0, 0, 0.25)}.trek-departure-popup .trek-name{color:var(--color-primary);font-weight:bold;font-size:12px}.trek-departure-popup .trek-name-margin-top{margin-top:12px}.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 .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}.sensitiveAreasCheckboxContainer{display:flex;justify-content:center;align-items:center;background-color:#ffffff;padding:8px;border-radius:8px;user-select:none}.sensitiveAreasCheckboxContainer input,.sensitiveAreasCheckboxContainer label{cursor:pointer}.sensitiveAreasCheckboxContainer input{margin:0}.sensitiveAreasCheckboxContainer label{padding-left:8px}.poi-icon,.information-desks-icon{background-color:var(--color-poi-icon);border-radius:50%;display:flex;justify-content:center;align-items:center}.poi-icon img,.information-desks-icon img{width:36px !important}.parking-icon{background-color:#0000ff;border-radius:50%;display:flex;justify-content:center;align-items:center;width:48px;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}";
 
 const GrwMap = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
+    this.trekCardPress = createEvent(this, "trekCardPress", 7);
     this.mapIsReady = false;
     this.center = '1, 1';
     this.zoom = 10;
+    this.colorPrimary = '#6b0030';
+    this.colorPrimaryTint = '#974c6e';
     this.colorTrekLine = '#6b0030';
     this.colorDepartureIcon = '#006b3b';
     this.colorArrivalIcon = '#85003b';
-    this.colorPrimary = '#6b0030';
-    this.colorPrimaryTint = '#d2b2c0';
+    this.colorSensitiveArea = '	#4974a5';
+    this.colorPoiIcon = '#974c6e';
   }
   componentDidLoad() {
     this.map = leafletSrc.map(this.element, {
       center: this.center.split(',').map(Number),
       zoom: this.zoom,
     });
+    leafletSrc.control.scale().addTo(this.map);
     leafletSrc.tileLayer(this.urlLayer, {
       maxZoom: 19,
       attribution: this.attribution,
@@ -14172,11 +14176,11 @@ const GrwMap = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     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();
       }
     });
@@ -14193,34 +14197,63 @@ const GrwMap = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   addTreks() {
     var _a;
-    const treksDepartureCoordinates = [];
+    const trekscurrentDepartureCoordinates = [];
     const treksFeatureCollection = {
       type: 'FeatureCollection',
       features: [],
     };
-    for (const trek of state.treks) {
-      treksDepartureCoordinates.push(trek.departure_geom);
+    for (const trek of state.currentTreks) {
+      trekscurrentDepartureCoordinates.push(trek.departure_geom);
       treksFeatureCollection.features.push({
         type: 'Feature',
-        properties: { practice: (_a = state.practices.find(practice => practice.id === trek.practice)) === null || _a === void 0 ? void 0 : _a.pictogram },
         geometry: { type: 'Point', coordinates: 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,
+        },
       });
     }
-    if (treksDepartureCoordinates.length > 0) {
-      const bounds = leafletSrc.latLngBounds(treksDepartureCoordinates.map(coordinate => [coordinate[1], coordinate[0]]));
+    if (trekscurrentDepartureCoordinates.length > 0) {
+      const bounds = leafletSrc.latLngBounds(trekscurrentDepartureCoordinates.map(coordinate => [coordinate[1], coordinate[0]]));
       this.currentBounds = bounds;
       this.map.fitBounds(this.currentBounds);
     }
-    this.treksLayer = leafletSrc.geoJSON(treksFeatureCollection, {
-      pointToLayer: (geoJsonPoint, latlng) => leafletSrc.marker(latlng, {
-        icon: leafletSrc.divIcon({
-          className: 'trek-marker',
-          iconSize: 48,
-          html: geoJsonPoint.properties.practice ? `<img src=${geoJsonPoint.properties.practice} />` : '',
+    if (!this.treksLayer) {
+      this.treksLayer = leafletSrc.geoJSON(treksFeatureCollection, {
+        pointToLayer: (geoJsonPoint, latlng) => leafletSrc.marker(latlng, {
+          icon: leafletSrc.divIcon({
+            html: geoJsonPoint.properties.practice && `<img src=${geoJsonPoint.properties.practice} />`,
+            className: 'trek-marker',
+            iconSize: 48,
+          }),
+          autoPanOnFocus: false,
         }),
-        autoPanOnFocus: false,
-      }),
-    }).addTo(this.map);
+        onEachFeature: (geoJsonPoint, layer) => {
+          layer.once('click', () => {
+            const trekDeparturePopup = leafletSrc.DomUtil.create('div');
+            trekDeparturePopup.className = 'trek-departure-popup';
+            trekDeparturePopup.onclick = () => this.trekCardPress.emit(geoJsonPoint.properties.id);
+            const trekName = leafletSrc.DomUtil.create('div');
+            trekName.innerHTML = geoJsonPoint.properties.name;
+            trekName.className = 'trek-name';
+            if (geoJsonPoint.properties.imgSrc) {
+              trekName.className += ' trek-name-margin-top';
+              const trekImg = leafletSrc.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 {
+      this.treksLayer.clearLayers();
+      this.treksLayer.addData(treksFeatureCollection);
+    }
     !this.mapIsReady && (this.mapIsReady = !this.mapIsReady);
   }
   removeTreks() {
@@ -14230,39 +14263,40 @@ const GrwMap = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     }
   }
   addTrek() {
-    const trekFeature = {
+    const currentTrekFeature = {
       type: 'Feature',
       geometry: state.currentTrek.geometry,
       properties: {},
     };
-    this.trekLayer = leafletSrc.geoJSON(trekFeature, {
+    this.currentTrekLayer = leafletSrc.geoJSON(currentTrekFeature, {
       style: () => ({
         color: this.colorTrekLine,
       }),
+      interactive: false,
     }).addTo(this.map);
     const bounds = leafletSrc.latLngBounds(state.currentTrek.geometry.coordinates.map(coordinate => [coordinate[1], coordinate[0]]));
     this.currentBounds = bounds;
     this.map.fitBounds(this.currentBounds);
-    const departureCoordinates = [state.currentTrek.geometry.coordinates.at(0)[0], state.currentTrek.geometry.coordinates.at(0)[1]];
-    const arrivalCoordinates = [state.currentTrek.geometry.coordinates.at(-1)[0], state.currentTrek.geometry.coordinates.at(-1)[1]];
-    const departureArrivalFeatureCollection = {
+    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 = {
       type: 'FeatureCollection',
       features: [
         {
           type: 'Feature',
           properties: { type: 'departure' },
-          geometry: { type: 'Point', coordinates: departureCoordinates },
+          geometry: { type: 'Point', coordinates: currentDepartureCoordinates },
         },
       ],
     };
-    if (departureCoordinates[0] !== arrivalCoordinates[0] || departureCoordinates[1] !== arrivalCoordinates[1]) {
-      departureArrivalFeatureCollection.features.push({
+    if (currentDepartureCoordinates[0] !== currentArrivalCoordinates[0] || currentDepartureCoordinates[1] !== currentArrivalCoordinates[1]) {
+      currentDepartureArrivalFeatureCollection.features.push({
         type: 'Feature',
         properties: { type: 'arrival' },
-        geometry: { type: 'Point', coordinates: arrivalCoordinates },
+        geometry: { type: 'Point', coordinates: currentArrivalCoordinates },
       });
     }
-    this.departureArrivalLayer = leafletSrc.geoJSON(departureArrivalFeatureCollection, {
+    this.currentDepartureArrivalLayer = leafletSrc.geoJSON(currentDepartureArrivalFeatureCollection, {
       pointToLayer: (geoJsonPoint, latlng) => leafletSrc.marker(latlng, {
         icon: leafletSrc.divIcon({
           html: departureArrivalImage,
@@ -14271,18 +14305,205 @@ const GrwMap = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
           iconAnchor: [0, 48],
         }),
         autoPanOnFocus: false,
+        interactive: false,
       }),
     }).addTo(this.map);
+    if (state.currentTrek.parking_location) {
+      const currentParking = {
+        type: 'Feature',
+        properties: {},
+        geometry: { type: 'Point', coordinates: state.currentTrek.parking_location },
+      };
+      this.currentParkingLayer = leafletSrc.geoJSON(currentParking, {
+        pointToLayer: (_geoJsonPoint, latlng) => leafletSrc.marker(latlng, {
+          icon: leafletSrc.divIcon({
+            html: '<div>P</div>',
+            className: 'parking-icon',
+            iconSize: 48,
+            iconAnchor: [0, 48],
+          }),
+          autoPanOnFocus: false,
+          interactive: false,
+        }),
+      }).addTo(this.map);
+    }
+    if (state.currentSensitiveAreas && state.currentSensitiveAreas.length > 0) {
+      const currentSensitiveAreasFeatureCollection = {
+        type: 'FeatureCollection',
+        features: [],
+      };
+      for (const sensitiveArea of state.currentSensitiveAreas) {
+        currentSensitiveAreasFeatureCollection.features.push({
+          type: 'Feature',
+          properties: { name: sensitiveArea.name },
+          geometry: sensitiveArea.geometry,
+        });
+      }
+      this.currentSensitiveAreasLayer = leafletSrc.geoJSON(currentSensitiveAreasFeatureCollection, {
+        onEachFeature: (geoJsonPoint, layer) => {
+          layer.once('mouseover', () => {
+            const sensitiveAreaTooltip = leafletSrc.DomUtil.create('div');
+            sensitiveAreaTooltip.className = 'sensitive-area-tooltip';
+            const sensitiveAreaName = leafletSrc.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);
+      leafletSrc.Control.SensitiveAreasCheckboxContainer = leafletSrc.Control.extend({
+        onAdd: () => {
+          const sensitiveAreasCheckboxContainer = leafletSrc.DomUtil.create('div');
+          sensitiveAreasCheckboxContainer.className = 'sensitiveAreasCheckboxContainer';
+          const sensitiveAreasCheckbox = leafletSrc.DomUtil.create('input');
+          sensitiveAreasCheckbox.setAttribute('id', 'sensitiveAreasCheckbox');
+          sensitiveAreasCheckbox.setAttribute('type', 'checkbox');
+          sensitiveAreasCheckbox.setAttribute('checked', 'true');
+          sensitiveAreasCheckbox.onclick = value => value.composedPath()[0].checked ? this.map.addLayer(this.currentSensitiveAreasLayer) : this.map.removeLayer(this.currentSensitiveAreasLayer);
+          const sensitiveAreasLabel = leafletSrc.DomUtil.create('label');
+          sensitiveAreasLabel.setAttribute('for', 'sensitiveAreasCheckbox');
+          sensitiveAreasLabel.innerHTML =
+            currentSensitiveAreasFeatureCollection.features.length > 1 || currentSensitiveAreasFeatureCollection.features[0].geometry.type === 'MultiPolygon'
+              ? 'Afficher les zones sensibles'
+              : 'Afficher la zone sensible';
+          sensitiveAreasCheckboxContainer.appendChild(sensitiveAreasCheckbox);
+          sensitiveAreasCheckboxContainer.appendChild(sensitiveAreasLabel);
+          return sensitiveAreasCheckboxContainer;
+        },
+      });
+      leafletSrc.control.sensitiveAreasCheckboxContainer = () => {
+        return new leafletSrc.Control.SensitiveAreasCheckboxContainer();
+      };
+      this.sensitiveAreasControl = leafletSrc.control.sensitiveAreasCheckboxContainer({ position: 'topright' }).addTo(this.map);
+    }
+    if (state.currentPois && state.currentPois.length > 0) {
+      const currentPoisFeatureCollection = {
+        type: 'FeatureCollection',
+        features: [],
+      };
+      for (const currentPoi of state.currentPois) {
+        currentPoisFeatureCollection.features.push({
+          type: 'Feature',
+          properties: { name: currentPoi.name, type_pictogram: currentPoi.type_pictogram },
+          geometry: currentPoi.geometry,
+        });
+      }
+      this.currentPoisLayer = leafletSrc.geoJSON(currentPoisFeatureCollection, {
+        pointToLayer: (geoJsonPoint, latlng) => leafletSrc.marker(latlng, {
+          icon: leafletSrc.divIcon({
+            html: geoJsonPoint.properties.type_pictogram && `<img src=${geoJsonPoint.properties.type_pictogram} />`,
+            className: 'poi-icon',
+            iconSize: 48,
+          }),
+          autoPanOnFocus: false,
+        }),
+        onEachFeature: (geoJsonPoint, layer) => {
+          layer.once('mouseover', () => {
+            const poiTooltip = leafletSrc.DomUtil.create('div');
+            poiTooltip.className = 'poi-tooltip';
+            const poiName = leafletSrc.DomUtil.create('div');
+            poiName.innerHTML = geoJsonPoint.properties.name;
+            poiName.className = 'poi-name';
+            poiTooltip.appendChild(poiName);
+            layer.bindTooltip(poiTooltip).openTooltip();
+          });
+        },
+      }).addTo(this.map);
+    }
+    if (state.currentInformationDesks && state.currentInformationDesks.length > 0) {
+      const currentInformationDesksFeatureCollection = {
+        type: 'FeatureCollection',
+        features: [],
+      };
+      for (const currentInformationDesk of state.currentInformationDesks) {
+        currentInformationDesksFeatureCollection.features.push({
+          type: 'Feature',
+          properties: { name: currentInformationDesk.name, type_pictogram: currentInformationDesk.type.pictogram },
+          geometry: { type: 'Point', coordinates: [Number(currentInformationDesk.longitude), Number(currentInformationDesk.latitude)] },
+        });
+      }
+      this.currentInformationDesksLayer = leafletSrc.geoJSON(currentInformationDesksFeatureCollection, {
+        pointToLayer: (geoJsonPoint, latlng) => leafletSrc.marker(latlng, {
+          icon: leafletSrc.divIcon({
+            html: geoJsonPoint.properties.type_pictogram && `<img src=${geoJsonPoint.properties.type_pictogram} />`,
+            className: 'information-desks-icon',
+            iconSize: 48,
+          }),
+          autoPanOnFocus: false,
+        }),
+        onEachFeature: (geoJsonPoint, layer) => {
+          layer.once('mouseover', () => {
+            const informationDesksTooltip = leafletSrc.DomUtil.create('div');
+            informationDesksTooltip.className = 'information-desks-tooltip';
+            const informationDesksName = leafletSrc.DomUtil.create('div');
+            informationDesksName.innerHTML = geoJsonPoint.properties.name;
+            informationDesksName.className = 'information-desks-name';
+            informationDesksTooltip.appendChild(informationDesksName);
+            layer.bindTooltip(informationDesksTooltip).openTooltip();
+          });
+        },
+      }).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 = leafletSrc.geoJSON(currentPointsReferenceFeatureCollection, {
+        pointToLayer: (_geoJsonPoint, latlng) => {
+          index += 1;
+          return leafletSrc.marker(latlng, {
+            icon: leafletSrc.divIcon({
+              html: index,
+              className: 'point-reference-icon',
+              iconSize: 24,
+            }),
+            autoPanOnFocus: false,
+            interactive: false,
+          });
+        },
+      }).addTo(this.map);
+    }
     !this.mapIsReady && (this.mapIsReady = !this.mapIsReady);
   }
   removeTrek() {
-    if (this.trekLayer) {
-      this.map.removeLayer(this.trekLayer);
-      this.trekLayer = null;
+    if (this.currentTrekLayer) {
+      this.map.removeLayer(this.currentTrekLayer);
+      this.currentTrekLayer = null;
+    }
+    if (this.currentDepartureArrivalLayer) {
+      this.map.removeLayer(this.currentDepartureArrivalLayer);
+      this.currentDepartureArrivalLayer = null;
+    }
+    if (this.currentParkingLayer) {
+      this.map.removeLayer(this.currentParkingLayer);
+      this.currentParkingLayer = null;
+    }
+    if (this.currentSensitiveAreasLayer) {
+      this.map.removeLayer(this.currentSensitiveAreasLayer);
+      this.currentSensitiveAreasLayer = null;
+      this.map.removeControl(this.sensitiveAreasControl);
+      this.sensitiveAreasControl = null;
+    }
+    if (this.currentPoisLayer) {
+      this.map.removeLayer(this.currentPoisLayer);
+      this.currentPoisLayer = null;
     }
-    if (this.departureArrivalLayer) {
-      this.map.removeLayer(this.departureArrivalLayer);
-      this.departureArrivalLayer = null;
+    if (this.currentInformationDesksLayer) {
+      this.map.removeLayer(this.currentInformationDesksLayer);
+      this.currentInformationDesksLayer = null;
+    }
+    if (this.currentPointsReferenceLayer) {
+      this.map.removeLayer(this.currentPointsReferenceLayer);
+      this.currentPointsReferenceLayer = null;
     }
   }
   render() {
@@ -14291,6 +14512,7 @@ const GrwMap = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         '--color-primary-tint': this.colorPrimaryTint,
         '--color-departure-icon': this.colorDepartureIcon,
         '--color-arrival-icon': this.colorArrivalIcon,
+        '--color-poi-icon': this.colorPoiIcon,
       } }, !this.mapIsReady && (h("div", { class: "map-loader-container" }, h("span", { class: "loader" })))));
   }
   get element() { return this; }
@@ -14300,11 +14522,13 @@ const GrwMap = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "attribution": [1],
     "center": [1],
     "zoom": [2],
+    "colorPrimary": [1, "color-primary"],
+    "colorPrimaryTint": [1, "color-primary-tint"],
     "colorTrekLine": [1, "color-trek-line"],
     "colorDepartureIcon": [1, "color-departure-icon"],
     "colorArrivalIcon": [1, "color-arrival-icon"],
-    "colorPrimary": [1, "color-primary"],
-    "colorPrimaryTint": [1, "color-primary-tint"],
+    "colorSensitiveArea": [1, "color-sensitive-area"],
+    "colorPoiIcon": [1, "color-poi-icon"],
     "mapIsReady": [32]
   }]);
 function defineCustomElement() {

package/dist/components/grw-poi-detail.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface GrwPoiDetail extends Components.GrwPoiDetail, HTMLElement {}
+export const GrwPoiDetail: {
+  prototype: GrwPoiDetail;
+  new (): GrwPoiDetail;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,6 @@
+import { G as GrwPoiDetail$1, d as defineCustomElement$1 } from './grw-poi-detail2.js';
+
+const GrwPoiDetail = GrwPoiDetail$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { GrwPoiDetail, defineCustomElement };

package/dist/components/grw-poi-detail2.js

@@ -0,0 +1,32 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const grwPoiDetailCss = ":host{display:flex;flex-direction:column}:host a{color:var(--color-primary)}.poi-img{width:180px}.poi-img img{width:180px;border-radius:8px}.poi-sub-container{display:flex;flex-direction:column}.poi-name{color:var(--color-primary);font-size:24px;font-weight:bold;padding:12px 0px}.poi-description{font-size:16px}";
+
+const GrwPoiDetail = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    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-sub-container" }, h("div", { class: "poi-name" }, this.poi.name), h("div", { class: "poi-description", innerHTML: this.poi.description }))));
+  }
+  static get style() { return grwPoiDetailCss; }
+}, [1, "grw-poi-detail", {
+    "poi": [16]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["grw-poi-detail"];
+  components.forEach(tagName => { switch (tagName) {
+    case "grw-poi-detail":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, GrwPoiDetail);
+      }
+      break;
+  } });
+}
+
+export { GrwPoiDetail as G, defineCustomElement as d };

package/dist/components/grw-sensitive-area-detail.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface GrwSensitiveAreaDetail extends Components.GrwSensitiveAreaDetail, HTMLElement {}
+export const GrwSensitiveAreaDetail: {
+  prototype: GrwSensitiveAreaDetail;
+  new (): GrwSensitiveAreaDetail;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/grw-sensitive-area-detail.js

@@ -0,0 +1,6 @@
+import { G as GrwSensitiveAreaDetail$1, d as defineCustomElement$1 } from './grw-sensitive-area-detail2.js';
+
+const GrwSensitiveAreaDetail = GrwSensitiveAreaDetail$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { GrwSensitiveAreaDetail, defineCustomElement };

package/dist/components/grw-sensitive-area-detail2.js

@@ -0,0 +1,37 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { s as state } from './store.js';
+
+const grwSensitiveAreaDetailCss = ":host{display:flex;flex-direction:column}:host a{color:var(--color-primary)}.sensitive-area-title{color:var(--color-primary);font-size:24px;padding:12px 0px}.sensitive-area-description{font-size:16px}.sensitive-area-period-container .sensitive-area-period-title,.sensitive-area-period-container .sensitive-area-practice-title,.sensitive-area-period-container .sensitive-area-contact-title,.sensitive-area-practice-container .sensitive-area-period-title,.sensitive-area-practice-container .sensitive-area-practice-title,.sensitive-area-practice-container .sensitive-area-contact-title,.sensitive-area-contact-container .sensitive-area-period-title,.sensitive-area-contact-container .sensitive-area-practice-title,.sensitive-area-contact-container .sensitive-area-contact-title{color:var(--color-primary);font-size:24px;padding:12px 0px}.sensitive-area-period-container .sensitive-area-period-values,.sensitive-area-period-container .sensitive-area-practice-values,.sensitive-area-practice-container .sensitive-area-period-values,.sensitive-area-practice-container .sensitive-area-practice-values,.sensitive-area-contact-container .sensitive-area-period-values,.sensitive-area-contact-container .sensitive-area-practice-values{display:flex}";
+
+const GrwSensitiveAreaDetail = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "sensitive-area-title" }, this.sensitiveArea.name), h("div", { class: "sensitive-area-description", innerHTML: this.sensitiveArea.description }), this.sensitiveArea.practices && this.sensitiveArea.practices.length > 0 && (h("div", { class: "sensitive-area-practice-container" }, h("div", { class: "sensitive-area-practice-title" }, "Domaines d'activit\u00E9s concern\u00E9s :"), h("div", { class: "sensitive-area-practice-values" }, this.sensitiveArea.practices.map((practice, index) => (h("div", { innerHTML: `${state.practices.find(statePractice => statePractice.id === practice).name.toUpperCase()}${index + 1 !== this.sensitiveArea.practices.length ? ' - ' : ''}` })))))), this.sensitiveArea.period && this.sensitiveArea.period.length > 0 && (h("div", { class: "sensitive-area-period-container" }, h("div", { class: "sensitive-area-period-title" }, "P\u00E9riodes de sensibilit\u00E9"), h("div", { class: "sensitive-area-period-values" }, this.sensitiveArea.period.map((month, index) => {
+      if (month) {
+        return (h("div", { innerHTML: `${new Date(0, index + 1, 0).toLocaleDateString('fr', { month: 'long' }).toUpperCase()}${this.sensitiveArea.period.slice(index + 1).find(month => month) ? ' - ' : ''}` }));
+      }
+    })))), h("div", { class: "sensitive-area-contact-container" }, h("div", { class: "sensitive-area-contact-title" }, "Contact"), h("div", { innerHTML: this.sensitiveArea.contact, class: "sensitive-area-contact-value" }))));
+  }
+  static get style() { return grwSensitiveAreaDetailCss; }
+}, [1, "grw-sensitive-area-detail", {
+    "sensitiveArea": [16]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["grw-sensitive-area-detail"];
+  components.forEach(tagName => { switch (tagName) {
+    case "grw-sensitive-area-detail":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, GrwSensitiveAreaDetail);
+      }
+      break;
+  } });
+}
+
+export { GrwSensitiveAreaDetail as G, defineCustomElement as d };