@geotrekce/geotrek-rando-widget 0.4.4 → 0.4.6

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

@@ -14,6 +14,7 @@ export class GrwMap {
     this.tileLayer = [];
     this.handleTreksWithinBoundsBind = this.handleTreksWithinBounds.bind(this);
     this.handleTouristicContentsWithinBoundsBind = this.handleTouristicContentsWithinBounds.bind(this);
+    this.handleTouristicEventsWithinBoundsBind = this.handleTouristicEventsWithinBounds.bind(this);
     this.mapIsReady = false;
     this.nameLayer = undefined;
     this.urlLayer = undefined;
@@ -109,6 +110,15 @@ export class GrwMap {
     state.selectedTouristicContentId = null;
     this.removeSelectedTouristicContent();
   }
+  onTouristicEventMouseOver(event) {
+    this.touristicEventPopupIsOpen = false;
+    state.selectedTouristicEventId = null;
+    this.addSelectedTouristicEvent(event.detail);
+  }
+  onTouristicEventMouseLeave() {
+    state.selectedTouristicEventId = null;
+    this.removeSelectedTouristicEvent();
+  }
   componentDidLoad() {
     this.map = L.map(this.mapRef, {
       center: this.center.split(',').map(Number),
@@ -167,12 +177,22 @@ export class GrwMap {
     else if (state.touristicContents) {
       this.addTouristicContents();
     }
+    else if (state.touristicEvents) {
+      this.addTouristicEvents();
+    }
     onChange('currentTreks', () => {
+      this.hideTrekLine();
+      this.removeSelectedCurrentTrek();
+      this.removeSelectedTouristicContent();
+      this.removeSelectedTouristicEvent();
       if (state.currentTrek) {
         this.removeTreks();
         this.addTrek();
       }
       else if (state.currentTreks) {
+        this.removeTreks();
+        this.removeTouristicContents();
+        this.removeTouristicEvents();
         this.removeTrek();
         this.removeTouristicContent();
         this.removeTouristicEvent();
@@ -213,6 +233,7 @@ export class GrwMap {
     onChange('currentTouristicEvent', () => {
       if (state.currentTouristicEvent) {
         this.removeTrek();
+        this.removeTouristicEvents();
         this.addTouristicEvent();
       }
       else if (state.currentTrek) {
@@ -225,28 +246,63 @@ export class GrwMap {
       }
     });
     onChange('currentTouristicContents', () => {
+      this.hideTrekLine();
+      this.removeSelectedCurrentTrek();
+      this.removeSelectedTouristicContent();
+      this.removeSelectedTouristicEvent();
       if (state.currentTouristicContent) {
         this.removeTouristicContents();
         this.addTouristicContent();
       }
       else if (state.currentTouristicContents) {
+        this.removeTreks();
+        this.removeTouristicEvents();
         this.removeTouristicContent();
         this.addTouristicContents(true);
       }
     });
+    onChange('currentTouristicEvents', () => {
+      this.hideTrekLine();
+      this.removeSelectedCurrentTrek();
+      this.removeSelectedTouristicContent();
+      this.removeSelectedTouristicEvent();
+      if (state.currentTouristicEvent) {
+        this.removeTouristicEvents();
+        this.addTouristicEvent();
+      }
+      else if (state.currentTouristicEvents) {
+        this.removeTreks();
+        this.removeTouristicContents();
+        this.removeTouristicEvent();
+        this.addTouristicEvents(true);
+      }
+    });
     onChange('mode', () => {
+      this.hideTrekLine();
+      this.removeSelectedCurrentTrek();
+      this.removeSelectedTouristicContent();
+      this.removeSelectedTouristicEvent();
       if (state.mode === 'treks') {
         if (state.treks) {
           this.removeTouristicContents();
+          this.removeTouristicEvents();
           this.addTreks(true);
         }
       }
       else if (state.mode === 'touristicContents') {
         if (state.touristicContents) {
           this.removeTreks();
+          this.removeTouristicEvents();
           this.addTouristicContents(true);
         }
       }
+      else if (state.mode === 'touristicEvents') {
+        if (state.touristicEvents) {
+          this.removeTreks();
+          this.removeTouristicContents();
+          this.addTouristicEvents(true);
+        }
+      }
     });
   }
   handleLayerVisibility(visible, layer) {
@@ -298,7 +354,7 @@ export class GrwMap {
               : `<div class="trek-marker-container"></div>`,
             className: 'trek-marker',
             iconSize: 32,
-            iconAnchor: [18, 0],
+            iconAnchor: [16, 32],
           }),
           autoPanOnFocus: false,
         }),
@@ -333,7 +389,7 @@ export class GrwMap {
         showCoverageOnHover: false,
         removeOutsideVisibleBounds: false,
         iconCreateFunction: cluster => {
-          return L.divIcon({ html: '<div>' + cluster.getChildCount() + '</div>', className: 'treks-marker-cluster-group-icon', iconSize: 48, iconAnchor: [24, 24] });
+          return L.divIcon({ html: '<div>' + cluster.getChildCount() + '</div>', className: 'treks-marker-cluster-group-icon', iconSize: 48, iconAnchor: [24, 48] });
         },
       });
       this.treksMarkerClusterGroup.addLayer(this.treksLayer);
@@ -376,6 +432,12 @@ export class GrwMap {
       state.touristicContentsWithinBounds = state.currentTouristicContents.filter(touristicContent => this.map.getBounds().contains(L.latLng(touristicContent.geometry.coordinates[1], touristicContent.geometry.coordinates[0])));
     }
   }
+  handleTouristicEventsWithinBounds() {
+    if ((state.currentTouristicEvents && !state.currentMapBounds) ||
+      (state.currentTouristicEvents && state.currentMapBounds && state.currentMapBounds.toBBoxString() !== this.map.getBounds().toBBoxString())) {
+      state.touristicEventsWithinBounds = state.currentTouristicEvents.filter(touristicEvent => this.map.getBounds().contains(L.latLng(touristicEvent.geometry.coordinates[1], touristicEvent.geometry.coordinates[0])));
+    }
+  }
   addTrek() {
     var _a, _b, _c, _d;
     this.trekPopupIsOpen = false;
@@ -405,7 +467,7 @@ export class GrwMap {
             html: '<div>P</div>',
             className: 'parking-icon',
             iconSize: 48,
-            iconAnchor: [0, 48],
+            iconAnchor: [24, 48],
           }),
           autoPanOnFocus: false,
           interactive: false,
@@ -638,7 +700,7 @@ export class GrwMap {
               html: `<div class="step-marker-container"><div class="step-number">${stepIndex}</div></div>`,
               className: 'step-marker',
               iconSize: 32,
-              iconAnchor: [18, 0],
+              iconAnchor: [16, 32],
             }),
             autoPanOnFocus: false,
           });
@@ -783,7 +845,7 @@ export class GrwMap {
             : `<div class="trek-marker-container"></div>`,
           className: 'selected-trek-marker',
           iconSize: 64,
-          iconAnchor: [36, 36],
+          iconAnchor: [32, 64],
         }),
         autoPanOnFocus: false,
       }),
