feat: add marker zoom on selected

src/app/home/home.component.html

@@ -3,7 +3,13 @@
     [structureList]="structures"
     [location]="currentLocation"
     (displayMapMarkerId)="setMapMarkerId($event)"
+    (selectedMarkerId)="setSelectedMarkerId($event)"
     class="left-pane"
   ></app-structure-list>
-  <app-map [structures]="structures" [toogleToolTipId]="displayMarkerId" class="right-pane"></app-map>
+  <app-map
+    [structures]="structures"
+    [toogleToolTipId]="displayMarkerId"
+    [selectedMarkerId]="selectedMarkerId"
+    class="right-pane"
+  ></app-map>
 </div>

src/app/home/home.component.ts

@@ -16,6 +16,7 @@ import { GeojsonService } from '../services/geojson.service';
 export class HomeComponent implements OnInit {
   public structures: Structure[] = [];
   public displayMarkerId: number;
+  public selectedMarkerId: number;
   public geolocation = false;
   public currentLocation: GeoJson;
   constructor(private structureService: StructureService, private geoJsonService: GeojsonService) {}
@@ -91,4 +92,9 @@ export class HomeComponent implements OnInit {
   public setMapMarkerId(event: Array<number>): void {
     this.displayMarkerId = event[0];
   }
+
+  public setSelectedMarkerId(id: number): void {
+    console.log('setSelectedMarker', id);
+    this.selectedMarkerId = id;
+  }
 }

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

 import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
-import { latLng, MapOptions, tileLayer, Map, CRS, TileLayer, LatLngBounds } from 'leaflet';
+import { latLng, MapOptions, tileLayer, Map, CRS, TileLayer, LatLngBounds, latLngBounds } from 'leaflet';
 import { Observable } from 'rxjs';
 import { mergeMap } from 'rxjs/operators';
 import { Structure } from '../../models/structure.model';
@@ -16,6 +16,7 @@ import { LeafletControlLayersChanges } from '@asymmetrik/ngx-leaflet';
 export class MapComponent implements OnChanges {
   @Input() public structures: Structure[] = [];
   @Input() public toogleToolTipId: number;
+  @Input() public selectedMarkerId: number;
   public map: Map;
   public mapOptions: MapOptions;
   // Init locate options
@@ -35,16 +36,21 @@ export class MapComponent implements OnChanges {
     if (changes.structures) {
       this.getStructurePosition();
     }
+    // Handle map marker tooltip
     if (changes.toogleToolTipId && changes.toogleToolTipId.currentValue !== changes.toogleToolTipId.previousValue) {
       if (changes.toogleToolTipId.previousValue !== undefined) {
         this.mapService.toogleToolTip(changes.toogleToolTipId.previousValue);
       }
       this.mapService.toogleToolTip(changes.toogleToolTipId.currentValue);
-      // if (changes.toogleToolTipId.currentValue === undefined) {
-      //   this.mapService.toogleToolTip(changes.toogleToolTipId.previousValue);
-      // } else {
-      //   this.mapService.toogleToolTip(changes.toogleToolTipId.currentValue);
-      // }
+    }
+    // Handle map marker selection
+    if (changes.selectedMarkerId) {
+      if (changes.selectedMarkerId.currentValue === undefined) {
+        this.mapService.setDefaultMarker(changes.selectedMarkerId.previousValue);
+      } else {
+        this.mapService.setSelectedMarker(changes.selectedMarkerId.currentValue);
+        this.centerLeafletMapOnMarker(changes.selectedMarkerId.currentValue);
+      }
     }
   }
 
@@ -161,4 +167,11 @@ export class MapComponent implements OnChanges {
       this.mapService.toogleToolTip(id);
     });
   }
+
+  private centerLeafletMapOnMarker(markerId: number) {
+    const marker = this.mapService.getMarker(markerId);
+    const latLngs = [marker.getLatLng()];
+    const markerBounds = latLngBounds(latLngs);
+    this.map.fitBounds(markerBounds);
+  }
 }

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

@@ -10,13 +10,13 @@ export class MapService {
   constructor() {}
 
   public createMarker(lat: number, lon: number, id: number, tooltip?: string): Marker {
-    const icone = divIcon({
+    const markerIcon = divIcon({
       className: null,
       html: "<div class='ico-marker-pin'></div>",
       iconSize: [35, 41],
       iconAnchor: [13, 41],
     });
-    const marker = new Marker([lat, lon], { icon: icone });
+    const marker = new Marker([lat, lon], { icon: markerIcon });
 
     if (tooltip) {
       marker.bindTooltip(tooltip);
@@ -44,6 +44,36 @@ export class MapService {
     this.getMarker(id).bindTooltip(html);
   }
 
+  /**
+   * Set a marker as selected by changing icon color
+   * @param id markerId
+   * @param html html to display
+   */
+  public setSelectedMarker(id: number): void {
+    const markerIcon = divIcon({
+      className: null,
+      html: "<div class='ico-marker-pin selected'></div>",
+      iconSize: [35, 41],
+      iconAnchor: [13, 41],
+    });
+    this.getMarker(id).setIcon(markerIcon);
+  }
+
+  /**
+   * Set a marker as selected by changing icon color
+   * @param id markerId
+   * @param html html to display
+   */
+  public setDefaultMarker(id: number): void {
+    const markerIcon = divIcon({
+      className: null,
+      html: "<div class='ico-marker-pin'></div>",
+      iconSize: [35, 41],
+      iconAnchor: [13, 41],
+    });
+    this.getMarker(id).setIcon(markerIcon);
+  }
+
   /**
    * Get marker by id
    */

src/app/structure-list/structure-list.component.ts

@@ -11,6 +11,7 @@ export class StructureListComponent implements OnInit {
   @Input() public location: GeoJson;
   @Output() public displayMapMarkerId: EventEmitter<Array<number>> = new EventEmitter<Array<number>>();
   @Output() public hoverOut: EventEmitter<Array<number>> = new EventEmitter<Array<number>>();
+  @Output() public selectedMarkerId: EventEmitter<number> = new EventEmitter<number>();
   public showStructureDetails = false;
   public structure: Structure;
   constructor() {}
@@ -20,11 +21,11 @@ export class StructureListComponent implements OnInit {
   public showDetails(event: Structure): void {
     this.showStructureDetails = true;
     this.structure = event;
-    // this.displayMapMarkerId.emit([this.structure.id]);
+    this.selectedMarkerId.emit(this.structure.id);
   }
 
   public closeDetails(): void {
-    // this.displayMapMarkerId.emit([]);
+    this.selectedMarkerId.emit();
     this.showStructureDetails = false;
   }
 

src/assets/scss/_icons.scss

@@ -82,6 +82,9 @@
   left: 50%;
   top: 50%;
   margin: -15px 0 0 -15px;
+  &.selected {
+    background: $red-metro;
+  }
 }
 
 .ico-marker-pin::after {