diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html index af7a97934380569e5c00c15ee8360368ac2f71be..13bcaeb923859bef2003cdf6f99363223042e1aa 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 1f4aa6916b980063b646a30462371a2016f21156..8581d388aeb33a43de6254d8564cd9ad3bfcfc6c 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 4d40542184ff29fb10e6416a7fa2f9fcbd774010..3503eec7065529255949474ce088d9ab6dbf0a3d 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 e09c095bc2d11e1003beecb3dbdf6d3dd04407c6..0e10c60430f9b769c1be2121c5b89b0755ad109a 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 dca476a8cc08574ba47b524fd4efc5ae1e69df93..ecbf1405be3c2646b8a45e5cd0288e5cdb6faec2 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 c0951d65cbc277770d88017e9bf72b8297bbf69e..3e78f2ff19eb925e80bffe1d08276f6167504d63 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 58f2b662103aa7b8c6504313ac8ebb28a591c4c7..45624ec9e82de52c0c5bb07504e1ae6719840317 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); + } }