From ed2e397be7d1a2e8a7e52d28590b8d85a8bd4107 Mon Sep 17 00:00:00 2001 From: Hugo SUBTIL <ext.sopra.husubtil@grandlyon.com> Date: Mon, 25 Jan 2021 17:03:04 +0100 Subject: [PATCH] fix: update map locate logic --- src/app/home/home.component.html | 3 +- src/app/home/home.component.ts | 9 ++++- src/app/map/components/map.component.html | 4 +- src/app/map/components/map.component.ts | 38 +++++++++++-------- .../components/search/search.component.ts | 4 +- .../structure-list.component.html | 3 +- .../structure-list.component.ts | 5 +++ 7 files changed, 43 insertions(+), 23 deletions(-) diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html index af7a97934..13bcaeb92 100644 --- a/src/app/home/home.component.html +++ b/src/app/home/home.component.html @@ -8,7 +8,8 @@ (selectedMarkerId)="setSelectedMarkerId($event)" [selectedStructure]="currentStructure" (updatedStructure)="updateStructures($event)" - (locatationReset)="locatationReset($event)" + (locatationReset)="locatationReset()" + (locatationTrigger)="locatationTrigger(null)" class="left-pane" [ngClass]="{ mapPhone: isMapPhone == true }" fxLayout="column" diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts index 1f4aa6916..8581d388a 100644 --- a/src/app/home/home.component.ts +++ b/src/app/home/home.component.ts @@ -173,8 +173,13 @@ export class HomeComponent implements OnInit { this.isMapPhone = !this.isMapPhone; } - public locatationTrigger(): void { - this.locate = true; + public locatationTrigger(event: any): void { + if (event && event !== this.locate) { + this.locate = !this.locate; + } + if (!event) { + this.locate = true; + } } public locatationReset(): void { diff --git a/src/app/map/components/map.component.html b/src/app/map/components/map.component.html index 4d4054218..3503eec70 100644 --- a/src/app/map/components/map.component.html +++ b/src/app/map/components/map.component.html @@ -1,8 +1,8 @@ <div class="map-wrapper"> <div id="map" class="body-wrap" leaflet [leafletOptions]="mapOptions" (leafletMapReady)="onMapReady($event)"></div> - <leaflet-locate-control + <!-- <leaflet-locate-control [map]="map" [options]="locateOptions" (location$)="sendLocationEvent($event)" - ></leaflet-locate-control> + ></leaflet-locate-control> --> </div> diff --git a/src/app/map/components/map.component.ts b/src/app/map/components/map.component.ts index e09c095bc..0e10c6043 100644 --- a/src/app/map/components/map.component.ts +++ b/src/app/map/components/map.component.ts @@ -8,18 +8,7 @@ import { SimpleChanges, ViewChild, } from '@angular/core'; -import { - latLng, - MapOptions, - geoJSON, - tileLayer, - Map, - CRS, - TileLayer, - LatLngBounds, - latLngBounds, - layerGroup, -} from 'leaflet'; +import { latLng, MapOptions, geoJSON, tileLayer, Map, latLngBounds, layerGroup } from 'leaflet'; import { Structure } from '../../models/structure.model'; import { GeojsonService } from '../../services/geojson.service'; import { MapService } from '../services/map.service'; @@ -30,6 +19,7 @@ import { MarkerType } from './markerType.enum'; import { typeStructureEnum } from '../../shared/enum/typeStructure.enum'; import metropole from '../../../assets/geojson/metropole.json'; import brignais from '../../../assets/geojson/brignais.json'; +import L from 'leaflet'; @Component({ selector: 'app-map', @@ -41,9 +31,11 @@ export class MapComponent implements OnChanges { @Input() public toogleToolTipId: string; @Input() public selectedMarkerId: string; @Input() public isMapPhone: boolean; + @Input() public locate = false; @ViewChild(NgxLeafletLocateComponent, { static: false }) locateComponent: NgxLeafletLocateComponent; @Output() selectedStructure: EventEmitter<Structure> = new EventEmitter<Structure>(); @Output() locatationTrigger: EventEmitter<boolean> = new EventEmitter<boolean>(); + private lc; private currentStructure: Structure; public map: Map; @@ -77,6 +69,14 @@ export class MapComponent implements OnChanges { }, 0); } } + // Handle map locate from search bar + if (changes.locate && !changes.locate.isFirstChange()) { + if (changes.locate.currentValue) { + this.lc.start(); + } else { + this.lc.stop(); + } + } if (changes.structures) { this.handleStructurePosition(changes.structures.previousValue); } @@ -135,6 +135,11 @@ export class MapComponent implements OnChanges { this.currentStructure = structure; }); }); + // Reset location if active to prevent graphical issue + if (this.locate) { + this.lc.stop(); + this.lc.start(); + } } /** @@ -175,6 +180,11 @@ export class MapComponent implements OnChanges { */ public onMapReady(map: Map): void { this.map = map; + // Handle location + this.lc = L.control.locate(this.locateOptions).addTo(this.map); + this.map.on('locationfound', () => { + this.locatationTrigger.emit(true); + }); } /** @@ -251,8 +261,4 @@ export class MapComponent implements OnChanges { ) ); } - - public sendLocationEvent(event: any): void { - this.locatationTrigger.emit(true); - } } diff --git a/src/app/structure-list/components/search/search.component.ts b/src/app/structure-list/components/search/search.component.ts index dca476a8c..ecbf1405b 100644 --- a/src/app/structure-list/components/search/search.component.ts +++ b/src/app/structure-list/components/search/search.component.ts @@ -18,6 +18,7 @@ import { SearchService } from '../../services/search.service'; export class SearchComponent implements OnInit, OnChanges { @Output() searchEvent = new EventEmitter(); @Output() locatationReset: EventEmitter<boolean> = new EventEmitter<boolean>(); + @Output() locatationTrigger: EventEmitter<boolean> = new EventEmitter<boolean>(); @Input() locate = false; constructor(public searchService: SearchService, private fb: FormBuilder, private geoJsonService: GeojsonService) { @@ -51,7 +52,7 @@ export class SearchComponent implements OnInit, OnChanges { } ngOnChanges(changes: SimpleChanges): void { - if (changes.locate && changes.locate.currentValue) { + if (changes.locate && changes.locate.currentValue && !changes.locate.previousValue) { this.locateMe(); } } @@ -155,6 +156,7 @@ export class SearchComponent implements OnInit, OnChanges { this.searchForm.setValue({ searchTerm: adress }); this.applyFilter(adress); }); + this.locatationTrigger.emit(true); }); } // Management of the checkbox event (Check / Uncheck) diff --git a/src/app/structure-list/structure-list.component.html b/src/app/structure-list/structure-list.component.html index c0951d65c..3e78f2ff1 100644 --- a/src/app/structure-list/structure-list.component.html +++ b/src/app/structure-list/structure-list.component.html @@ -1,7 +1,8 @@ <div class="topBlock hide-on-print"> <app-structure-list-search (searchEvent)="fetchResults($event)" - (locatationReset)="sendLocatationReset($event)" + (locatationReset)="sendLocatationReset()" + (locatationTrigger)="sendlocatationTrigger()" [locate]="locate" ></app-structure-list-search> </div> diff --git a/src/app/structure-list/structure-list.component.ts b/src/app/structure-list/structure-list.component.ts index 58f2b6621..45624ec9e 100644 --- a/src/app/structure-list/structure-list.component.ts +++ b/src/app/structure-list/structure-list.component.ts @@ -19,6 +19,7 @@ export class StructureListComponent implements OnChanges { @Output() public selectedMarkerId: EventEmitter<string> = new EventEmitter<string>(); @Output() public updatedStructure: EventEmitter<Structure> = new EventEmitter<Structure>(); @Output() public locatationReset: EventEmitter<boolean> = new EventEmitter<boolean>(); + @Output() public locatationTrigger: EventEmitter<boolean> = new EventEmitter<boolean>(); public showStructureDetails = false; public structure: Structure; @@ -89,4 +90,8 @@ export class StructureListComponent implements OnChanges { public sendLocatationReset(): void { this.locatationReset.emit(true); } + + public sendlocatationTrigger(): void { + this.locatationTrigger.emit(true); + } } -- GitLab