@geotrekce/geotrek-rando-widget 0.0.21 → 0.2.0

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

@@ -1,29 +1,66 @@
-import { Host, h, getAssetPath } from '@stencil/core';
+import { Host, h, getAssetPath, Build } from '@stencil/core';
 import L from 'leaflet';
+import 'leaflet.locatecontrol';
+import '@raruto/leaflet-elevation/dist/leaflet-elevation.min.js';
 import state, { onChange, reset } from 'store/store';
+import { translate } from 'i18n/i18n';
 export class GrwMap {
   constructor() {
+    this.userLayersState = {};
     this.handleTreksWithinBoundsBind = this.handleTreksWithinBounds.bind(this);
     this.mapIsReady = false;
     this.urlLayer = undefined;
     this.attribution = undefined;
     this.center = '1, 1';
     this.zoom = 10;
-    this.colorPrimary = '#6b0030';
-    this.colorPrimaryTint = '#974c6e';
+    this.colorPrimaryApp = '#6b0030';
+    this.colorOnSurface = '#49454e';
+    this.colorPrimaryContainer = '#eaddff';
+    this.colorOnPrimaryContainer = '#21005e';
+    this.colorBackground = '#fef7ff';
     this.colorTrekLine = '#6b0030';
     this.colorDepartureIcon = '#006b3b';
     this.colorArrivalIcon = '#85003b';
     this.colorSensitiveArea = '	#4974a5';
     this.colorPoiIcon = '#974c6e';
     this.resetStoreOnDisconnected = true;
+    this.isLargeView = false;
+  }
+  onCenterOnMap(event) {
+    this.map.setView(new L.LatLng(event.detail.latitude, event.detail.longitude), 17, { animate: false });
+  }
+  descriptionReferenceIsInViewport(event) {
+    if (this.currentPointsReferenceLayer) {
+      this.handleLayerVisibility(event.detail, this.currentPointsReferenceLayer);
+    }
+  }
+  parkingIsInViewport(event) {
+    if (this.currentParkingLayer) {
+      this.handleLayerVisibility(event.detail, this.currentParkingLayer);
+    }
+  }
+  onInformationDesksIsInViewport(event) {
+    if (this.currentInformationDesksLayer) {
+      this.handleLayerVisibility(event.detail, this.currentInformationDesksLayer);
+    }
+  }
+  sensitiveAreaIsInViewport(event) {
+    if (this.currentSensitiveAreasLayer) {
+      this.handleLayerVisibility(event.detail, this.currentSensitiveAreasLayer);
+    }
+  }
+  poiIsInViewport(event) {
+    if (this.currentPoisLayer) {
+      this.handleLayerVisibility(event.detail, this.currentPoisLayer);
+    }
   }
   componentDidLoad() {
-    this.map = L.map(this.element, {
+    this.map = L.map(this.mapRef, {
       center: this.center.split(',').map(Number),
       zoom: this.zoom,
     });
-    L.control.scale().addTo(this.map);
+    L.control.scale({ metric: true, imperial: false }).addTo(this.map);
+    L.control.locate({ showPopup: false }).addTo(this.map);
     L.tileLayer(this.urlLayer, {
       maxZoom: 19,
       attribution: this.attribution,
@@ -55,6 +92,15 @@ export class GrwMap {
       }
     });
   }
+  handleLayerVisibility(visible, layer) {
+    if (visible && !this.map.hasLayer(layer)) {
+      layer.addTo(this.map);
+    }
+    else if (this.map.hasLayer(layer) && !this.userLayersState[layer._leaflet_id]) {
+      this.map.removeLayer(layer);
+    }
+    this.handleLayersControlEvent();
+  }
   addTreks() {
     var _a;
     const trekscurrentDepartureCoordinates = [];
@@ -77,14 +123,14 @@ export class GrwMap {
         });
       }
     }
+    let bounds;
     if (!this.treksLayer) {
       if (trekscurrentDepartureCoordinates.length > 0 && !state.currentMapTreksBounds) {
-        const bounds = L.latLngBounds(trekscurrentDepartureCoordinates.map(coordinate => [coordinate[1], coordinate[0]]));
-        this.map.fitBounds(bounds);
+        bounds = L.latLngBounds(trekscurrentDepartureCoordinates.map(coordinate => [coordinate[1], coordinate[0]]));
       }
       else {
         if (state.currentMapTreksBounds) {
-          this.map.fitBounds(state.currentMapTreksBounds);
+          bounds = state.currentMapTreksBounds;
         }
       }
       this.treksLayer = L.geoJSON(treksFeatureCollection, {
@@ -118,8 +164,7 @@ export class GrwMap {
     }
     else {
       if (trekscurrentDepartureCoordinates.length > 0) {
-        const bounds = L.latLngBounds(trekscurrentDepartureCoordinates.map(coordinate => [coordinate[1], coordinate[0]]));
-        this.map.fitBounds(bounds);
+        bounds = L.latLngBounds(trekscurrentDepartureCoordinates.map(coordinate => [coordinate[1], coordinate[0]]));
       }
       else {
         this.map.fire('moveend');
@@ -127,6 +172,7 @@ export class GrwMap {
       this.treksLayer.clearLayers();
       this.treksLayer.addData(treksFeatureCollection);
     }
+    this.map.fitBounds(bounds);
     !this.mapIsReady && (this.mapIsReady = !this.mapIsReady);
     this.map.on('moveend', this.handleTreksWithinBoundsBind);
   }
@@ -146,7 +192,7 @@ export class GrwMap {
   }
   addTrek() {
     var _a;
-    const departureArrivalImageSrc = getAssetPath(`assets/departure-arrival.svg`);
+    const departureArrivalImageSrc = getAssetPath(`${Build.isDev ? '/' : ''}assets/departure-arrival.svg`);
     const currentTrekFeature = {
       type: 'Feature',
       geometry: state.currentTrek.geometry,
@@ -154,12 +200,10 @@ export class GrwMap {
     };
     this.currentTrekLayer = L.geoJSON(currentTrekFeature, {
       style: () => ({
-        color: this.colorTrekLine,
+        color: 'transparent',
       }),
       interactive: false,
     }).addTo(this.map);
-    const bounds = L.latLngBounds(state.currentTrek.geometry.coordinates.map(coordinate => [coordinate[1], coordinate[0]]));
-    this.map.fitBounds(bounds);
     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 = {
@@ -208,7 +252,7 @@ export class GrwMap {
           autoPanOnFocus: false,
           interactive: false,
         }),
-      }).addTo(this.map);
+      });
     }
     if (state.currentSensitiveAreas && state.currentSensitiveAreas.length > 0) {
       const currentSensitiveAreasFeatureCollection = {
@@ -235,31 +279,7 @@ export class GrwMap {
           });
         },
         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 = {
@@ -293,19 +313,21 @@ export class GrwMap {
             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)] },
-        });
+      for (const currentInformationDesk of state.currentInformationDesks.filter(currentInformationDesks => state.currentTrek.information_desks.includes(currentInformationDesks.id))) {
+        if (currentInformationDesk.latitude && currentInformationDesk.longitude) {
+          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, {
@@ -327,7 +349,7 @@ export class GrwMap {
             layer.bindTooltip(informationDesksTooltip).openTooltip();
           });
         },
-      }).addTo(this.map);
+      });
     }
     if (state.currentTrek.points_reference) {
       const currentPointsReferenceFeatureCollection = {
@@ -353,11 +375,84 @@ export class GrwMap {
             interactive: false,
           });
         },
