@geotrekce/geotrek-rando-widget 0.0.2 → 0.0.3

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

@@ -1,4 +1,4 @@
-import { Component, Host, h, Element, Prop, State } from '@stencil/core';
+import { Component, Host, h, Element, Prop, State, Event } from '@stencil/core';
 import L from 'leaflet';
 import state, { onChange } from 'store/store';
 import departureArrivalImage from '../../assets/departure-arrival.svg';
@@ -7,17 +7,20 @@ export class GrwMap {
     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 = L.map(this.element, {
       center: this.center.split(',').map(Number),
       zoom: this.zoom,
     });
+    L.control.scale().addTo(this.map);
     L.tileLayer(this.urlLayer, {
       maxZoom: 19,
       attribution: this.attribution,
@@ -49,33 +52,56 @@ export class GrwMap {
   }
   addTreks() {
     var _a;
-    const treksDepartureCoordinates = [];
+    const trekscurrentDepartureCoordinates = [];
     const treksFeatureCollection = {
       type: 'FeatureCollection',
       features: [],
     };
     for (const trek of state.treks) {
-      treksDepartureCoordinates.push(trek.departure_geom);
+      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].url,
+        },
       });
     }
-    if (treksDepartureCoordinates.length > 0) {
-      const bounds = L.latLngBounds(treksDepartureCoordinates.map(coordinate => [coordinate[1], coordinate[0]]));
+    if (trekscurrentDepartureCoordinates.length > 0) {
+      const bounds = L.latLngBounds(trekscurrentDepartureCoordinates.map(coordinate => [coordinate[1], coordinate[0]]));
       this.currentBounds = bounds;
       this.map.fitBounds(this.currentBounds);
     }
     this.treksLayer = L.geoJSON(treksFeatureCollection, {
       pointToLayer: (geoJsonPoint, latlng) => L.marker(latlng, {
         icon: L.divIcon({
+          html: geoJsonPoint.properties.practice && `<img src=${geoJsonPoint.properties.practice} />`,
           className: 'trek-marker',
           iconSize: 48,
-          html: geoJsonPoint.properties.practice ? `<img src=${geoJsonPoint.properties.practice} />` : '',
         }),
         autoPanOnFocus: false,
       }),
+      onEachFeature: (geoJsonPoint, layer) => {
+        layer.once('click', () => {
+          const trekDeparturePopup = L.DomUtil.create('div');
+          trekDeparturePopup.className = 'trek-departure-popup';
+          trekDeparturePopup.onclick = () => this.trekCardPress.emit(geoJsonPoint.properties.id);
+          const trekName = L.DomUtil.create('div');
+          trekName.innerHTML = geoJsonPoint.properties.name;
+          trekName.className = 'trek-name';
+          if (geoJsonPoint.properties.imgSrc) {
+            trekName.className += ' trek-name-margin-top';
+            const trekImg = L.DomUtil.create('img');
+            trekImg.src = geoJsonPoint.properties.imgSrc;
+            trekDeparturePopup.appendChild(trekImg);
+          }
+          trekDeparturePopup.appendChild(trekName);
+          layer.bindPopup(trekDeparturePopup, { interactive: true, autoPan: false, closeButton: false }).openPopup();
+        });
+      },
     }).addTo(this.map);
     !this.mapIsReady && (this.mapIsReady = !this.mapIsReady);
   }