@@ -862,7 +924,7 @@ export class GrwMap {
           html: `<div class="step-marker-container"><div class="step-number">${geoJsonPoint.properties.index}</div></div>`,
           className: 'selected-step-marker',
           iconSize: 64,
-          iconAnchor: [36, 36],
+          iconAnchor: [32, 64],
         }),
         autoPanOnFocus: false,
       }),
@@ -906,9 +968,11 @@ export class GrwMap {
     }).addTo(this.map);
   }
   removeSelectedCurrentStep() {
-    state.selectedStepId = null;
-    this.selectedCurrentStepLayer && this.map.removeLayer(this.selectedCurrentStepLayer);
-    this.selectedCurrentStepLayer = null;
+    if (state.selectedStepId) {
+      state.selectedStepId = null;
+      this.selectedCurrentStepLayer && this.map.removeLayer(this.selectedCurrentStepLayer);
+      this.selectedCurrentStepLayer = null;
+    }
   }
   handleLayersControlEvent() {
     const userLayersState = this.layersControl._layerControlInputs;
@@ -1030,7 +1094,7 @@ export class GrwMap {
               : `<div class="touristic-content-marker-container"></div>`,
             className: 'touristic-content-marker',
             iconSize: 32,
-            iconAnchor: [18, 0],
+            iconAnchor: [16, 64],
           }),
           autoPanOnFocus: false,
         }),
@@ -1063,6 +1127,7 @@ export class GrwMap {
             id: currentTouristicContent.id,
             name: currentTouristicContent.name,
             practice: state.touristicContentCategories.find(touristicContentCategory => touristicContentCategory.id === currentTouristicContent.category).pictogram,
+            imgSrc: currentTouristicContent.attachments && currentTouristicContent.attachments.length > 0 && currentTouristicContent.attachments[0].thumbnail,
           },
         });
       }
