@geotrekce/geotrek-rando-widget 0.0.1 → 0.0.4

package/dist/collection/components/grw-treks-list/grw-treks-list.js

@@ -1,19 +1,25 @@
-import { Component, Host, h, Element, State } from '@stencil/core';
-import state from 'store/store';
+import { Component, Host, h, Element, State, Prop } from '@stencil/core';
+import state, { onChange } from 'store/store';
 export class GrwTreksList {
   constructor() {
     this.treksToDisplay = [];
+    this.colorPrimary = '#6b0030';
+    this.colorPrimaryTint = '#974c6e';
+    this.isLargeView = false;
     this.handleInfiniteScrollBind = this.handleInfiniteScroll.bind(this);
     this.step = 10;
   }
   componentWillLoad() {
-    this.treksToDisplay = state.treks.slice(0, this.step);
-    this.element.addEventListener('scroll', this.handleInfiniteScrollBind);
+    onChange('currentTreks', () => {
+      this.element.addEventListener('scroll', this.handleInfiniteScrollBind);
+      this.element.scroll({ top: 0 });
+      this.treksToDisplay = [...state.currentTreks.slice(0, this.step)];
+    });
   }
   handleInfiniteScroll(event) {
     if (event.composedPath()[0].scrollTop + event.composedPath()[0].scrollHeight / 2 >= event.composedPath()[0].scrollHeight) {
       if (this.treksToDisplay.length < state.treks.length) {
-        this.treksToDisplay = state.treks.slice(0, this.treksToDisplay.length + this.step >= state.treks.length ? state.treks.length : this.treksToDisplay.length + this.step);
+        this.treksToDisplay = state.currentTreks.slice(0, this.treksToDisplay.length + this.step >= state.currentTreks.length ? state.currentTreks.length : this.treksToDisplay.length + this.step);
       }
       else {
         this.element.removeEventListener('scroll', this.handleInfiniteScrollBind);
@@ -21,7 +27,9 @@ export class GrwTreksList {
     }
   }
   render() {
-    return (h(Host, { class: "treks-list-container" }, this.treksToDisplay.map(trek => (h("grw-trek-card", { trek: trek })))));
+    return (h(Host, { style: { '--color-primary': this.colorPrimary, '--color-primary-tint': this.colorPrimaryTint } },
+      h("div", { class: "current-treks-length" }, `${state.currentTreks.length} résultat${state.currentTreks.length > 1 ? 's' : ''}`),
+      h("div", { class: "current-treks-container" }, this.treksToDisplay.map(trek => (h("grw-trek-card", { key: `trek-${trek.id}`, trek: trek, "is-large-view": this.isLargeView, "color-primary": this.colorPrimary, "color-primary-tint": this.colorPrimaryTint }))))));
   }
   static get is() { return "grw-treks-list"; }
   static get encapsulation() { return "shadow"; }
@@ -31,6 +39,62 @@ export class GrwTreksList {
   static get styleUrls() { return {
     "$": ["grw-treks-list.css"]
   }; }
+  static get properties() { return {
+    "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'"
+    },
+    "isLargeView": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "is-large-view",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
   static get states() { return {
     "treksToDisplay": {}
   }; }

package/dist/collection/store/grw-trek-provider.js

@@ -1,20 +1,43 @@
 import { Component, h, Host, Prop } from '@stencil/core';
 import state from 'store/store';
 export class GrwTrekProvider {
+  constructor() {
+    this.language = 'fr';
+  }
   componentWillLoad() {
     state.api = this.api;
+    const requests = [];
+    requests.push(!state.difficulties ? fetch(`${this.api}trek_difficulty/?language=${this.language}&fields=id,label,pictogram`) : new Response('null'));
+    requests.push(!state.routes ? fetch(`${this.api}trek_route/?language=${this.language}&fields=id,route,pictogram`) : new Response('null'));
+    requests.push(!state.practices ? fetch(`${this.api}trek_practice/?language=${this.language}&fields=id,name,pictogram`) : new Response('null'));
+    requests.push(!state.themes ? fetch(`${this.api}theme/?language=${this.language}&fields=id,label,pictogram`) : new Response('null'));
     return Promise.all([
-      fetch(`${this.api}trek/${this.trekId}/?language=fr&fields=id,name,attachments,description,description_teaser,difficulty,duration,ascent,length_2d,practice,route,geometry`),
-      fetch(`${this.api}trek_difficulty/?language=fr`),
-      fetch(`${this.api}trek_route/?language=fr`),
-      fetch(`${this.api}trek_practice/?language=fr`),
+      ...requests,
+      fetch(`${this.api}sensitivearea/?language=${this.language}&trek=${this.trekId}&fields=id,geometry,name,description`).catch(() => new Response('null')),
+      fetch(`${this.api}poi/?language=${this.language}&trek=${this.trekId}&published=true&fields=id,name,description,attachments,type,type_label,type_pictogram,url,published,geometry&page_size=999`),
+      fetch(`${this.api}informationdesk/?language=${this.language}&near_trek=${this.trekId}&fields=id,name,description,type,phone,email,website,municipality,postal_code,street,photo_url,latitude,longitude&page_size=999`),
+      fetch(`${this.api}trek/${this.trekId}/?language=${this.language}&published=true&fields=id,name,attachments,description,description_teaser,difficulty,duration,ascent,length_2d,practice,themes,route,geometry,gpx,kml,pdf,parking_location,departure`),
     ])
       .then(responses => Promise.all(responses.map(response => response.json())))
-      .then(([trek, difficulties, routes, practices]) => {
+      .then(([difficulties, routes, practices, themes, sensitiveAreas, pois, informationDesks, trek]) => {
+      if (difficulties) {
+        state.difficulties = difficulties.results;
+      }
+      if (routes) {
+        state.routes = routes.results;
+      }
+      if (practices) {
+        state.practices = practices.results.map(practice => (Object.assign(Object.assign({}, practice), { selected: false })));
+      }
+      if (themes) {
+        state.themes = themes.results;
+      }
+      if (sensitiveAreas) {
+        state.currentSensitiveAreas = sensitiveAreas.results;
+      }
+      state.currentPois = pois.results;
+      state.currentInformationDesks = informationDesks.results;
       state.currentTrek = trek;
-      state.difficulties = difficulties.results;
-      state.routes = routes.results;
-      state.practices = practices.results;
     });
   }
   disconnectedCallback() {
@@ -24,7 +47,26 @@ export class GrwTrekProvider {
     return h(Host, null);
   }
   static get is() { return "grw-trek-provider"; }
+  static get encapsulation() { return "shadow"; }
   static get properties() { return {
+    "language": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "language",
+      "reflect": false,
+      "defaultValue": "'fr'"
+    },
     "api": {
       "type": "string",
       "mutable": false,

package/dist/collection/store/grw-treks-provider.js

@@ -1,32 +1,68 @@
 import { Component, h, Host, Prop } from '@stencil/core';
 import state from 'store/store';
 export class GrwTreksProvider {
+  constructor() {
+    this.language = 'fr';
+  }
   componentWillLoad() {
     state.api = this.api;
-    let treksRequest = `${this.api}trek/?language=fr`;
-    if (this.portals) {
-      treksRequest += `&portals=${this.portals}`;
-    }
-    treksRequest += `&fields=id,name,attachments,description_teaser,difficulty,duration,ascent,length_2d,practice,route,departure_geom&page_size=999`;
+    let treksRequest = `${this.api}trek/?language=${this.language}`;
+    this.inBbox && (treksRequest += `&in_bbox=${this.inBbox}`);
+    this.cities && (treksRequest += `&cities=${this.cities}`);
+    this.districts && (treksRequest += `&districts=${this.districts}`);
+    this.structures && (treksRequest += `&structures=${this.structures}`);
+    this.themes && (treksRequest += `&themes=${this.themes}`);
+    this.portals && (treksRequest += `&portals=${this.portals}`);
+    this.routes && (treksRequest += `&routes=${this.routes}`);
+    this.practices && (treksRequest += `&practices=${this.practices}`);
+    treksRequest += `&fields=id,name,attachments,description_teaser,difficulty,duration,ascent,length_2d,practice,themes,route,departure,departure_geom&page_size=999`;
     return Promise.all([
+      fetch(`${this.api}trek_difficulty/?language=${this.language}&fields=id,label,pictogram`),
+      fetch(`${this.api}trek_route/?language=${this.language}&fields=id,route,pictogram`),
+      fetch(`${this.api}trek_practice/?language=${this.language}&fields=id,name,pictogram`),
+      fetch(`${this.api}theme/?language=${this.language}&fields=id,label,pictogram`),
       fetch(treksRequest),
-      fetch(`${this.api}trek_difficulty/?language=fr`),
-      fetch(`${this.api}trek_route/?language=fr`),
-      fetch(`${this.api}trek_practice/?language=fr`),
     ])
       .then(responses => Promise.all(responses.map(response => response.json())))
-      .then(([treks, difficulties, routes, practices]) => {
-      state.treks = treks.results;
+      .then(([difficulties, routes, practices, themes, treks]) => {
       state.difficulties = difficulties.results;
       state.routes = routes.results;
-      state.practices = practices.results;
+      state.practices = practices.results.map(practice => (Object.assign(Object.assign({}, practice), { selected: false })));
+      state.themes = themes.results;
+      state.durations = [
+        { id: 1, name: '0 - 1h', minValue: 0, maxValue: 1, selected: false },
+        { id: 2, name: '1 - 2h', minValue: 1, maxValue: 2, selected: false },
+        { id: 3, name: '2 - 5h', minValue: 2, maxValue: 5, selected: false },
+        { id: 4, name: '5 - 10h', minValue: 5, maxValue: 10, selected: false },
+      ];
+      state.treks = treks.results;
+      state.currentTreks = treks.results;
     });
   }
   render() {
     return h(Host, null);
   }
   static get is() { return "grw-treks-provider"; }
+  static get encapsulation() { return "shadow"; }
   static get properties() { return {
+    "language": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "language",
+      "reflect": false,
+      "defaultValue": "'fr'"
+    },
     "api": {
       "type": "string",
       "mutable": false,
@@ -44,6 +80,91 @@ export class GrwTreksProvider {
       "attribute": "api",
       "reflect": false
     },
+    "inBbox": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "in-bbox",
+      "reflect": false
+    },
+    "cities": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "cities",
+      "reflect": false
+    },
+    "districts": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "districts",
+      "reflect": false
+    },
+    "structures": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "structures",
+      "reflect": false
+    },
+    "themes": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "themes",
+      "reflect": false
+    },
     "portals": {
       "type": "string",
       "mutable": false,
@@ -60,6 +181,40 @@ export class GrwTreksProvider {
       },
       "attribute": "portals",
       "reflect": false
+    },
+    "routes": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "routes",
+      "reflect": false
+    },
+    "practices": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "practices",
+      "reflect": false
     }
   }; }
 }

package/dist/collection/store/store.js

@@ -2,10 +2,16 @@ import { createStore } from '@stencil/store';
 const { state, onChange } = createStore({
   api: '',
   treks: [],
+  currentTreks: [],
   difficulties: [],
   routes: [],
   practices: [],
+  themes: [],
+  durations: [],
+  currentSensitiveAreas: null,
+  currentPois: null,
   currentTrek: null,
+  currentInformationDesks: null,
 });
 export { onChange };
 export default state;

package/dist/collection/stories/App.js

@@ -1,9 +1,45 @@
-export const createApp = ({ api, portals, appName, colorPrimary, colorPrimaryTint }) => {
+export const createApp = ({
+  api,
+  language,
+  inBbox,
+  cities,
+  districts,
+  structures,
+  themes,
+  portals,
+  routes,
+  practices,
+  urlLayer,
+  attribution,
+  colorPrimary,
+  colorPrimaryShade,
+  colorPrimaryTint,
+  colorTrekLine,
+  colorDepartureIcon,
+  colorArrivalIcon,
+  colorSensitiveArea,
+  colorPoiIcon,
+}) => {
   const app = document.createElement('grw-app');
   app.setAttribute('api', api);
-  app.setAttribute('portals', portals);
-  app.setAttribute('app-name', appName);
+  app.setAttribute('language', language);
+  inBbox && app.setAttribute('in-bbox', inBbox);
+  cities && app.setAttribute('cities', cities);
+  districts && app.setAttribute('districts', districts);
+  structures && app.setAttribute('structures', structures);
+  themes && app.setAttribute('themes', themes);
+  portals && app.setAttribute('portals', portals);
+  routes && app.setAttribute('routes', routes);
+  practices && app.setAttribute('practices', practices);
+  app.setAttribute('url-layer', urlLayer);
+  app.setAttribute('attribution', attribution);
   app.setAttribute('color-primary', colorPrimary);
+  app.setAttribute('color-primary-shade', colorPrimaryShade);
   app.setAttribute('color-primary-tint', colorPrimaryTint);
+  app.setAttribute('color-trek-line', colorTrekLine);
+  app.setAttribute('color-departure-icon', colorDepartureIcon);
+  app.setAttribute('color-arrival-icon', colorArrivalIcon);
+  app.setAttribute('color-sensitive-area', colorSensitiveArea);
+  app.setAttribute('color-poi-icon', colorPoiIcon);
   return app;
 };

package/dist/collection/stories/App.stories.js

@@ -2,20 +2,45 @@ import { createApp } from './App';
 
 export default {
   title: 'Geotrek Rando Widget',
-  argTypes: {},
+  argTypes: {
+    urlLayer: {
+      control: 'select',
+      options: ['openstreetmap', 'planignv2'],
+      mapping: {
+        openstreetmap: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+        planignv2:
+          'https://wxs.ign.fr/cartes/geoportail/wmts?&REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&STYLE=normal&TILEMATRIXSET=PM&FORMAT=image/png&LAYER=GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}',
+      },
+    },
+  },
 };
 
-const Template = ({ label, ...args }) => {
-  return createApp({ label, ...args });
+const Template = ({ ...args }) => {
+  return createApp({ ...args });
 };
 
 export const App = Template.bind({});
 
 App.args = {
   api: 'https://randoadmin.parc-haut-jura.fr/api/v2/',
+  language: 'fr',
+  inBbox: '',
+  cities: '',
+  districts: '',
+  structures: '',
+  themes: '',
   portals: '',
-  appName: 'Geotrek Rando Widget',
+  routes: '',
+  practices: '',
+  urlLayer: 'openstreetmap',
+  attribution: '© <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a> contributors',
   colorPrimary: '#6b0030',
-  colorPrimaryTint: '#d2b2c0',
+  colorPrimaryShade: '4a0021',
+  colorPrimaryTint: '#974c6e',
+  colorTrekLine: '#6b0030',
+  colorDepartureIcon: '#006b3b',
+  colorArrivalIcon: '#85003b',
+  colorSensitiveArea: '#4974a5',
+  colorPoiIcon: '#974c6e',
 };
 App.storyName = 'App';

package/dist/collection/stories/TrekCard.js

@@ -1,7 +1,13 @@
-export const createTrekCard = ({ api, trekId }) => {
+export const createTrekCard = ({ api, language, trekId, colorPrimary, colorPrimaryTint }) => {
+  const container = document.createElement('div');
   const trek = document.createElement('grw-trek-provider');
   trek.setAttribute('api', api);
+  trek.setAttribute('language', language);
   trek.setAttribute('trek-id', trekId);
-  trek.appendChild(document.createElement('grw-trek-card'));
-  return trek;
+  container.appendChild(trek);
+  const card = document.createElement('grw-trek-card');
+  card.setAttribute('color-primary', colorPrimary);
+  card.setAttribute('color-primary-tint', colorPrimaryTint);
+  container.appendChild(card);
+  return container;
 };

package/dist/collection/stories/TrekCard.stories.js

@@ -5,14 +5,17 @@ export default {
   argTypes: {},
 };
 
-const Template = ({ label, ...args }) => {
-  return createTrekCard({ label, ...args });
+const Template = ({ ...args }) => {
+  return createTrekCard({ ...args });
 };
 
 export const TrekCard = Template.bind({});
 
 TrekCard.args = {
   api: 'https://randoadmin.parc-haut-jura.fr/api/v2/',
+  language: 'fr',
   trekId: 242872,
+  colorPrimary: '#6b0030',
+  colorPrimaryTint: '#974c6e',
 };
 TrekCard.storyName = 'Trek card';

package/dist/collection/stories/TrekDetail.js

@@ -1,7 +1,14 @@
-export const createTrekDetail = ({ api, trekId }) => {
+export const createTrekDetail = ({ api, language, trekId, colorPrimary, colorPrimaryShade, colorPrimaryTint }) => {
+  const container = document.createElement('div');
   const trek = document.createElement('grw-trek-provider');
   trek.setAttribute('api', api);
+  trek.setAttribute('language', language);
   trek.setAttribute('trek-id', trekId);
-  trek.appendChild(document.createElement('grw-trek-detail'));
-  return trek;
+  container.appendChild(trek);
+  const detail = document.createElement('grw-trek-detail');
+  detail.setAttribute('color-primary', colorPrimary);
+  detail.setAttribute('color-primary-shade', colorPrimaryShade);
+  detail.setAttribute('color-primary-tint', colorPrimaryTint);
+  container.appendChild(detail);
+  return container;
 };

package/dist/collection/stories/TrekDetail.stories.js

@@ -5,14 +5,18 @@ export default {
   argTypes: {},
 };
 
-const Template = ({ label, ...args }) => {
-  return createTrekDetail({ label, ...args });
+const Template = ({ ...args }) => {
+  return createTrekDetail({ ...args });
 };
 
 export const TrekDetail = Template.bind({});
 
 TrekDetail.args = {
   api: 'https://randoadmin.parc-haut-jura.fr/api/v2/',
+  language: 'fr',
   trekId: 242872,
+  colorPrimary: '#6b0030',
+  colorPrimaryShade: '4a0021',
+  colorPrimaryTint: '#974c6e',
 };
 TrekDetail.storyName = 'Trek detail';

package/dist/collection/stories/TrekMap.js

@@ -1,11 +1,20 @@
-export const createTrekMap = ({ api, trekId, trekLineColor, departureIconColor, arrivalIconColor }) => {
+export const createTrekMap = ({ api, trekId, urlLayer, center, zoom, attribution, colorTrekLine, colorDepartureIcon, colorArrivalIcon, colorSensitiveArea, colorPoiIcon }) => {
+  const container = document.createElement('div');
+  container.style = 'height: 100%';
   const trek = document.createElement('grw-trek-provider');
   trek.setAttribute('api', api);
   trek.setAttribute('trek-id', trekId);
+  container.appendChild(trek);
   const trekMap = document.createElement('grw-map');
-  trekMap.setAttribute('trek-line-color', trekLineColor);
-  trekMap.setAttribute('departure-icon-color', departureIconColor);
-  trekMap.setAttribute('arrival-icon-color', arrivalIconColor);
-  trek.appendChild(trekMap);
-  return trek;
+  trekMap.setAttribute('url-layer', urlLayer);
+  trekMap.setAttribute('center', center);
+  trekMap.setAttribute('zoom', zoom);
+  trekMap.setAttribute('attribution', attribution);
+  trekMap.setAttribute('color-trek-line', colorTrekLine);
+  trekMap.setAttribute('color-departure-icon', colorDepartureIcon);
+  trekMap.setAttribute('color-arrival-icon', colorArrivalIcon);
+  trekMap.setAttribute('color-sensitive-area', colorSensitiveArea);
+  trekMap.setAttribute('color-poi-icon', colorPoiIcon);
+  container.appendChild(trekMap);
+  return container;
 };

package/dist/collection/stories/TrekMap.stories.js

@@ -2,11 +2,20 @@ import { createTrekMap } from './TrekMap';
 
 export default {
   title: 'Geotrek Rando Widget',
-  argTypes: {},
+  argTypes: {
+    urlLayer: {
+      control: 'select',
+      options: ['openstreetmap', 'planignv2'],
+      mapping: {
+        openstreetmap: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+        planignv2: 'https://wxs.ign.fr/cartes/geoportail/wmts?&REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&STYLE=normal&TILEMATRIXSET=PM&FORMAT=image/png&LAYER=GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}',
+      },
+    },
+  },
 };
 
-const Template = ({ label, ...args }) => {
-  return createTrekMap({ label, ...args });
+const Template = ({ ...args }) => {
+  return createTrekMap({ ...args });
 };
 
 export const TrekMap = Template.bind({});
@@ -14,8 +23,14 @@ export const TrekMap = Template.bind({});
 TrekMap.args = {
   api: 'https://randoadmin.parc-haut-jura.fr/api/v2/',
   trekId: 242872,
-  trekLineColor: '#6b0030',
-  departureIconColor: '#006b3b',
-  arrivalIconColor: '#85003b',
+  urlLayer: 'openstreetmap',
+  center: '46.50761080179829, 5.927117067721017',
+  zoom: 8,
+  attribution: '© <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a> contributors',
+  colorTrekLine: '#6b0030',
+  colorDepartureIcon: '#006b3b',
+  colorArrivalIcon: '#85003b',
+  colorSensitiveArea: '#4974a5',
+  colorPoiIcon: '#974c6e',
 };
 TrekMap.storyName = 'Trek map';