@geotrekce/geotrek-rando-widget 0.4.7 → 0.5.1

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

@@ -1 +1 @@
-{"version":3,"file":"grw-information-desk.js","sourceRoot":"","sources":["../../../src/components/grw-information-desk/grw-information-desk.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAQrF,MAAM,OAAO,wBAAwB;;mCAEA,IAAI;;;EAGvC,gCAAgC;IAC9B,IAAI,CAAC,uBAAuB,GAAG,CAAC,IAAI,CAAC,uBAAuB,CAAC;EAC/D,CAAC;EAED,iBAAiB;IACf,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,CAAC,eAAe,CAAC,QAAQ,EAAE,SAAS,EAAE,IAAI,CAAC,eAAe,CAAC,SAAS,EAAE,CAAC,CAAC;EAChH,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACF,IAAI,CAAC,eAAe,CAAC,SAAS,IAAI,CACjC,WAAK,KAAK,EAAC,sBAAsB;QAC/B,WAAK,GAAG,EAAE,IAAI,CAAC,eAAe,CAAC,SAAS,EAAE,OAAO,EAAC,MAAM,GAAG,CACvD,CACP;MACD,WAAK,KAAK,EAAC,gCAAgC;QACxC,IAAI,CAAC,eAAe,CAAC,IAAI,IAAI,WAAK,KAAK,EAAC,uBAAuB,IAAE,IAAI,CAAC,eAAe,CAAC,IAAI,CAAO;QACjG,IAAI,CAAC,eAAe,CAAC,QAAQ,IAAI,IAAI,CAAC,eAAe,CAAC,SAAS,IAAI,CAClE,cAAQ,KAAK,EAAC,sBAAsB,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,iBAAiB,EAAE;UAE1E,YAAM,SAAS,EAAE,KAAK,EAAE,KAAK,EAAC,4CAA4C,yBAEnE;iCAEA,CACV;QACA,CAAC,IAAI,CAAC,eAAe,CAAC,WAAW,IAAI,IAAI,CAAC,eAAe,CAAC,YAAY,IAAI,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,IAAI,CACzG;UACG,IAAI,CAAC,eAAe,CAAC,WAAW,IAAI,IAAI,CAAC,eAAe,CAAC,WAAW;UACpE,IAAI,CAAC,eAAe,CAAC,YAAY,IAAI,IAAI,IAAI,CAAC,eAAe,CAAC,YAAY,EAAE;UAC5E,IAAI,CAAC,eAAe,CAAC,MAAM,IAAI,IAAI,IAAI,CAAC,eAAe,CAAC,MAAM,EAAE,CAC7D,CACP;QACA,IAAI,CAAC,eAAe,CAAC,KAAK,IAAI,CAC7B,WAAK,KAAK,EAAC,iBAAiB;UAE1B,YAAM,SAAS,EAAE,KAAK,EAAE,KAAK,EAAC,4CAA4C,WAEnE;UACP,SAAG,IAAI,EAAE,OAAO,IAAI,CAAC,eAAe,CAAC,KAAK,EAAE,IAAG,IAAI,CAAC,eAAe,CAAC,KAAK,CAAK,CAC1E,CACP;QACA,IAAI,CAAC,eAAe,CAAC,KAAK,IAAI,CAC7B,WAAK,KAAK,EAAC,gBAAgB;UAEzB,YAAM,SAAS,EAAE,KAAK,EAAE,KAAK,EAAC,4CAA4C,WAEnE;UACP,SAAG,IAAI,EAAE,UAAU,IAAI,CAAC,eAAe,CAAC,KAAK,EAAE,IAAG,IAAI,CAAC,eAAe,CAAC,KAAK,CAAK,CAC7E,CACP;QACA,IAAI,CAAC,eAAe,CAAC,OAAO,IAAI,CAC/B,WAAK,KAAK,EAAC,gBAAgB;UAEzB,YAAM,SAAS,EAAE,KAAK,EAAE,KAAK,EAAC,4CAA4C,WAEnE;UACP,SAAG,IAAI,EAAE,GAAG,IAAI,CAAC,eAAe,CAAC,OAAO,EAAE,IAAG,IAAI,CAAC,eAAe,CAAC,OAAO,CAAK,CAC1E,CACP;QACA,IAAI,CAAC,eAAe,CAAC,WAAW,IAAI,CACnC,WAAK,KAAK,EAAC,wCAAwC;UACjD,WAAK,KAAK,EAAE,IAAI,CAAC,uBAAuB,CAAC,CAAC,CAAC,oCAAoC,CAAC,CAAC,CAAC,8BAA8B,EAAE,SAAS,EAAE,IAAI,CAAC,eAAe,CAAC,WAAW,GAAQ;UACrK,WAAK,KAAK,EAAC,qCAAqC,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,gCAAgC,EAAE,IACpG,IAAI,CAAC,uBAAuB,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,YAAY,CACtD,CACF,CACP,CACG,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, State, Event, EventEmitter } from '@stencil/core';\nimport { InformationDesk } from 'types/types';\n\n@Component({\n  tag: 'grw-information-desk',\n  styleUrl: 'grw-information-desk.scss',\n  shadow: true,\n})\nexport class GrwInformationDeskDetail {\n  @Event() centerOnMap: EventEmitter<{ latitude: number; longitude: number }>;\n  @State() displayShortDescription = true;\n  @Prop() informationDesk: InformationDesk;\n\n  handleInformationDeskDescription() {\n    this.displayShortDescription = !this.displayShortDescription;\n  }\n\n  handleCenterOnMap() {\n    this.centerOnMap.emit({ latitude: this.informationDesk.latitude, longitude: this.informationDesk.longitude });\n  }\n\n  render() {\n    return (\n      <Host>\n        {this.informationDesk.photo_url && (\n          <div class=\"information-desk-img\">\n            <img src={this.informationDesk.photo_url} loading=\"lazy\" />\n          </div>\n        )}\n        <div class=\"information-desk-sub-container\">\n          {this.informationDesk.name && <div class=\"information-desk-name\">{this.informationDesk.name}</div>}\n          {this.informationDesk.latitude && this.informationDesk.longitude && (\n            <button class=\"center-on-map-button\" onClick={() => this.handleCenterOnMap()}>\n              {/* @ts-ignore */}\n              <span translate={false} class=\"material-symbols material-symbols-outlined\">\n                location_searching\n              </span>\n              Centrer sur la carte\n            </button>\n          )}\n          {(this.informationDesk.postal_code || this.informationDesk.municipality || this.informationDesk.street) && (\n            <div>\n              {this.informationDesk.postal_code && this.informationDesk.postal_code}\n              {this.informationDesk.municipality && ` ${this.informationDesk.municipality}`}\n              {this.informationDesk.street && ` ${this.informationDesk.street}`}\n            </div>\n          )}\n          {this.informationDesk.phone && (\n            <div class=\"phone-container\">\n              {/* @ts-ignore */}\n              <span translate={false} class=\"material-symbols material-symbols-outlined\">\n                call\n              </span>\n              <a href={`tel:${this.informationDesk.phone}`}>{this.informationDesk.phone}</a>\n            </div>\n          )}\n          {this.informationDesk.email && (\n            <div class=\"mail-container\">\n              {/* @ts-ignore */}\n              <span translate={false} class=\"material-symbols material-symbols-outlined\">\n                mail\n              </span>\n              <a href={`mailto:${this.informationDesk.email}`}>{this.informationDesk.email}</a>\n            </div>\n          )}\n          {this.informationDesk.website && (\n            <div class=\"link-container\">\n              {/* @ts-ignore */}\n              <span translate={false} class=\"material-symbols material-symbols-outlined\">\n                link\n              </span>\n              <a href={`${this.informationDesk.website}`}>{this.informationDesk.website}</a>\n            </div>\n          )}\n          {this.informationDesk.description && (\n            <div class=\"information-desk-description-container\">\n              <div class={this.displayShortDescription ? 'information-desk-description-short' : 'information-desk-description'} innerHTML={this.informationDesk.description}></div>\n              <div class=\"handle-information-desk-description\" onClick={() => this.handleInformationDeskDescription()}>\n                {this.displayShortDescription ? 'Lire plus' : 'Lire moins'}\n              </div>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"grw-information-desk.js","sourceRoot":"","sources":["../../../src/components/grw-information-desk/grw-information-desk.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, State, Event, EventEmitter } from '@stencil/core';\nimport state from 'store/store';\nimport { translate } from 'i18n/i18n';\nimport { InformationDesk } from 'types/types';\n\n@Component({\n  tag: 'grw-information-desk',\n  styleUrl: 'grw-information-desk.scss',\n  shadow: true,\n})\nexport class GrwInformationDeskDetail {\n  descriptionRef?: HTMLDivElement;\n  @Event() centerOnMap: EventEmitter<{ latitude: number; longitude: number }>;\n  @State() displayShortDescription = true;\n  @State() showInformationDeskDescriptionButton = false;\n  @Prop() informationDesk: InformationDesk;\n\n  componentDidLoad() {\n    this.showInformationDeskDescriptionButton = this.descriptionRef.clientHeight < this.descriptionRef.scrollHeight;\n  }\n\n  handleInformationDeskDescription() {\n    this.displayShortDescription = !this.displayShortDescription;\n  }\n\n  handleCenterOnMap() {\n    this.centerOnMap.emit({ latitude: this.informationDesk.latitude, longitude: this.informationDesk.longitude });\n  }\n\n  render() {\n    return (\n      <Host>\n        {this.informationDesk.photo_url && (\n          <div class=\"information-desk-img\">\n            <img\n              /* @ts-ignore */\n              crossorigin=\"anonymous\"\n              src={this.informationDesk.photo_url}\n              loading=\"lazy\"\n            />\n          </div>\n        )}\n        <div class=\"information-desk-sub-container\">\n          {this.informationDesk.name && <div class=\"information-desk-name\">{this.informationDesk.name}</div>}\n          {this.informationDesk.latitude && this.informationDesk.longitude && (\n            <button class=\"center-on-map-button\" onClick={() => this.handleCenterOnMap()}>\n              {/* @ts-ignore */}\n              <span translate={false} class=\"material-symbols material-symbols-outlined\">\n                location_searching\n              </span>\n              {translate[state.language].centerOnMap}\n            </button>\n          )}\n          {(this.informationDesk.postal_code || this.informationDesk.municipality || this.informationDesk.street) && (\n            <div>\n              {this.informationDesk.postal_code && this.informationDesk.postal_code}\n              {this.informationDesk.municipality && ` ${this.informationDesk.municipality}`}\n              {this.informationDesk.street && ` ${this.informationDesk.street}`}\n            </div>\n          )}\n          {this.informationDesk.phone && (\n            <div class=\"phone-container\">\n              {/* @ts-ignore */}\n              <span translate={false} class=\"material-symbols material-symbols-outlined\">\n                call\n              </span>\n              <a href={`tel:${this.informationDesk.phone}`}>{this.informationDesk.phone}</a>\n            </div>\n          )}\n          {this.informationDesk.email && (\n            <div class=\"mail-container\">\n              {/* @ts-ignore */}\n              <span translate={false} class=\"material-symbols material-symbols-outlined\">\n                mail\n              </span>\n              <a href={`mailto:${this.informationDesk.email}`}>{this.informationDesk.email}</a>\n            </div>\n          )}\n          {this.informationDesk.website && (\n            <div class=\"link-container\">\n              {/* @ts-ignore */}\n              <span translate={false} class=\"material-symbols material-symbols-outlined\">\n                link\n              </span>\n              <a href={`${this.informationDesk.website}`}>{this.informationDesk.website}</a>\n            </div>\n          )}\n          {this.informationDesk.description && (\n            <div class=\"information-desk-description-container\">\n              <div\n                class={this.displayShortDescription ? 'information-desk-description-short' : 'information-desk-description'}\n                innerHTML={this.informationDesk.description}\n                ref={el => (this.descriptionRef = el)}\n              ></div>\n              {false && (\n                <div class=\"handle-information-desk-description\" onClick={() => this.handleInformationDeskDescription()}>\n                  {this.displayShortDescription ? translate[state.language].readMore : translate[state.language].readLess}\n                </div>\n              )}\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,19 @@
+.loader {
+  width: 48px;
+  height: 48px;
+  border: 5px solid var(--color-primary-container);
+  border-bottom-color: var(--color-on-primary-container);
+  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);
+  }
+}

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

@@ -0,0 +1,63 @@
+import { Host, h } from '@stencil/core';
+export class GrwLoader {
+  constructor() {
+    this.colorPrimaryContainer = '#eaddff';
+    this.colorOnPrimaryContainer = '#21005e';
+  }
+  render() {
+    return (h(Host, { style: { '--color-primary-container': this.colorPrimaryContainer, '--color-on-primary-container': this.colorOnPrimaryContainer } }, h("span", { class: "loader" })));
+  }
+  static get is() { return "grw-loader"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["grw-loader.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["grw-loader.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "colorPrimaryContainer": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "color-primary-container",
+        "reflect": false,
+        "defaultValue": "'#eaddff'"
+      },
+      "colorOnPrimaryContainer": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "color-on-primary-container",
+        "reflect": false,
+        "defaultValue": "'#21005e'"
+      }
+    };
+  }
+}
+//# sourceMappingURL=grw-loader.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"grw-loader.js","sourceRoot":"","sources":["../../../src/components/grw-loader/grw-loader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,SAAS;;iCACY,SAAS;mCACP,SAAS;;EAE3C,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,EAAE,2BAA2B,EAAE,IAAI,CAAC,qBAAqB,EAAE,8BAA8B,EAAE,IAAI,CAAC,uBAAuB,EAAE;MACpI,YAAM,KAAK,EAAC,QAAQ,GAAQ,CACvB,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'grw-loader',\n  styleUrl: 'grw-loader.scss',\n  shadow: true,\n})\nexport class GrwLoader {\n  @Prop() colorPrimaryContainer = '#eaddff';\n  @Prop() colorOnPrimaryContainer = '#21005e';\n\n  render() {\n    return (\n      <Host style={{ '--color-primary-container': this.colorPrimaryContainer, '--color-on-primary-container': this.colorOnPrimaryContainer }}>\n        <span class=\"loader\"></span>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1140,7 +1140,7 @@ svg.leaflet-image-layer.leaflet-interactive path {
 
 #map {
   position: relative;
-  font-family: "Roboto";
+  font-family: var(--font-family);
   display: block;
 }
 
@@ -1471,8 +1471,8 @@ svg.leaflet-image-layer.leaflet-interactive path {
 .trek-departure-popup img,
 .touristic-content-coordinates-popup img,
 .touristic-event-coordinates-popup img {
-  border-top-left-radius: 8px;
-  border-top-right-radius: 8px;
+  border-top-left-radius: var(--border-radius, 8px);
+  border-top-right-radius: var(--border-radius, 8px);
 }
 .trek-departure-popup .trek-name,
 .trek-departure-popup .touristic-content-name,
@@ -1509,7 +1509,7 @@ svg.leaflet-image-layer.leaflet-interactive path {
   background-color: var(--color-background);
   color: var(--color-on-surface);
   padding: 12px 24px;
-  border-radius: 20px;
+  border-radius: var(--border-radius, 20px);
   box-sizing: border-box;
   position: relative;
   gap: 8px;
@@ -1520,6 +1520,7 @@ svg.leaflet-image-layer.leaflet-interactive path {
   font-weight: 500;
   box-shadow: var(--elevation-1);
   transition: box-shadow 0.2s ease-in-out 0s;
+  font-family: var(--font-family);
 }
 
 .poi-tooltip .poi-name,
@@ -1559,7 +1560,7 @@ svg.leaflet-image-layer.leaflet-interactive path {
   align-items: center;
   background-color: #ffffff;
   padding: 8px;
-  border-radius: 8px;
+  border-radius: var(--border-radius, 8px);
   user-select: none;
 }
 .sensitiveAreasCheckboxContainer input,

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

@@ -21,6 +21,7 @@ export class GrwMap {
     this.attributionLayer = undefined;
     this.center = '1, 1';
     this.zoom = 10;
+    this.fontFamily = 'Roboto';
     this.colorPrimaryApp = '#6b0030';
     this.colorOnSurface = '#49454e';
     this.colorPrimaryContainer = '#eaddff';
@@ -135,6 +136,7 @@ export class GrwMap {
         value: L.tileLayer(urlLayer, {
           maxZoom: this.maxZoom,
           attribution: `${attributionLayers[index] && attributionLayers[index] !== '' ? attributionLayers[index].concat(' | ') : ''}Powered by <a target="_blank" href="https://geotrek.fr/">Geotrek</a>`,
+          crossOrigin: true,
         }),
       });
     });
@@ -350,7 +352,7 @@ export class GrwMap {
         pointToLayer: (geoJsonPoint, latlng) => L.marker(latlng, {
           icon: L.divIcon({
             html: geoJsonPoint.properties.practice
-              ? `<div class="trek-marker-container"><img src=${geoJsonPoint.properties.practice} /></div>`
+              ? `<div class="trek-marker-container"><img crossorigin="anonymous" src=${geoJsonPoint.properties.practice} /></div>`
               : `<div class="trek-marker-container"></div>`,
             className: 'trek-marker',
             iconSize: 32,
@@ -365,6 +367,7 @@ export class GrwMap {
             if (geoJsonPoint.properties.imgSrc) {
               const trekImg = L.DomUtil.create('img');
               trekImg.src = geoJsonPoint.properties.imgSrc;
+              trekImg.crossOrigin = 'anonymous';
               trekDeparturePopup.appendChild(trekImg);
             }
             const trekName = L.DomUtil.create('div');
@@ -516,7 +519,7 @@ export class GrwMap {
       this.currentPoisLayer = L.geoJSON(currentPoisFeatureCollection, {
         pointToLayer: (geoJsonPoint, latlng) => L.marker(latlng, {
           icon: L.divIcon({
-            html: geoJsonPoint.properties.type_pictogram ? `<img src=${geoJsonPoint.properties.type_pictogram} />` : `<img />`,
+            html: geoJsonPoint.properties.type_pictogram ? `<img crossorigin="anonymous" src=${geoJsonPoint.properties.type_pictogram} />` : `<img />`,
             className: 'poi-icon',
             iconSize: 48,
           }),
@@ -553,7 +556,7 @@ export class GrwMap {
       this.currentToutisticContentsLayer = L.geoJSON(currentTouristicContentsFeatureCollection, {
         pointToLayer: (geoJsonPoint, latlng) => L.marker(latlng, {
           icon: L.divIcon({
-            html: geoJsonPoint.properties.category_pictogram ? `<img src=${geoJsonPoint.properties.category_pictogram} />` : `<img />`,
+            html: geoJsonPoint.properties.category_pictogram ? `<img crossorigin="anonymous "src=${geoJsonPoint.properties.category_pictogram} />` : `<img />`,
             className: 'touristic-content-icon',
             iconSize: 48,
           }),
@@ -590,7 +593,10 @@ export class GrwMap {
       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 />`,
+            html: geoJsonPoint.properties.type_pictogram
+              ? `
+            <img crossorigin="anonymous" src=${geoJsonPoint.properties.type_pictogram} />`
+              : `<img />`,
             className: 'touristic-event-icon',
             iconSize: 48,
           }),
@@ -626,7 +632,7 @@ export class GrwMap {
       this.currentInformationDesksLayer = L.geoJSON(currentInformationDesksFeatureCollection, {
         pointToLayer: (geoJsonPoint, latlng) => L.marker(latlng, {
           icon: L.divIcon({
-            html: geoJsonPoint.properties.type_pictogram ? `<img src=${geoJsonPoint.properties.type_pictogram} />` : `<img />`,
+            html: geoJsonPoint.properties.type_pictogram ? `<img crossorigin="anonymous" src=${geoJsonPoint.properties.type_pictogram} />` : `<img />`,
             className: 'information-desks-icon',
             iconSize: 48,
           }),
@@ -712,6 +718,7 @@ export class GrwMap {
             if (geoJsonPoint.properties.imgSrc) {
               const trekImg = L.DomUtil.create('img');
               trekImg.src = geoJsonPoint.properties.imgSrc;
+              trekImg.crossOrigin = 'anonymous';
               trekDeparturePopup.appendChild(trekImg);
             }
             const trekName = L.DomUtil.create('div');
@@ -841,7 +848,7 @@ export class GrwMap {
         zIndexOffset: 4000000,
         icon: L.divIcon({
           html: geoJsonPoint.properties.practice
-            ? `<div class="trek-marker-container"><img src=${geoJsonPoint.properties.practice} /></div>`
+            ? `<div class="trek-marker-container"><img crossorigin="anonymous" src=${geoJsonPoint.properties.practice} /></div>`
             : `<div class="trek-marker-container"></div>`,
           className: 'selected-trek-marker',
           iconSize: 64,
@@ -856,6 +863,7 @@ export class GrwMap {
           if (geoJsonPoint.properties.imgSrc) {
             const trekImg = L.DomUtil.create('img');
             trekImg.src = geoJsonPoint.properties.imgSrc;
+            trekImg.crossOrigin = 'anonymous';
             trekDeparturePopup.appendChild(trekImg);
           }
           const trekName = L.DomUtil.create('div');
@@ -935,6 +943,7 @@ export class GrwMap {
           if (geoJsonPoint.properties.imgSrc) {
             const trekImg = L.DomUtil.create('img');
             trekImg.src = geoJsonPoint.properties.imgSrc;
+            trekImg.crossOrigin = 'anonymous';
             trekDeparturePopup.appendChild(trekImg);
           }
           const trekName = L.DomUtil.create('div');
@@ -1090,7 +1099,7 @@ export class GrwMap {
         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"><img crossorigin="anonymous "src=${geoJsonPoint.properties.practice} /></div>`
               : `<div class="touristic-content-marker-container"></div>`,
             className: 'touristic-content-marker',
             iconSize: 32,
@@ -1145,7 +1154,7 @@ export class GrwMap {
         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"><img crossorigin="anonymous" src=${geoJsonPoint.properties.practice} /></div>`
               : `<div class="touristic-content-marker-container"></div>`,
             className: 'touristic-content-marker',
             iconSize: 32,
@@ -1160,6 +1169,7 @@ export class GrwMap {
             if (geoJsonPoint.properties.imgSrc) {
               const touristicContentImg = L.DomUtil.create('img');
               touristicContentImg.src = geoJsonPoint.properties.imgSrc;
+              touristicContentImg.crossOrigin = 'anonymous';
               touristicContentCoordinatesPopup.appendChild(touristicContentImg);
             }
             const touristicContentName = L.DomUtil.create('div');
@@ -1239,7 +1249,7 @@ export class GrwMap {
         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"><img crossorigin="anonymous" src=${geoJsonPoint.properties.type} /></div>`
               : `<div class="touristic-event-marker-container"></div>`,
             className: 'touristic-event-marker',
             iconSize: 32,
@@ -1285,7 +1295,7 @@ export class GrwMap {
         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-marker-container"><img crossorigin="anonymous" src=${geoJsonPoint.properties.category} /></div>`
             : `<div class="touristic-content-marker-container"></div>`,
           className: 'selected-touristic-content-marker',
           iconSize: 64,
@@ -1300,6 +1310,7 @@ export class GrwMap {
           if (geoJsonPoint.properties.imgSrc) {
             const touristicContentImg = L.DomUtil.create('img');
             touristicContentImg.src = geoJsonPoint.properties.imgSrc;
+            touristicContentImg.crossOrigin = 'anonymous';
             touristicContentDeparturePopup.appendChild(touristicContentImg);
           }
           const touristicContentName = L.DomUtil.create('div');
@@ -1373,7 +1384,7 @@ export class GrwMap {
         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"><img crossorigin="anonymous" src=${geoJsonPoint.properties.type} /></div>`
               : `<div class="touristic-event-marker-container"></div>`,
             className: 'touristic-event-marker',
             iconSize: 32,
@@ -1388,6 +1399,7 @@ export class GrwMap {
             if (geoJsonPoint.properties.imgSrc) {
               const touristicEventImg = L.DomUtil.create('img');
               touristicEventImg.src = geoJsonPoint.properties.imgSrc;
+              touristicEventImg.crossOrigin = 'anonymous';
               touristicEventCoordinatesPopup.appendChild(touristicEventImg);
             }
             const touristicEventName = L.DomUtil.create('div');
@@ -1472,7 +1484,7 @@ export class GrwMap {
         zIndexOffset: 4000000,
         icon: L.divIcon({
           html: geoJsonPoint.properties.category
-            ? `<div class="touristic-event-marker-container"><img src=${geoJsonPoint.properties.category} /></div>`
+            ? `<div class="touristic-event-marker-container"><img crossorigin="anonymous" src=${geoJsonPoint.properties.category} /></div>`
             : `<div class="touristic-event-marker-container"></div>`,
           className: 'selected-touristic-event-marker',
           iconSize: 64,
@@ -1487,6 +1499,7 @@ export class GrwMap {
           if (geoJsonPoint.properties.imgSrc) {
             const touristicEventImg = L.DomUtil.create('img');
             touristicEventImg.src = geoJsonPoint.properties.imgSrc;
+            touristicEventImg.crossOrigin = 'anonymous';
             touristicEventDeparturePopup.appendChild(touristicEventImg);
           }
           const touristicEventName = L.DomUtil.create('div');
@@ -1528,6 +1541,7 @@ export class GrwMap {
     const layersImageSrc = getAssetPath(`${Build.isDev ? '/' : ''}assets/layers.svg`);
     const contractImageSrc = getAssetPath(`${Build.isDev ? '/' : ''}assets/contract.svg`);
     return (h(Host, { style: {
+        '--font-family': this.fontFamily,
         '--color-primary-app': this.colorPrimaryApp,
         '--color-on-surface': this.colorOnSurface,
         '--color-primary-container': this.colorPrimaryContainer,
@@ -1641,6 +1655,24 @@ export class GrwMap {
         "reflect": false,
         "defaultValue": "10"
       },
+      "fontFamily": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "font-family",
+        "reflect": false,
+        "defaultValue": "'Roboto'"
+      },
       "colorPrimaryApp": {
         "type": "string",
         "mutable": false,