@@ -1084,7 +1149,7 @@ export class GrwMap {
               : `<div class="touristic-content-marker-container"></div>`,
             className: 'touristic-content-marker',
             iconSize: 32,
-            iconAnchor: [18, 0],
+            iconAnchor: [16, 64],
           }),
           autoPanOnFocus: false,
         }),
@@ -1093,9 +1158,9 @@ export class GrwMap {
             const touristicContentCoordinatesPopup = L.DomUtil.create('div');
             touristicContentCoordinatesPopup.className = 'touristic-content-coordinates-popup';
             if (geoJsonPoint.properties.imgSrc) {
-              const touristicCotentImg = L.DomUtil.create('img');
-              touristicCotentImg.src = geoJsonPoint.properties.imgSrc;
-              touristicContentCoordinatesPopup.appendChild(touristicCotentImg);
+              const touristicContentImg = L.DomUtil.create('img');
+              touristicContentImg.src = geoJsonPoint.properties.imgSrc;
+              touristicContentCoordinatesPopup.appendChild(touristicContentImg);
             }
             const touristicContentName = L.DomUtil.create('div');
             touristicContentName.innerHTML = geoJsonPoint.properties.name;
@@ -1121,7 +1186,7 @@ export class GrwMap {
             html: '<div>' + cluster.getChildCount() + '</div>',
             className: 'touristic-content-marker-cluster-group-icon',
             iconSize: 48,
-            iconAnchor: [24, 24],
+            iconAnchor: [24, 64],
           });
         },
       });
@@ -1178,7 +1243,7 @@ export class GrwMap {
               : `<div class="touristic-event-marker-container"></div>`,
             className: 'touristic-event-marker',
             iconSize: 32,
-            iconAnchor: [18, 0],
+            iconAnchor: [16, 64],
           }),
           autoPanOnFocus: false,
         }),
@@ -1221,10 +1286,10 @@ export class GrwMap {
         icon: L.divIcon({
           html: geoJsonPoint.properties.category
             ? `<div class="touristic-content-marker-container"><img src=${geoJsonPoint.properties.category} /></div>`
-            : `<div class="touristic-content-trek-marker-container"></div>`,
+            : `<div class="touristic-content-marker-container"></div>`,
           className: 'selected-touristic-content-marker',
           iconSize: 64,
-          iconAnchor: [36, 36],
+          iconAnchor: [32, 64],
         }),
         autoPanOnFocus: false,
       }),
@@ -1272,6 +1337,193 @@ export class GrwMap {
     this.selectedTouristicContentLayer && this.map.removeLayer(this.selectedTouristicContentLayer);
     this.selectedTouristicContentLayer = null;
   }
