@geotrekce/geotrek-rando-widget 0.0.2 → 0.0.5

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

@@ -4,20 +4,22 @@ export class GrwTreksList {
   constructor() {
     this.treksToDisplay = [];
     this.colorPrimary = '#6b0030';
-    this.colorPrimaryTint = '#d2b2c0';
+    this.colorPrimaryTint = '#974c6e';
+    this.isLargeView = false;
     this.handleInfiniteScrollBind = this.handleInfiniteScroll.bind(this);
     this.step = 10;
   }
   componentWillLoad() {
-    this.element.addEventListener('scroll', this.handleInfiniteScrollBind);
-    onChange('treks', () => {
-      this.treksToDisplay = state.treks.slice(0, this.step);
+    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);
@@ -25,7 +27,9 @@ export class GrwTreksList {
     }
   }
   render() {
-    return (h(Host, { style: { '--color-primary': this.colorPrimary, '--color-primary-tint': this.colorPrimaryTint } }, this.treksToDisplay.map(trek => (h("grw-trek-card", { trek: trek, "color-primary": this.colorPrimary, "color-primary-tint": this.colorPrimaryTint })))));
+    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"; }
@@ -70,7 +74,25 @@ export class GrwTreksList {
       },
       "attribute": "color-primary-tint",
       "reflect": false,
-      "defaultValue": "'#d2b2c0'"
+      "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 {

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

@@ -6,17 +6,45 @@ export class GrwTrekProvider {
   }
   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_difficulty/?language=${this.language}`),
-      fetch(`${this.api}trek_route/?language=${this.language}`),
-      fetch(`${this.api}trek_practice/?language=${this.language}`),
-      fetch(`${this.api}trek/${this.trekId}/?language=${this.language}&fields=id,name,attachments,description,description_teaser,difficulty,duration,ascent,length_2d,practice,route,geometry`),
+      ...requests,
+      fetch(`${this.api}sensitivearea/?language=${this.language}&published=true&trek=${this.trekId}&fields=id,geometry,name,description,contact,info_url,period,practices`).catch(() => new Response('null')),
+      fetch(`${this.api}label/?language=${this.language}&fields=id,name,advice,pictogram`),
+      fetch(`${this.api}source/?language=${this.language}&fields=id,name,website,pictogram`),
+      fetch(`${this.api}trek_accessibility/?language=${this.language}&fields=id,name,pictogram`),
+      fetch(`${this.api}trek_accessibility_level/?language=${this.language}&fields=id,name`),
+      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,arrival,altimetric_profile,ambiance,access,public_transport,advice,advised_parking,gear,labels,source,points_reference,disabled_infrastructure,accessibility_level,accessibility_slope,accessibility_width,accessibility_signage,accessibility_covering,accessibility_exposure,accessibility_advice,accessibilities`),
     ])
       .then(responses => Promise.all(responses.map(response => response.json())))
-      .then(([difficulties, routes, practices, trek]) => {
-      state.difficulties = difficulties.results;
-      state.routes = routes.results;
-      state.practices = practices.results;
+      .then(([difficulties, routes, practices, themes, sensitiveAreas, labels, sources, accessibilities, accessibilitiesLevel, 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.labels = labels.results;
+      state.sources = sources.results;
+      state.accessibilities = accessibilities.results;
+      state.accessibilitiesLevel = accessibilitiesLevel.results;
+      state.currentPois = pois.results;
+      state.currentInformationDesks = informationDesks.results;
       state.currentTrek = trek;
     });
   }

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

@@ -6,7 +6,7 @@ export class GrwTreksProvider {
   }
   componentWillLoad() {
     state.api = this.api;
-    let treksRequest = `${this.api}trek/?language=${this.language}`;
+    let treksRequest = `${this.api}trek/?language=${this.language}&published=true`;
     this.inBbox && (treksRequest += `&in_bbox=${this.inBbox}`);
     this.cities && (treksRequest += `&cities=${this.cities}`);
     this.districts && (treksRequest += `&districts=${this.districts}`);
@@ -15,19 +15,28 @@ export class GrwTreksProvider {
     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,route,departure_geom&page_size=999`;
+    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}`),
-      fetch(`${this.api}trek_route/?language=${this.language}`),
-      fetch(`${this.api}trek_practice/?language=${this.language}`),
+      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),
     ])
       .then(responses => Promise.all(responses.map(response => response.json())))
