fix(carto): marker issue when selecting filter

.vscode/settings.json

@@ -29,12 +29,16 @@
   "typescript.preferences.importModuleSpecifier": "relative",
   "cSpell.language": "fr,en",
   "cSpell.words": [
+    "carto",
     "covid",
     "demarch",
     "facebook",
     "friday",
+    "grandlyon",
     "instagram",
     "linkedin",
+    "metropole",
+    "Metropole",
     "monday",
     "onespace",
     "orientator",

src/app/carto/carto.component.html

@@ -29,7 +29,7 @@
       class="right-pane"
       [isOrientationForm]="isOrientationForm"
       [structures]="structures"
-      [toogleToolTipId]="displayMarkerId"
+      [togglePopupId]="displayMarkerId"
       [selectedMarkerId]="selectedMarkerId"
       [structuresToPrint]="structuresSelected"
       [isMapPhone]="isMapPhone"

src/app/map/components/map.component.ts

@@ -18,7 +18,7 @@ export class MapComponent implements OnChanges {
   @Input() public isOrientationForm = false;
   @Input() public structures: Structure[] = [];
   @Input() public structuresToPrint: Structure[] = [];
-  @Input() public toogleToolTipId: string;
+  @Input() public togglePopupId: string;
   @Input() public selectedMarkerId: string;
   @Input() public isMapPhone: boolean;
   @Input() public searchedValue: string | [number, number];
@@ -48,65 +48,82 @@ export class MapComponent implements OnChanges {
 
   ngOnChanges(changes: SimpleChanges): void {
     if (changes.searchedValue && !changes.searchedValue.firstChange) {
-      if (changes.searchedValue.currentValue) {
-        this.processTownCoordinate(changes.searchedValue.currentValue);
+      const searchedValue = changes.searchedValue.currentValue;
+
+      if (searchedValue) {
+        this.processTownCoordinate(searchedValue);
       } else {
-        this.map.setView(this.mapOptions.center, this.mapOptions.zoom);
+        this.resetMap();
       }
     }
-    if (changes.isMapPhone) {
-      if (this.isMapPhone) {
-        setTimeout(() => {
-          this.map.invalidateSize();
-        }, 0);
-      }
+
+    if (changes.isMapPhone && this.isMapPhone) {
+      setTimeout(() => {
+        this.map.invalidateSize();
+      }, 0);
     }
+
     if (changes.structures) {
-      this.handleStructurePosition(changes.structures.previousValue);
+      const previousStructures = changes.structures.previousValue;
+
+      this.handleStructurePosition(previousStructures);
     }
-    // Handle map marker tooltip
-    if (changes.toogleToolTipId && changes.toogleToolTipId.currentValue !== changes.toogleToolTipId.previousValue) {
-      if (changes.toogleToolTipId.previousValue !== undefined) {
-        if (this.isToPrint(changes.toogleToolTipId.previousValue)) {
-          this.mapService.setAddedToListMarker(
-            changes.toogleToolTipId.previousValue,
-            this.getMarkerTypeByStructureId(changes.toogleToolTipId.previousValue)
-          );
-        } else {
-          this.mapService.setUnactiveMarker(
-            changes.toogleToolTipId.previousValue,
-            this.getMarkerTypeByStructureId(changes.toogleToolTipId.previousValue)
-          );
-        }
-      }
-      if (changes.toogleToolTipId.currentValue !== undefined) {
-        this.mapService.setActiveMarker(
-          changes.toogleToolTipId.currentValue,
-          this.getMarkerTypeByStructureId(changes.toogleToolTipId.currentValue)
-        );
+
+    this.handleMapMarkerTooltip(changes);
+    this.handleSelectedMapMarker(changes);
+    this.handlePrintableMarkers();
+
+    this.closePreviousMarker(changes);
+  }
+
+  private resetMap(): void {
+    this.map.setView(this.mapOptions.center, this.mapOptions.zoom);
+  }
+
+  private handleMapMarkerTooltip(changes: SimpleChanges): void {
+    const previousId = changes.togglePopupId?.previousValue;
+    const currentId = changes.togglePopupId?.currentValue;
+
+    if (previousId !== undefined) {
+      const isToPrint = this.isToPrint(previousId);
+
+      if (isToPrint) {
+        this.mapService.setAddedToListMarker(previousId, this.getMarkerTypeByStructureId(previousId));
+      } else {
+        this.mapService.setInactiveMarker(previousId, this.getMarkerTypeByStructureId(previousId));
       }
     }
-    // Handle map marker if none selected
+
+    if (currentId !== undefined) {
+      this.mapService.setActiveMarker(currentId, this.getMarkerTypeByStructureId(currentId));
+    }
+  }
+
+  private handleSelectedMapMarker(changes: SimpleChanges): void {
+    const selectedMarkerId = this.selectedMarkerId;
+
     if (changes.selectedMarkerId && this.map) {
+      const previousId = changes.selectedMarkerId.previousValue;
+
       this.map.closePopup();
-      if (changes.selectedMarkerId.currentValue === undefined) {
-        this.mapService.setDefaultMarker(
-          changes.selectedMarkerId.previousValue,
-          this.getMarkerTypeByStructureId(changes.selectedMarkerId.previousValue)
-        );
-        this.map.setView(this.mapOptions.center, this.mapOptions.zoom);
+
+      if (selectedMarkerId === undefined) {
+        this.mapService.setDefaultMarker(previousId, this.getMarkerTypeByStructureId(previousId));
+        this.resetMap();
       }
     }
-    // Handle map marker if one is set with url or selected
-    if (this.mapService.getMarker(this.selectedMarkerId)) {
-      this.mapService.setSelectedMarker(this.selectedMarkerId, this.getMarkerTypeByStructureId(this.selectedMarkerId));
-      this.centerLeafletMapOnMarker(this.selectedMarkerId);
+
+    if (this.mapService.getMarker(selectedMarkerId)) {
+      this.mapService.setSelectedMarker(selectedMarkerId, this.getMarkerTypeByStructureId(selectedMarkerId));
+      this.centerLeafletMapOnMarker(selectedMarkerId);
     }
+  }
 
-    this.closePreviousMarker(changes);
+  private handlePrintableMarkers(): void {
+    const structuresToPrint = this.structuresToPrint;
 
-    if (changes.structuresToPrint) {
-      this.structuresToPrint?.forEach((structure: Structure) => {
+    if (structuresToPrint) {
+      structuresToPrint.forEach((structure: Structure) => {
         this.mapService.setAddedToListMarker(structure._id, this.getMarkerTypeByStructureId(structure._id));
       });
     }
@@ -127,8 +144,7 @@ export class MapComponent implements OnChanges {
   }
 
   /**
-   * Create a user position marcker and center the map on it with a zoom level defined in ZoomLevel
-   * @param coords {[number, number]} Map center position
+   * Create a user position marker and center the map on it with a zoom level defined in ZoomLevel
    */
   public centerOnCoordinates(coords: [number, number]): void {
     this.mapService.createMarker(coords[1], coords[0], MarkerType.user, 'userLocation').addTo(this.map);
@@ -156,13 +172,11 @@ export class MapComponent implements OnChanges {
   }
 
   private isToPrint(id: string): boolean {
-    return this.structuresToPrint.findIndex((elem) => elem._id == id) > -1 ? true : false;
+    return this.structuresToPrint.some((elem) => elem._id === id);
   }
 
   /**
    * Returns according marker type base on {MarkerType}
-   * @param {Structure} structure
-   * @returns {MarkerType}
    */
   private getMarkerType(structure: Structure): MarkerType {
     return structure?.categories?.labelsQualifications?.includes('conseillerNumFranceServices')
@@ -172,8 +186,6 @@ export class MapComponent implements OnChanges {
 
   /**
    * Return the map marker type given a structure id
-   * @param {string} id - Structure id
-   * @returns {MarkerType}
    */
   private getMarkerTypeByStructureId(id: string): MarkerType {
     return this.getMarkerType(this.structures.find((structure) => structure._id === id));
@@ -187,7 +199,7 @@ export class MapComponent implements OnChanges {
           structure.getLon(),
           this.getMarkerType(structure),
           structure._id,
-          this.buildToolTip(structure)
+          this.buildPopup(structure)
         )
         .addTo(this.map)
         // store structure before user click on button
@@ -197,19 +209,7 @@ export class MapComponent implements OnChanges {
     }
   }
 
-  /**
-   * Create tooltip for display
-   * @param structure Structure
-   */
-  private buildToolTip(structure: Structure): string {
-    let cssAvailabilityClass = structure.isOpen ? 'available' : null;
-    if (cssAvailabilityClass === null) {
-      if (structure.openedOn.day) {
-        cssAvailabilityClass = 'unavailable';
-      } else {
-        cssAvailabilityClass = 'unknown';
-      }
-    }
+  private buildPopup(structure: Structure): string {
     return (
       '<h1>' +
       structure.structureName +
@@ -226,8 +226,7 @@ export class MapComponent implements OnChanges {
   }
 
   /**
-   * Add marker when map is ready to be showned
-   * @param map map
+   * Add marker when map is ready to be shown
    */
   public onMapReady(map: Map): void {
     this.map = map;
@@ -302,7 +301,7 @@ export class MapComponent implements OnChanges {
 
   /**
    * Close previous markers
-   * - if strucure is closed
+   * - if structure is closed
    * - if a new marker is selected
    */
   private closePreviousMarker(changes: SimpleChanges): void {
@@ -310,7 +309,7 @@ export class MapComponent implements OnChanges {
       (changes.selectedMarkerId?.currentValue === undefined && changes.selectedMarkerId?.previousValue) ||
       changes.selectedMarkerId?.currentValue !== changes.selectedMarkerId?.previousValue
     ) {
-      this.mapService.setUnactiveMarker(
+      this.mapService.setInactiveMarker(
         changes.selectedMarkerId.previousValue,
         this.getMarkerTypeByStructureId(changes.selectedMarkerId.previousValue)
       );

src/app/map/services/map.service.ts

@@ -18,27 +18,14 @@ export class MapService {
   private static markersList = {};
   private isMarkerActive = false;
 
-  public createMarker(lat: number, lon: number, markerType: MarkerType, id?: string, tooltip?: string): Marker {
+  public createMarker(lat: number, lon: number, markerType: MarkerType, id?: string, popup?: string): Marker {
     const marker = new Marker([lat, lon], {
       icon: this.getMarkerIcon(markerType),
-      attribution: this.getLayerAttributton(markerType),
-    });
-    marker.on('mouseclick', (evt) => {
-      evt.target.openPopup();
-    });
-
-    // handle icon change when select marker
-    marker.on('click', (evt) => {
-      evt.target.setIcon(this.getActiveMarkerIcon(markerType));
+      attribution: this.getLayerAttribution(markerType),
     });
 
-    if (tooltip) {
-      marker.bindPopup(tooltip);
-
-      // handle icon change when unselect
-      marker.getPopup().on('remove', (evt) => {
-        marker.setIcon(this.getMarkerIcon(markerType));
-      });
+    if (popup) {
+      marker.bindPopup(popup);
     }
 
     if (id) {
@@ -47,7 +34,7 @@ export class MapService {
     return marker;
   }
 
-  private getLayerAttributton(markerType: MarkerType): string {
+  private getLayerAttribution(markerType: MarkerType): string {
     if (markerType === MarkerType.mdm) {
       return Layers.mdm;
     } else if (markerType === MarkerType.user) {
@@ -57,7 +44,7 @@ export class MapService {
     }
   }
 
-  // Note: Marke IconFranceService has been removed temporarly on order to rework on buisness needs.
+  // Note: Mark IconFranceService has been removed temporarily on order to rework on business needs.
   // This comment is applied for the next 4 methods
   private getMarkerIcon(markerType: MarkerType): DivIcon {
     switch (markerType) {
@@ -120,21 +107,12 @@ export class MapService {
     this.getMarker(id)?.setIcon(this.getAddedToListMarkerIcon(type));
   }
 
-  public setUnactiveMarker(id: string, type: MarkerType = MarkerType.structure): void {
+  public setInactiveMarker(id: string, type: MarkerType = MarkerType.structure): void {
     // To skip mouseleave when user emit click on structure list
     this.getMarker(id)?.setIcon(this.getMarkerIcon(type));
     this.isMarkerActive = false;
   }
 
-  /**
-   * Set a tooltip
-   * @param id markerId
-   * @param html html to display
-   */
-  public setToolTip(id: string, html: string): void {
-    this.getMarker(id).bindTooltip(html);
-  }
-
   /**
    * Set a marker as selected by changing icon color
    * @param id markerId
@@ -169,7 +147,7 @@ export class MapService {
     MapService.markersList = {};
     if (map) {
       map.eachLayer((layer) => {
-        if (layer instanceof Marker && layer.options.attribution == Layers.structure) {
+        if (layer instanceof Marker && layer.options.attribution === Layers.structure) {
           map.removeLayer(layer);
         }
       });