-      }).addTo(this.map);
+      });
+    }
+    const elevationOptions = {
+      srcFolder: 'http://unpkg.com/@raruto/leaflet-elevation/src/',
+      elevationDiv: `#${this.elevationRef.id}`,
+      theme: 'custom-theme',
+      detached: true,
+      height: 250,
+      wptIcons: false,
+      wptLabels: false,
+      collapsed: false,
+      autohide: false,
+      distanceMarkers: false,
+      hotline: false,
+      closeBtn: false,
+      summary: false,
+      time: false,
+      timestamps: false,
+      legend: false,
+      downloadLink: false,
+      autofitBounds: false,
+      ruler: false,
+      edgeScale: false,
+      waypoints: false,
+      almostOver: false,
+      speed: false,
+      slope: false,
+      acceleration: false,
+      reverseCoords: false,
+      imperial: false,
+    };
+    this.elevationControl = L.control.elevation(Object.assign({}, elevationOptions)).addTo(this.map);
+    const elevation = JSON.stringify({
+      name: `${state.currentTrek.name}`,
+      type: 'FeatureCollection',
+      features: [{ type: 'Feature', geometry: { type: 'LineString', coordinates: state.currentTrek.geometry.coordinates }, properties: null }],
+    });
+    this.elevationControl.load(elevation);
+    const overlays = {};
+    if (this.currentPointsReferenceLayer) {
+      overlays[translate[state.language].layers.pointsReference] = this.currentPointsReferenceLayer;
+    }
+    if (this.currentParkingLayer) {
+      overlays[translate[state.language].layers.parking] = this.currentParkingLayer;
+    }
+    if (this.currentSensitiveAreasLayer) {
+      overlays[translate[state.language].layers.sensitiveArea] = this.currentSensitiveAreasLayer;
     }