+  addTouristicEvents(resetBounds = false) {
+    var _a;
+    state.touristicEventsWithinBounds = state.currentTouristicEvents;
+    const touristicEventsCurrentCoordinates = [];
+    const touristicEventsFeatureCollection = {
+      type: 'FeatureCollection',
+      features: [],
+    };
+    if (state.currentTouristicEvents) {
+      for (const currentTouristicEvent of state.currentTouristicEvents) {
+        touristicEventsCurrentCoordinates.push(currentTouristicEvent.geometry.coordinates);
+        touristicEventsFeatureCollection.features.push({
+          type: 'Feature',
+          geometry: { type: 'Point', coordinates: currentTouristicEvent.geometry.coordinates },
+          properties: {
+            id: currentTouristicEvent.id,
+            name: currentTouristicEvent.name,
+            type: (_a = state.touristicEventTypes.find(touristicEventType => touristicEventType.id === currentTouristicEvent.type)) === null || _a === void 0 ? void 0 : _a.pictogram,
+            imgSrc: currentTouristicEvent.attachments && currentTouristicEvent.attachments.length > 0 && currentTouristicEvent.attachments[0].thumbnail,
+          },
+        });
+      }
+    }
+    if (!this.toutisticEventsLayer) {
+      if ((touristicEventsCurrentCoordinates.length > 0 && !state.currentMapBounds) || resetBounds) {
+        this.bounds = L.latLngBounds(touristicEventsCurrentCoordinates.map(coordinate => [coordinate[1], coordinate[0]]));
+      }
+      else {
+        if (state.currentMapBounds) {
+          this.bounds = state.currentMapBounds;
+        }
+      }
+      this.toutisticEventsLayer = L.geoJSON(touristicEventsFeatureCollection, {
+        pointToLayer: (geoJsonPoint, latlng) => L.marker(latlng, {
+          icon: L.divIcon({
+            html: geoJsonPoint.properties.type
+              ? `<div class="touristic-event-marker-container"><img src=${geoJsonPoint.properties.type} /></div>`
+              : `<div class="touristic-event-marker-container"></div>`,
+            className: 'touristic-event-marker',
+            iconSize: 32,
+            iconAnchor: [16, 64],
+          }),
+          autoPanOnFocus: false,
+        }),
+        onEachFeature: (geoJsonPoint, layer) => {
+          layer.once('click', () => {
+            const touristicEventCoordinatesPopup = L.DomUtil.create('div');
+            touristicEventCoordinatesPopup.className = 'touristic-event-coordinates-popup';
+            if (geoJsonPoint.properties.imgSrc) {
+              const touristicEventImg = L.DomUtil.create('img');
+              touristicEventImg.src = geoJsonPoint.properties.imgSrc;
+              touristicEventCoordinatesPopup.appendChild(touristicEventImg);
+            }
+            const touristicEventName = L.DomUtil.create('div');
+            touristicEventName.innerHTML = geoJsonPoint.properties.name;
+            touristicEventName.className = 'touristic-event-name';
+            touristicEventCoordinatesPopup.appendChild(touristicEventName);
+            const touristicEventButton = L.DomUtil.create('button');
+            touristicEventButton.innerHTML = 'Afficher le détail';
+            touristicEventButton.className = 'touristic-event-button';
+            touristicEventButton.onclick = () => this.touristicEventCardPress.emit(geoJsonPoint.properties.id);
+            touristicEventCoordinatesPopup.appendChild(touristicEventButton);
+            layer.bindPopup(touristicEventCoordinatesPopup, { interactive: true, autoPan: false, closeButton: false }).openPopup();
+          });
+          layer.on('mouseover', e => {
+            this.addSelectedTouristicEvent(geoJsonPoint.properties.id, e.latlng);
+          });
+        },
+      });
+      this.touristicEventsMarkerClusterGroup = L.markerClusterGroup({
+        showCoverageOnHover: false,
+        removeOutsideVisibleBounds: false,
+        iconCreateFunction: cluster => {
+          return L.divIcon({
+            html: '<div>' + cluster.getChildCount() + '</div>',
+            className: 'touristic-event-marker-cluster-group-icon',
+            iconSize: 48,
+            iconAnchor: [24, 64],
+          });
+        },
+      });
+      this.touristicEventsMarkerClusterGroup.addLayer(this.toutisticEventsLayer);
+      this.map.addLayer(this.touristicEventsMarkerClusterGroup);
+    }
+    else {
+      if (touristicEventsCurrentCoordinates.length > 0) {
+        this.bounds = L.latLngBounds(touristicEventsCurrentCoordinates.map(coordinate => [coordinate[1], coordinate[0]]));
+      }
+      else {
+        this.map.fire('moveend');
+      }
+      this.toutisticEventsLayer.clearLayers();
+      this.toutisticEventsLayer.addData(touristicEventsFeatureCollection);
+      this.touristicEventsMarkerClusterGroup.clearLayers();
+      this.touristicEventsMarkerClusterGroup.addLayer(this.toutisticEventsLayer);
+    }
+    this.bounds && this.map.fitBounds(this.bounds);
+    !this.mapIsReady && (this.mapIsReady = !this.mapIsReady);
+    this.map.on('moveend', this.handleTouristicEventsWithinBoundsBind);
+  }
+  removeTouristicEvents() {
+    if (this.toutisticEventsLayer) {
+      state.currentMapBounds = this.map.getBounds();
+      this.map.removeLayer(this.touristicEventsMarkerClusterGroup);
+      this.toutisticEventsLayer = null;
+      this.touristicEventsMarkerClusterGroup = null;
+      this.map.off('moveend', this.handleTouristicEventsWithinBoundsBind);
+    }
+  }
+  addSelectedTouristicEvent(id, customCoordinates) {
+    var _a;
+    const touristicEventFeatureCollection = {
+      type: 'FeatureCollection',
+      features: [],
+    };
+    if (state.touristicEvents) {
+      const touristicEvent = state.touristicEvents.find(touristicEvent => touristicEvent.id === id);
+      touristicEventFeatureCollection.features.push({
+        type: 'Feature',
+        geometry: { type: 'Point', coordinates: customCoordinates ? [customCoordinates.lng, customCoordinates.lat] : touristicEvent.geometry.coordinates },
+        properties: {
+          id: touristicEvent.id,
+          name: touristicEvent.name,
+          category: (_a = state.touristicEventTypes.find(type => type.id === touristicEvent.type)) === null || _a === void 0 ? void 0 : _a.pictogram,
+          imgSrc: touristicEvent.attachments && touristicEvent.attachments.length > 0 && touristicEvent.attachments[0].thumbnail,
+        },
+      });
+    }
+    this.removeSelectedTouristicEvent();
+    state.selectedTouristicEventId = id;
+    this.selectedTouristicEventLayer = L.geoJSON(touristicEventFeatureCollection, {
+      pointToLayer: (geoJsonPoint, latlng) => L.marker(latlng, {
+        zIndexOffset: 4000000,
+        icon: L.divIcon({
+          html: geoJsonPoint.properties.category
+            ? `<div class="touristic-event-marker-container"><img src=${geoJsonPoint.properties.category} /></div>`
+            : `<div class="touristic-event-marker-container"></div>`,
+          className: 'selected-touristic-event-marker',
+          iconSize: 64,
+          iconAnchor: [32, 64],
+        }),
+        autoPanOnFocus: false,
+      }),
+      onEachFeature: (geoJsonPoint, layer) => {
+        layer.once('click', () => {
+          const touristicEventDeparturePopup = L.DomUtil.create('div');
+          touristicEventDeparturePopup.className = 'touristic-event-coordinates-popup';
+          if (geoJsonPoint.properties.imgSrc) {
+            const touristicEventImg = L.DomUtil.create('img');
+            touristicEventImg.src = geoJsonPoint.properties.imgSrc;
+            touristicEventDeparturePopup.appendChild(touristicEventImg);
+          }
+          const touristicEventName = L.DomUtil.create('div');
+          touristicEventName.innerHTML = geoJsonPoint.properties.name;
+          touristicEventName.className = 'touristic-event-name';
+          touristicEventDeparturePopup.appendChild(touristicEventName);
+          const touristicEventButton = L.DomUtil.create('button');
+          touristicEventButton.innerHTML = 'Afficher le détail';
+          touristicEventButton.className = 'touristic-event-button';
+          touristicEventButton.onclick = () => this.touristicEventCardPress.emit(geoJsonPoint.properties.id);
+          touristicEventDeparturePopup.appendChild(touristicEventButton);
+          layer.bindPopup(touristicEventDeparturePopup, { interactive: true, autoPan: false, closeButton: false }).openPopup();
+        });
+        layer.on('mouseout', () => {
+          if (!this.touristicEventPopupIsOpen) {
+            state.selectedTouristicEventId = null;
+            this.removeSelectedTouristicEvent();
+          }
+        });
+        layer.on('popupopen', () => {
+          this.touristicEventPopupIsOpen = Boolean(state.selectedTouristicEventId);
+        });
+        layer.on('popupclose', () => {
+          if (state.selectedTouristicEventId) {
+            this.touristicEventPopupIsOpen = false;
+            state.selectedTouristicEventId = null;
+            this.removeSelectedTouristicEvent();
+          }
+        });
+      },
+    }).addTo(this.map);
+  }
+  removeSelectedTouristicEvent() {
+    state.selectedTouristicEventId = null;
+    this.selectedTouristicEventLayer && this.map.removeLayer(this.selectedTouristicEventLayer);
+    this.selectedTouristicEventLayer = null;
+  }
   render() {
     const layersImageSrc = getAssetPath(`${Build.isDev ? '/' : ''}assets/layers.svg`);
     const contractImageSrc = getAssetPath(`${Build.isDev ? '/' : ''}assets/contract.svg`);
@@ -1625,6 +1877,21 @@ export class GrwMap {
           "resolved": "number",
           "references": {}
         }
+      }, {
+        "method": "touristicEventCardPress",
+        "name": "touristicEventCardPress",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        }
       }];
   }
   static get listeners() {
@@ -1706,6 +1973,18 @@ export class GrwMap {
         "target": "window",
         "capture": false,
         "passive": false
+      }, {
+        "name": "cardTouristicEventMouseOver",
+        "method": "onTouristicEventMouseOver",
+        "target": "window",
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "cardTouristicEventMouseLeave",
+        "method": "onTouristicEventMouseLeave",
+        "target": "window",
+        "capture": false,
+        "passive": false
       }];
   }
 }