diff --git a/package-lock.json b/package-lock.json index 231f8aa0a79ff99ce0dc9a13449b0dc8f6d294f1..76cfed61c5dad80deea4608d5fdf52e9988d29f1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2645,28 +2645,6 @@ } } }, - "@runette/ngx-leaflet-locate": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/@runette/ngx-leaflet-locate/-/ngx-leaflet-locate-1.0.3.tgz", - "integrity": "sha512-U792/VO5PvQKok7H4CHJ+u3L7Vy3Pca3Iki32CXVqloVzUOO0VcNMcF07NoLcXkUHEXX7hJ5I7OGivTyMFcYpQ==", - "requires": { - "@types/leaflet.locatecontrol": "^0.60.7", - "leaflet.locatecontrol": "^0.68.0", - "tslib": "^1.9.0" - }, - "dependencies": { - "leaflet.locatecontrol": { - "version": "0.68.0", - "resolved": "https://registry.npmjs.org/leaflet.locatecontrol/-/leaflet.locatecontrol-0.68.0.tgz", - "integrity": "sha512-jXJCpBvkyH6shjPEOK/DWu/tKX/WdkNeO96jyPrnGelYp9u6wSDj4V1V4aX9+CMTIrEyVB4/4XuU+T7VTRpb6w==" - }, - "tslib": { - "version": "1.14.0", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.0.tgz", - "integrity": "sha512-+Zw5lu0D9tvBMjGP8LpvMb0u2WW2QV3y+D8mO6J+cNzCYIN4sVy43Bf9vl92nqFahutN0I8zHa7cc4vihIshnw==" - } - } - }, "@schematics/angular": { "version": "10.1.3", "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-10.1.3.tgz", diff --git a/package.json b/package.json index a6dcfb3888825787628cffff2ef42ad34a57458d..5aeaf424d55fd987ebdd8585fdb2c41cff35f6be 100644 --- a/package.json +++ b/package.json @@ -27,7 +27,6 @@ "@angular/router": "~10.1.3", "@asymmetrik/ngx-leaflet": "^8.1.0", "@ngx-translate/core": "^13.0.0", - "@runette/ngx-leaflet-locate": "^1.0.3", "json-server": "^0.16.2", "jwt-decode": "^3.1.2", "leaflet": "^1.7.1", @@ -47,6 +46,7 @@ "@types/jasminewd2": "~2.0.3", "@types/leaflet": "^1.5.17", "@types/node": "^12.12.67", + "@types/leaflet.locatecontrol": "^0.60.7", "codelyzer": "^6.0.0", "jasmine-core": "~3.6.0", "jasmine-spec-reporter": "~5.0.0", diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html index 11b58a67113b399fe6c7770ca5979be90371987e..13bcaeb923859bef2003cdf6f99363223042e1aa 100644 --- a/src/app/home/home.component.html +++ b/src/app/home/home.component.html @@ -3,10 +3,13 @@ (searchEvent)="getStructures($event)" [structureList]="structures" [location]="currentLocation" + [locate]="locate" (displayMapMarkerId)="setMapMarkerId($event)" (selectedMarkerId)="setSelectedMarkerId($event)" [selectedStructure]="currentStructure" (updatedStructure)="updateStructures($event)" + (locatationReset)="locatationReset()" + (locatationTrigger)="locatationTrigger(null)" class="left-pane" [ngClass]="{ mapPhone: isMapPhone == true }" fxLayout="column" @@ -23,7 +26,9 @@ [structures]="structures" [toogleToolTipId]="displayMarkerId" [selectedMarkerId]="selectedMarkerId" + [locate]="locate" (selectedStructure)="showDetailStructure($event)" + (locatationTrigger)="locatationTrigger($event)" [isMapPhone]="isMapPhone" class="right-pane" [ngClass]="{ mapPhone: isMapPhone == true }" diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts index ec5984d94a4d526181f57b476148dbb0bbb45cc7..8581d388aeb33a43de6254d8564cd9ad3bfcfc6c 100644 --- a/src/app/home/home.component.ts +++ b/src/app/home/home.component.ts @@ -23,6 +23,7 @@ export class HomeComponent implements OnInit { public userLatitude: number; public userLongitude: number; public isMapPhone = false; + public locate = false; // Use to sync location between search and map constructor(private structureService: StructureService, private geoJsonService: GeojsonService) {} ngOnInit(): void { @@ -171,4 +172,17 @@ export class HomeComponent implements OnInit { public switchMapList(): void { this.isMapPhone = !this.isMapPhone; } + + public locatationTrigger(event: any): void { + if (event && event !== this.locate) { + this.locate = !this.locate; + } + if (!event) { + this.locate = true; + } + } + + public locatationReset(): void { + this.locate = false; + } } diff --git a/src/app/map/components/map.component.html b/src/app/map/components/map.component.html index 4fc6326081f2e5319cdf04ebd9bf7cabbe78d282..3af397dbb80481e93b5289f39a0bf16c72831435 100644 --- a/src/app/map/components/map.component.html +++ b/src/app/map/components/map.component.html @@ -1,4 +1,3 @@ <div class="map-wrapper"> <div id="map" class="body-wrap" leaflet [leafletOptions]="mapOptions" (leafletMapReady)="onMapReady($event)"></div> - <leaflet-locate-control [map]="map" [options]="locateOptions"></leaflet-locate-control> </div> diff --git a/src/app/map/components/map.component.ts b/src/app/map/components/map.component.ts index e22a7c4129b56d2953b568816632a3afce43eef5..ad2bba78c884e987a36f93fc6d634f11d4fa0f0c 100644 --- a/src/app/map/components/map.component.ts +++ b/src/app/map/components/map.component.ts @@ -8,28 +8,18 @@ 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, Control } from 'leaflet'; import { Structure } from '../../models/structure.model'; import { GeojsonService } from '../../services/geojson.service'; import { MapService } from '../services/map.service'; -import { NgxLeafletLocateComponent } from '@runette/ngx-leaflet-locate'; import * as _ from 'lodash'; import { GeoJsonProperties } from '../models/geoJsonProperties.model'; 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'; +import 'leaflet.locatecontrol'; @Component({ selector: 'app-map', @@ -41,8 +31,10 @@ export class MapComponent implements OnChanges { @Input() public toogleToolTipId: string; @Input() public selectedMarkerId: string; @Input() public isMapPhone: boolean; - @ViewChild(NgxLeafletLocateComponent, { static: false }) locateComponent: NgxLeafletLocateComponent; + @Input() public locate = false; @Output() selectedStructure: EventEmitter<Structure> = new EventEmitter<Structure>(); + @Output() locatationTrigger: EventEmitter<boolean> = new EventEmitter<boolean>(); + private lc; private currentStructure: Structure; public map: Map; @@ -76,6 +68,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); } @@ -134,6 +134,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(); + } } /** @@ -174,6 +179,12 @@ 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); + // .locate(this.locateOptions).addTo(this.map); + this.map.on('locationfound', () => { + this.locatationTrigger.emit(true); + }); } /** diff --git a/src/app/map/map.module.ts b/src/app/map/map.module.ts index 521ecc6784cc5b12659516889e1526cf69bcb5df..fbb935ca5b3f27df1df0efded58dccc7d0380c1a 100644 --- a/src/app/map/map.module.ts +++ b/src/app/map/map.module.ts @@ -3,10 +3,9 @@ import { CommonModule, DatePipe } from '@angular/common'; import { SharedModule } from '../shared/shared.module'; import { MapComponents } from './components'; import { LeafletModule } from '@asymmetrik/ngx-leaflet'; -import { NgxLeafletLocateModule } from '@runette/ngx-leaflet-locate'; import { BrowserModule } from '@angular/platform-browser'; @NgModule({ - imports: [CommonModule, BrowserModule, SharedModule, NgxLeafletLocateModule, LeafletModule], + imports: [CommonModule, BrowserModule, SharedModule, LeafletModule], declarations: [MapComponents], providers: [DatePipe], exports: [MapComponents], diff --git a/src/app/structure-list/components/search/search.component.ts b/src/app/structure-list/components/search/search.component.ts index ea832db99e3b0520b6b942b05055387b946c791c..5a4d7ef47c9c2e39884ee08ff04f96767b1f865e 100644 --- a/src/app/structure-list/components/search/search.component.ts +++ b/src/app/structure-list/components/search/search.component.ts @@ -1,4 +1,4 @@ -import { Component, EventEmitter, OnInit, Output } from '@angular/core'; +import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core'; import { FormBuilder, FormGroup } from '@angular/forms'; import { forkJoin } from 'rxjs'; import { GeoJson } from '../../../map/models/geojson.model'; @@ -16,7 +16,12 @@ import { SearchService } from '../../services/search.service'; templateUrl: './search.component.html', styleUrls: ['./search.component.scss'], }) -export class SearchComponent implements OnInit { +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) { this.searchForm = this.fb.group({ searchTerm: '', @@ -50,6 +55,12 @@ export class SearchComponent implements OnInit { this.checkedModulesFilter = new Array(); } + ngOnChanges(changes: SimpleChanges): void { + if (changes.locate && changes.locate.currentValue && !changes.locate.previousValue) { + this.locateMe(); + } + } + // Accessor to template angular. public get TypeModal(): typeof TypeModal { return TypeModal; @@ -59,6 +70,9 @@ export class SearchComponent implements OnInit { public clearInput(): void { this.searchForm.reset(); this.applyFilter(null); + if (this.locate) { + this.locatationReset.emit(true); + } } // Sends an array containing all filters @@ -146,6 +160,7 @@ export class SearchComponent implements OnInit { 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 57b306f09d6a1232fd3faf304ce1f67e573adfde..3e78f2ff19eb925e80bffe1d08276f6167504d63 100644 --- a/src/app/structure-list/structure-list.component.html +++ b/src/app/structure-list/structure-list.component.html @@ -1,5 +1,10 @@ <div class="topBlock hide-on-print"> - <app-structure-list-search (searchEvent)="fetchResults($event)"></app-structure-list-search> + <app-structure-list-search + (searchEvent)="fetchResults($event)" + (locatationReset)="sendLocatationReset()" + (locatationTrigger)="sendlocatationTrigger()" + [locate]="locate" + ></app-structure-list-search> </div> <div class="nbStructuresLabel hide-on-print"> {{ structureList ? structureList.length : '0' }} structure{{ structureList && structureList.length > 1 ? 's' : '' }} diff --git a/src/app/structure-list/structure-list.component.ts b/src/app/structure-list/structure-list.component.ts index b1a5c31b10387e6abc704db14d0f703a2fc77b52..45624ec9e82de52c0c5bb07504e1ae6719840317 100644 --- a/src/app/structure-list/structure-list.component.ts +++ b/src/app/structure-list/structure-list.component.ts @@ -14,9 +14,12 @@ export class StructureListComponent implements OnChanges { @Output() searchEvent = new EventEmitter(); @Input() public location: GeoJson; @Input() public selectedStructure: Structure = new Structure(); + @Input() public locate = false; @Output() public displayMapMarkerId: EventEmitter<string> = new EventEmitter<string>(); @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; @@ -83,4 +86,12 @@ export class StructureListComponent implements OnChanges { this.structuresListChunked = [...this.structuresListChunked, ...newStructures]; } } + + public sendLocatationReset(): void { + this.locatationReset.emit(true); + } + + public sendlocatationTrigger(): void { + this.locatationTrigger.emit(true); + } }