From 6118657fef27ee0f6c717e5a21c238d15dc9148d Mon Sep 17 00:00:00 2001
From: Hugo SUBTIL <ext.sopra.husubtil@grandlyon.com>
Date: Fri, 30 Oct 2020 14:51:18 +0100
Subject: [PATCH] feat: add marker zoom on selected
---
src/app/home/home.component.html | 8 ++++-
src/app/home/home.component.ts | 6 ++++
src/app/map/components/map.component.ts | 25 ++++++++++----
src/app/map/services/map.service.ts | 34 +++++++++++++++++--
.../structure-list.component.ts | 5 +--
src/assets/scss/_icons.scss | 3 ++
6 files changed, 70 insertions(+), 11 deletions(-)
diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
index 23b5213eb..1a0aedddd 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 98cd045c5..015a4992a 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 f57135c71..b03a4052c 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 381c51ba8..986022a9c 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 83acdd4d9..6c7965392 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 6f52c8d09..1d52f59d6 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 {
--
GitLab