@@ -86,39 +112,40 @@ export class GrwMap {
     }
   }
   addTrek() {
-    const trekFeature = {
+    const currentTrekFeature = {
       type: 'Feature',
       geometry: state.currentTrek.geometry,
       properties: {},
     };
-    this.trekLayer = L.geoJSON(trekFeature, {
+    this.currentTrekLayer = L.geoJSON(currentTrekFeature, {
       style: () => ({
         color: this.colorTrekLine,
       }),
+      interactive: false,
     }).addTo(this.map);
     const bounds = L.latLngBounds(state.currentTrek.geometry.coordinates.map(coordinate => [coordinate[1], coordinate[0]]));
     this.currentBounds = bounds;
     this.map.fitBounds(this.currentBounds);
-    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 = L.geoJSON(departureArrivalFeatureCollection, {
+    this.currentDepartureArrivalLayer = L.geoJSON(currentDepartureArrivalFeatureCollection, {
       pointToLayer: (geoJsonPoint, latlng) => L.marker(latlng, {
         icon: L.divIcon({
           html: departureArrivalImage,
@@ -127,18 +154,162 @@ export class GrwMap {
           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 = L.geoJSON(currentParking, {
+        pointToLayer: (_geoJsonPoint, latlng) => L.marker(latlng, {
+          icon: L.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: {},
+          geometry: sensitiveArea.geometry,
+        });
+      }
+      this.currentSensitiveAreasLayer = L.geoJSON(currentSensitiveAreasFeatureCollection, { style: () => ({ color: this.colorSensitiveArea }) }).addTo(this.map);
+      L.Control.SensitiveAreasCheckboxContainer = L.Control.extend({
+        onAdd: () => {
+          const sensitiveAreasCheckboxContainer = L.DomUtil.create('div');
+          sensitiveAreasCheckboxContainer.className = 'sensitiveAreasCheckboxContainer';
+          const sensitiveAreasCheckbox = L.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 = L.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;
+        },
+      });
+      L.control.sensitiveAreasCheckboxContainer = () => {
+        return new L.Control.SensitiveAreasCheckboxContainer();
+      };
+      this.sensitiveAreasControl = L.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 = L.geoJSON(currentPoisFeatureCollection, {
+        pointToLayer: (geoJsonPoint, latlng) => L.marker(latlng, {
+          icon: L.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 = L.DomUtil.create('div');
+            poiTooltip.className = 'poi-tooltip';
+            const poiName = L.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 = L.geoJSON(currentInformationDesksFeatureCollection, {
+        pointToLayer: (geoJsonPoint, latlng) => L.marker(latlng, {
+          icon: L.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 = L.DomUtil.create('div');
+            informationDesksTooltip.className = 'information-desks-tooltip';
+            const informationDesksName = L.DomUtil.create('div');
+            informationDesksName.innerHTML = geoJsonPoint.properties.name;
+            informationDesksName.className = 'information-desks-name';
+            informationDesksTooltip.appendChild(informationDesksName);
+            layer.bindTooltip(informationDesksTooltip).openTooltip();
+          });
+        },
+      }).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.departureArrivalLayer) {
-      this.map.removeLayer(this.departureArrivalLayer);
-      this.departureArrivalLayer = 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.currentInformationDesksLayer) {
+      this.map.removeLayer(this.currentInformationDesksLayer);
+      this.currentInformationDesksLayer = null;
     }
   }
   render() {
@@ -147,6 +318,7 @@ export class GrwMap {
         '--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" })))));
   }
@@ -228,6 +400,42 @@ export class GrwMap {
       "reflect": false,
       "defaultValue": "10"
     },
+    "colorPrimary": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "color-primary",
+      "reflect": false,
+      "defaultValue": "'#6b0030'"
+    },
+    "colorPrimaryTint": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "color-primary-tint",
+      "reflect": false,
+      "defaultValue": "'#974c6e'"
+    },
     "colorTrekLine": {
       "type": "string",
       "mutable": false,
@@ -282,7 +490,7 @@ export class GrwMap {
       "reflect": false,
       "defaultValue": "'#85003b'"
     },
-    "colorPrimary": {
+    "colorSensitiveArea": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -296,11 +504,11 @@ export class GrwMap {
         "tags": [],
         "text": ""
       },
-      "attribute": "color-primary",
+      "attribute": "color-sensitive-area",
       "reflect": false,
-      "defaultValue": "'#6b0030'"
+      "defaultValue": "'\t#4974a5'"
     },
-    "colorPrimaryTint": {
+    "colorPoiIcon": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -314,13 +522,29 @@ export class GrwMap {
         "tags": [],
         "text": ""
       },
-      "attribute": "color-primary-tint",
+      "attribute": "color-poi-icon",
       "reflect": false,
-      "defaultValue": "'#d2b2c0'"
+      "defaultValue": "'#974c6e'"
     }
   }; }
   static get states() { return {
     "mapIsReady": {}
   }; }
+  static get events() { return [{
+      "method": "trekCardPress",
+      "name": "trekCardPress",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      }
+    }]; }
   static get elementRef() { return "element"; }
 }

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

@@ -0,0 +1,30 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  padding: 0px 8px 8px 8px;
+}
+
+.poi-img {
+  width: 180px;
+}
+.poi-img img {
+  width: 180px;
+  border-radius: 8px;
+}
+
+.poi-right-container {
+  display: flex;
+  flex-direction: column;
+  padding: 8px;
+}
+
+.poi-name {
+  color: var(--color-primary);
+  font-size: 24px;
+  font-weight: bold;
+  padding: 0px 0px 8px 0px;
+}
+
+.poi-description {
+  font-size: 16px;
+}

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

@@ -0,0 +1,41 @@
+import { Component, Host, h, Prop } from '@stencil/core';
+export class GrwPoiDetail {
+  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-right-container" },
+        h("div", { class: "poi-name" }, this.poi.name),
+        h("div", { class: "poi-description", innerHTML: this.poi.description }))));
+  }
+  static get is() { return "grw-poi-detail"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["grw-poi-detail.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["grw-poi-detail.css"]
+  }; }
+  static get properties() { return {
+    "poi": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "Poi",
+        "resolved": "{ id: number; name: string; description: string; attachments: Attachments; type: any; type_label: any; type_pictogram: any; url: string; published: boolean; geometry: Geometry; }",
+        "references": {
+          "Poi": {
+            "location": "import",
+            "path": "types/types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
+    }
+  }; }
+}

package/dist/collection/components/grw-sensitive-area-detail/grw-sensitive-area-detail.css

@@ -0,0 +1,16 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  padding: 0px 8px 8px 8px;
+}
+
+.sensitive-area-name {
+  color: var(--color-primary);
+  font-size: 24px;
+  font-weight: bold;
+  padding: 0px 0px 8px 0px;
+}
+
+.sensitive-area-description {
+  font-size: 16px;
+}

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

@@ -0,0 +1,38 @@
+import { Component, Host, h, Prop } from '@stencil/core';
+export class GrwSensitiveAreaDetail {
+  render() {
+    return (h(Host, null,
+      h("div", { class: "sensitive-area-name" }, this.sensitiveArea.name),
+      h("div", { class: "sensitive-area-description", innerHTML: this.sensitiveArea.description })));
+  }
+  static get is() { return "grw-sensitive-area-detail"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["grw-sensitive-area-detail.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["grw-sensitive-area-detail.css"]
+  }; }
+  static get properties() { return {
+    "sensitiveArea": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "SensitiveArea",
+        "resolved": "{ id: number; geometry: Geometry; name: string; description: string; }",
+        "references": {
+          "SensitiveArea": {
+            "location": "import",
+            "path": "types/types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
+    }
+  }; }
+}

package/dist/collection/components/grw-trek-card/grw-trek-card.css

@@ -1,4 +1,5 @@
 .trek-card-container {
+  font-family: "Roboto";
   width: 350px;
   height: auto;
   border-radius: 8px;
@@ -6,8 +7,10 @@
   cursor: pointer;
 }
 .trek-card-container .image {
+  border-radius: 8px 8px 0px 0px;
   width: 100%;
   height: auto;
+  box-shadow: 4px 8px 24px rgba(0, 0, 0, 0.25);
 }
 .trek-card-container .sub-container {
   padding: 12px;

package/dist/collection/components/grw-trek-card/grw-trek-card.js

@@ -7,7 +7,7 @@ import lengthImage from '../../assets/length.svg';
 export class GrwTrekCard {
   constructor() {
     this.colorPrimary = '#6b0030';
-    this.colorPrimaryTint = '#d2b2c0';
+    this.colorPrimaryTint = '#974c6e';
   }
   componentWillLoad() {
     this.currentTrek = this.trek ? this.trek : state.currentTrek;
@@ -28,7 +28,7 @@ export class GrwTrekCard {
   render() {
     var _a, _b, _c, _d, _e, _f, _g, _h;
     return (h(Host, { onClick: () => this.trekCardPress.emit(this.currentTrek.id), style: { '--color-primary': this.colorPrimary, '--color-primary-tint': this.colorPrimaryTint } }, this.currentTrek && (h("div", { class: "trek-card-container" },
-      this.currentTrek.attachments && this.currentTrek.attachments[0] && this.currentTrek.attachments[0].url && (h("img", { class: "image", src: `${this.currentTrek.attachments[0].url}.400x0_q85.${this.currentTrek.attachments[0].url.slice(-3).toLowerCase()}`, loading: "lazy" })),
+      this.currentTrek.attachments && this.currentTrek.attachments[0] && this.currentTrek.attachments[0].thumbnail && (h("img", { class: "image", src: `${this.currentTrek.attachments[0].thumbnail}`, loading: "lazy" })),
       h("div", { class: "sub-container" },
         h("div", { class: "name" }, (_a = this.currentTrek) === null || _a === void 0 ? void 0 : _a.name),
         h("div", { class: "description", innerHTML: (_b = this.currentTrek) === null || _b === void 0 ? void 0 : _b.description_teaser }),
@@ -68,7 +68,7 @@ export class GrwTrekCard {
       "mutable": false,
       "complexType": {
         "original": "Trek",
-        "resolved": "{ id: number; name: string; attachments: Attachments; description?: string; description_teaser: string; difficulty: number; route: number; practice: number; duration: number; length_2d: number; ascent: number; geometry?: LineString; departure_geom?: Position; }",
+        "resolved": "{ id: number; name: string; attachments: Attachments; description?: string; description_teaser: string; difficulty: number; route: number; practice: number; duration: number; length_2d: number; ascent: number; geometry?: LineString; departure_geom?: Position; gpx?: string; kml?: string; pdf?: string; parking_location?: Position; }",
         "references": {
           "Trek": {
             "location": "import",
@@ -117,7 +117,7 @@ export class GrwTrekCard {
       },
       "attribute": "color-primary-tint",
       "reflect": false,
-      "defaultValue": "'#d2b2c0'"
+      "defaultValue": "'#974c6e'"
     }
   }; }
   static get states() { return {

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

@@ -1,4 +1,5 @@
 .trek-detail-container {
+  font-family: "Roboto";
   display: flex;
   flex-direction: column;
   height: 100%;
@@ -11,6 +12,7 @@
   padding: 24px;
 }
 .trek-detail-container .image {
+  border-radius: 8px;
   align-self: center;
   width: 100%;
   max-width: 700px;
@@ -53,6 +55,39 @@
 .trek-detail-container .sub-container .icons-labels-container .row .practice img {
   background-color: var(--color-primary);
 }
+.trek-detail-container .downloads-container {
+  padding: 0px 24px 24px 24px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.trek-detail-container .downloads-container .download-title {
+  color: var(--color-primary);
+  font-size: 18px;
+  margin-bottom: 18px;
+}
+.trek-detail-container .downloads-container .links-container a {
+  background-color: var(--color-primary);
+  padding: 8px;
+  color: #ffffff;
+  text-decoration: none;
+  border-radius: 8px;
+}
+.trek-detail-container .downloads-container .links-container a:nth-child(2) {
+  margin: 0px 12px;
+}
+.trek-detail-container .downloads-container .links-container a:hover {
+  background-color: var(--color-primary-shade);
+}
 .trek-detail-container .description {
   padding: 0px 24px 24px 24px;
+}
+.trek-detail-container .pois-title,
+.trek-detail-container .sensitive-areas-title,
+.trek-detail-container .information-desks-title {
+  color: var(--color-primary);
+  font-size: 36px;
+  font-weight: bold;
+  padding: 16px;
 }