+    if (this.currentInformationDesksLayer) {
+      overlays[translate[state.language].layers.informationPlaces] = this.currentInformationDesksLayer;
+    }
+    if (this.currentPoisLayer) {
+      overlays[translate[state.language].layers.pois] = this.currentPoisLayer;
+    }
+    this.layersControl = L.control.layers(null, overlays, { collapsed: true }).addTo(this.map);
+    this.handleLayersControlEvent();
+    const bounds = L.latLngBounds(state.currentTrek.geometry.coordinates.map(coordinate => [coordinate[1], coordinate[0]]));
+    this.map.fitBounds(bounds);
     !this.mapIsReady && (this.mapIsReady = !this.mapIsReady);
   }
+  handleLayersControlEvent() {
+    const userLayersState = this.layersControl._layerControlInputs;
+    userLayersState.forEach((userLayerState) => {
+      userLayerState.onchange = event => {
+        this.userLayersState[userLayerState.layerId] = event.target.checked;
+      };
+    });
+  }
   removeTrek() {
+    if (this.layersControl) {
+      this.map.removeControl(this.layersControl);
+      this.layersControl = null;
+    }
+    if (this.elevationControl) {
+      this.elevationControl.clear();
+      this.map.removeControl(this.elevationControl);
+      this.elevationControl = null;
+    }
     if (this.currentTrekLayer) {
       this.map.removeLayer(this.currentTrekLayer);
       this.currentTrekLayer = null;
@@ -373,8 +468,6 @@ export class GrwMap {
     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);
@@ -395,13 +488,20 @@ export class GrwMap {
     }
   }
   render() {
+    const layersImageSrc = getAssetPath(`${Build.isDev ? '/' : ''}assets/layers.svg`);
     return (h(Host, { style: {
-        '--color-primary': this.colorPrimary,
-        '--color-primary-tint': this.colorPrimaryTint,
+        '--color-primary-app': this.colorPrimaryApp,
+        '--color-on-surface': this.colorOnSurface,
+        '--color-primary-container': this.colorPrimaryContainer,
+        '--color-on-primary-container': this.colorOnPrimaryContainer,
+        '--color-background': this.colorBackground,
         '--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" })))));
+        '--color-trek-line': this.colorTrekLine,
+        '--layers-image-src': `url(${layersImageSrc})`,
+        '--map-bottom-space-height': this.isLargeView ? '0px' : '70px',
+      } }, h("div", { id: "map", class: state.currentTrek ? 'trek-map' : 'treks-map', ref: el => (this.mapRef = el) }), h("div", { id: "elevation", ref: el => (this.elevationRef = el) }), h("div", { class: "map-bottom-space" }), !this.mapIsReady && (h("div", { class: "map-loader-container" }, h("span", { class: "loader" })))));
   }
   static get is() { return "grw-map"; }
   static get originalStyleUrls() {
@@ -486,7 +586,7 @@ export class GrwMap {
         "reflect": false,
         "defaultValue": "10"
       },
-      "colorPrimary": {
+      "colorPrimaryApp": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -500,11 +600,11 @@ export class GrwMap {
           "tags": [],
           "text": ""
         },
-        "attribute": "color-primary",
+        "attribute": "color-primary-app",
         "reflect": false,
         "defaultValue": "'#6b0030'"
       },
-      "colorPrimaryTint": {
+      "colorOnSurface": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -518,9 +618,63 @@ export class GrwMap {
           "tags": [],
           "text": ""
         },
-        "attribute": "color-primary-tint",
+        "attribute": "color-on-surface",
         "reflect": false,
-        "defaultValue": "'#974c6e'"
+        "defaultValue": "'#49454e'"
+      },
+      "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'"
+      },
+      "colorBackground": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "color-background",
+        "reflect": false,
+        "defaultValue": "'#fef7ff'"
       },
       "colorTrekLine": {
         "type": "string",
@@ -629,6 +783,24 @@ export class GrwMap {
         "attribute": "reset-store-on-disconnected",
         "reflect": false,
         "defaultValue": "true"
+      },
+      "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"
       }
     };
   }
@@ -655,6 +827,44 @@ export class GrwMap {
         }
       }];
   }
-  static get elementRef() { return "element"; }
+  static get listeners() {
+    return [{
+        "name": "centerOnMap",
+        "method": "onCenterOnMap",
+        "target": "window",
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "descriptionReferenceIsInViewport",
+        "method": "descriptionReferenceIsInViewport",
+        "target": "window",
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "parkingIsInViewport",
+        "method": "parkingIsInViewport",
+        "target": "window",
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "informationDeskIsInViewport",
+        "method": "onInformationDesksIsInViewport",
+        "target": "window",
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "sensitiveAreaIsInViewport",
+        "method": "sensitiveAreaIsInViewport",
+        "target": "window",
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "poiIsInViewport",
+        "method": "poiIsInViewport",
+        "target": "window",
+        "capture": false,
+        "passive": false
+      }];
+  }
 }
 //# sourceMappingURL=grw-map.js.map