diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
index 23b5213ebdcf71aaeb653c7cda67257ca84314ee..1a0aedddd2a7cd83298c817c83bb20e97ed5b338 100644
--- a/src/app/home/home.component.html
+++ b/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>
diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts
index 98cd045c5e7a470a1cb5d9476d00e3962089f3ba..015a4992a90476c5fd0cc71bbeed20ad4d60a7c6 100644
--- a/src/app/home/home.component.ts
+++ b/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;
+ }
}
diff --git a/src/app/map/components/map.component.ts b/src/app/map/components/map.component.ts
index f57135c718dbe1d2f235f1610650c3e2e6d50d77..b03a4052cdf14fbc2af551bf780a92c0c3be31e3 100644
--- a/src/app/map/components/map.component.ts
+++ b/src/app/map/components/map.component.ts
@@ -1,5 +1,5 @@
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);
+ }
}
diff --git a/src/app/map/services/map.service.ts b/src/app/map/services/map.service.ts
index 381c51ba8a7e3eca04c8f2a1e2ebaa27380c3f84..986022a9cb6deee01728bce30a3a10596f227287 100644
--- a/src/app/map/services/map.service.ts
+++ b/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
*/
diff --git a/src/app/structure-list/structure-list.component.ts b/src/app/structure-list/structure-list.component.ts
index 83acdd4d97b12926fe9f836c4e2fd42ee434601a..6c79653923eab6250e2ccb4783891cb7237bf7ca 100644
--- a/src/app/structure-list/structure-list.component.ts
+++ b/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;
}
diff --git a/src/assets/scss/_icons.scss b/src/assets/scss/_icons.scss
index 6f52c8d09663b6415c1b04a313f8af5b4e7547d0..1d52f59d64a1672c19ae2d56bdade06f481d90f6 100644
--- a/src/assets/scss/_icons.scss
+++ b/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 {