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