-      .then(([difficulties, routes, practices, treks]) => {
+      .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() {

package/dist/collection/store/store.js

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

package/dist/collection/stories/App.js

@@ -1,5 +1,6 @@
 export const createApp = ({
   api,
+  language,
   inBbox,
   cities,
   districts,
@@ -8,32 +9,37 @@ export const createApp = ({
   portals,
   routes,
   practices,
-  appName,
   urlLayer,
   attribution,
   colorPrimary,
+  colorPrimaryShade,
   colorPrimaryTint,
-  trekLineColor,
-  departureIconColor,
-  arrivalIconColor,
+  colorTrekLine,
+  colorDepartureIcon,
+  colorArrivalIcon,
+  colorSensitiveArea,
+  colorPoiIcon,
 }) => {
   const app = document.createElement('grw-app');
   app.setAttribute('api', api);
-  app.setAttribute('in-bbox', inBbox);
-  app.setAttribute('cities', cities);
-  app.setAttribute('districts', districts);
-  app.setAttribute('structures', structures);
-  app.setAttribute('themes', themes);
-  app.setAttribute('portals', portals);
-  app.setAttribute('routes', routes);
-  app.setAttribute('practices', practices);
-  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('trek-line-color', trekLineColor);
-  app.setAttribute('departure-icon-color', departureIconColor);
-  app.setAttribute('arrival-icon-color', arrivalIconColor);
+  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

@@ -5,22 +5,25 @@ export default {
   argTypes: {
     urlLayer: {
       control: 'select',
-      options: ['openstreetmap'],
+      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: '',
@@ -29,13 +32,15 @@ App.args = {
   portals: '',
   routes: '',
   practices: '',
-  appName: 'Geotrek Rando Widget',
   urlLayer: 'openstreetmap',
-  attribution: '© OpenStreetMap',
+  attribution: '© <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a> contributors',
   colorPrimary: '#6b0030',
-  colorPrimaryTint: '#d2b2c0',
-  trekLineColor: '#6b0030',
-  departureIconColor: '#006b3b',
-  arrivalIconColor: '#85003b',
+  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,8 @@
-export const createTrekCard = ({ api, trekId, colorPrimary, colorPrimaryTint }) => {
+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);
   container.appendChild(trek);
   const card = document.createElement('grw-trek-card');

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

@@ -5,16 +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: '#d2b2c0',
+  colorPrimaryTint: '#974c6e',
 };
 TrekCard.storyName = 'Trek card';

package/dist/collection/stories/TrekDetail.js

@@ -1,11 +1,13 @@
-export const createTrekDetail = ({ api, trekId, colorPrimary, colorPrimaryTint }) => {
+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);
   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,16 +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',
-  colorPrimaryTint: '#d2b2c0',
+  colorPrimaryShade: '4a0021',
+  colorPrimaryTint: '#974c6e',
 };
 TrekDetail.storyName = 'Trek detail';

package/dist/collection/stories/TrekMap.js

@@ -1,4 +1,4 @@
-export const createTrekMap = ({ api, trekId, urlLayer, center, zoom, attribution, 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');
@@ -10,9 +10,11 @@ export const createTrekMap = ({ api, trekId, urlLayer, center, zoom, attribution
   trekMap.setAttribute('center', center);
   trekMap.setAttribute('zoom', zoom);
   trekMap.setAttribute('attribution', attribution);
-  trekMap.setAttribute('trek-line-color', trekLineColor);
-  trekMap.setAttribute('departure-icon-color', departureIconColor);
-  trekMap.setAttribute('arrival-icon-color', arrivalIconColor);
+  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

@@ -5,16 +5,17 @@ export default {
   argTypes: {
     urlLayer: {
       control: 'select',
-      options: ['openstreetmap'],
+      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({});
@@ -25,9 +26,11 @@ TrekMap.args = {
   urlLayer: 'openstreetmap',
   center: '46.50761080179829, 5.927117067721017',
   zoom: 8,
-  attribution: '© OpenStreetMap',
-  trekLineColor: '#6b0030',
-  departureIconColor: '#006b3b',
-  arrivalIconColor: '#85003b',
+  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';

package/dist/collection/stories/TreksList.js

@@ -1,15 +1,16 @@
-export const createTreksList = ({ api, inBbox, cities, districts, structures, themes, portals, routes, practices, colorPrimary, colorPrimaryTint }) => {
+export const createTreksList = ({ api, language, inBbox, cities, districts, structures, themes, portals, routes, practices, colorPrimary, colorPrimaryTint }) => {
   const container = document.createElement('div');
   const treks = document.createElement('grw-treks-provider');
   treks.setAttribute('api', api);
-  treks.setAttribute('in-bbox', inBbox);
-  treks.setAttribute('cities', cities);
-  treks.setAttribute('districts', districts);
-  treks.setAttribute('structures', structures);
-  treks.setAttribute('themes', themes);
-  treks.setAttribute('portals', portals);
-  treks.setAttribute('routes', routes);
-  treks.setAttribute('practices', practices);
+  treks.setAttribute('language', language);
+  inBbox && treks.setAttribute('in-bbox', inBbox);
+  cities && treks.setAttribute('cities', cities);
+  districts && treks.setAttribute('districts', districts);
+  structures && treks.setAttribute('structures', structures);
+  themes && treks.setAttribute('themes', themes);
+  portals && treks.setAttribute('portals', portals);
+  routes && treks.setAttribute('routes', routes);
+  practices && treks.setAttribute('practices', practices);
   container.appendChild(treks);
   const list = document.createElement('grw-treks-list');
   list.setAttribute('color-primary', colorPrimary);

package/dist/collection/stories/TreksList.stories.js

@@ -5,14 +5,15 @@ export default {
   argTypes: {},
 };
 
-const Template = ({ label, ...args }) => {
-  return createTreksList({ label, ...args });
+const Template = ({ ...args }) => {
+  return createTreksList({ ...args });
 };
 
 export const TreksList = Template.bind({});
 
 TreksList.args = {
   api: 'https://randoadmin.parc-haut-jura.fr/api/v2/',
+  language: 'fr',
   inBbox: '',
   cities: '',
   districts: '',
@@ -22,6 +23,6 @@ TreksList.args = {
   routes: '',
   practices: '',
   colorPrimary: '#6b0030',
-  colorPrimaryTint: '#d2b2c0',
+  colorPrimaryTint: '#974c6e',
 };
 TreksList.storyName = 'Treks list';

package/dist/collection/stories/TreksMap.stories.js

@@ -5,16 +5,17 @@ export default {
   argTypes: {
     urlLayer: {
       control: 'select',
-      options: ['openstreetmap'],
+      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 createTreksMap({ label, ...args });
+const Template = ({ ...args }) => {
+  return createTreksMap({ ...args });
 };
 
 export const TreksMap = Template.bind({});
@@ -24,8 +25,8 @@ TreksMap.args = {
   urlLayer: 'openstreetmap',
   center: '46.50761080179829, 5.927117067721017',
   zoom: 8,
-  attribution: '© OpenStreetMap',
+  attribution: '© <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a> contributors',
   colorPrimary: '#6b0030',
-  colorPrimaryTint: '#d2b2c0',
+  colorPrimaryTint: '#974c6e',
 };
 TreksMap.storyName = 'Treks map';

package/dist/collection/utils/utils.js

@@ -12,8 +12,8 @@ export function formatDuration(duration) {
   return formattedDuration;
 }
 export function formatLength(length) {
-  return `${Math.round(length / 1000)} km`;
+  return `${Math.round(length / 1000)}km`;
 }
 export function formatAscent(ascent) {
-  return `${ascent} m`;
+  return `${ascent}m`;
 }