From a99e9b4356022e1c9a385cf2533eee68a2d08636 Mon Sep 17 00:00:00 2001
From: Hugo SUBTIL <ext.sopra.husubtil@grandlyon.com>
Date: Fri, 22 Jan 2021 16:22:53 +0100
Subject: [PATCH 1/3] feat: sync locate from search bar to map
---
src/app/home/home.component.html | 4 ++++
src/app/home/home.component.ts | 9 +++++++++
src/app/map/components/map.component.html | 6 +++++-
src/app/map/components/map.component.ts | 5 +++++
.../components/search/search.component.ts | 19 +++++++++++++++----
.../structure-list.component.html | 6 +++++-
.../structure-list.component.ts | 6 ++++++
7 files changed, 49 insertions(+), 6 deletions(-)
diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
index 11b58a671..af7a97934 100644
--- a/src/app/home/home.component.html
+++ b/src/app/home/home.component.html
@@ -3,10 +3,12 @@
(searchEvent)="getStructures($event)"
[structureList]="structures"
[location]="currentLocation"
+ [locate]="locate"
(displayMapMarkerId)="setMapMarkerId($event)"
(selectedMarkerId)="setSelectedMarkerId($event)"
[selectedStructure]="currentStructure"
(updatedStructure)="updateStructures($event)"
+ (locatationReset)="locatationReset($event)"
class="left-pane"
[ngClass]="{ mapPhone: isMapPhone == true }"
fxLayout="column"
@@ -23,7 +25,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 ec5984d94..1f4aa6916 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,12 @@ export class HomeComponent implements OnInit {
public switchMapList(): void {
this.isMapPhone = !this.isMapPhone;
}
+
+ public locatationTrigger(): void {
+ 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 4fc632608..4d4054218 100644
--- a/src/app/map/components/map.component.html
+++ b/src/app/map/components/map.component.html
@@ -1,4 +1,8 @@
<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>
+ <leaflet-locate-control
+ [map]="map"
+ [options]="locateOptions"
+ (location$)="sendLocationEvent($event)"
+ ></leaflet-locate-control>
</div>
diff --git a/src/app/map/components/map.component.ts b/src/app/map/components/map.component.ts
index e22a7c412..e09c095bc 100644
--- a/src/app/map/components/map.component.ts
+++ b/src/app/map/components/map.component.ts
@@ -43,6 +43,7 @@ export class MapComponent implements OnChanges {
@Input() public isMapPhone: boolean;
@ViewChild(NgxLeafletLocateComponent, { static: false }) locateComponent: NgxLeafletLocateComponent;
@Output() selectedStructure: EventEmitter<Structure> = new EventEmitter<Structure>();
+ @Output() locatationTrigger: EventEmitter<boolean> = new EventEmitter<boolean>();
private currentStructure: Structure;
public map: Map;
@@ -250,4 +251,8 @@ 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 d54028a50..dca476a8c 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';
@@ -15,15 +15,17 @@ 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>();
+ @Input() locate = false;
+
constructor(public searchService: SearchService, private fb: FormBuilder, private geoJsonService: GeojsonService) {
this.searchForm = this.fb.group({
searchTerm: '',
});
}
- @Output() searchEvent = new EventEmitter();
-
// Form search input
public searchForm: FormGroup;
// Modal variable
@@ -48,6 +50,12 @@ export class SearchComponent implements OnInit {
this.checkedModulesFilter = new Array();
}
+ ngOnChanges(changes: SimpleChanges): void {
+ if (changes.locate && changes.locate.currentValue) {
+ this.locateMe();
+ }
+ }
+
// Accessor to template angular.
public get TypeModal(): typeof TypeModal {
return TypeModal;
@@ -57,6 +65,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
diff --git a/src/app/structure-list/structure-list.component.html b/src/app/structure-list/structure-list.component.html
index 57b306f09..c0951d65c 100644
--- a/src/app/structure-list/structure-list.component.html
+++ b/src/app/structure-list/structure-list.component.html
@@ -1,5 +1,9 @@
<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($event)"
+ [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 b1a5c31b1..58f2b6621 100644
--- a/src/app/structure-list/structure-list.component.ts
+++ b/src/app/structure-list/structure-list.component.ts
@@ -14,9 +14,11 @@ 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>();
public showStructureDetails = false;
public structure: Structure;
@@ -83,4 +85,8 @@ export class StructureListComponent implements OnChanges {
this.structuresListChunked = [...this.structuresListChunked, ...newStructures];
}
}
+
+ public sendLocatationReset(): void {
+ this.locatationReset.emit(true);
+ }
}
--
GitLab
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 2/3] 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
From 5852223529ef7df61ec54e95ae8b47970aaace77 Mon Sep 17 00:00:00 2001
From: Hugo SUBTIL <ext.sopra.husubtil@grandlyon.com>
Date: Mon, 25 Jan 2021 17:03:39 +0100
Subject: [PATCH 3/3] fix: update unused map package
---
package-lock.json | 22 ----------------------
package.json | 2 +-
src/app/map/components/map.component.html | 5 -----
src/app/map/components/map.component.ts | 6 +++---
src/app/map/map.module.ts | 3 +--
5 files changed, 5 insertions(+), 33 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 231f8aa0a..76cfed61c 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 a6dcfb388..5aeaf424d 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/map/components/map.component.html b/src/app/map/components/map.component.html
index 3503eec70..3af397dbb 100644
--- a/src/app/map/components/map.component.html
+++ b/src/app/map/components/map.component.html
@@ -1,8 +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"
- (location$)="sendLocationEvent($event)"
- ></leaflet-locate-control> -->
</div>
diff --git a/src/app/map/components/map.component.ts b/src/app/map/components/map.component.ts
index 0e10c6043..ad2bba78c 100644
--- a/src/app/map/components/map.component.ts
+++ b/src/app/map/components/map.component.ts
@@ -8,11 +8,10 @@ import {
SimpleChanges,
ViewChild,
} from '@angular/core';
-import { latLng, MapOptions, geoJSON, tileLayer, Map, 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';
@@ -20,6 +19,7 @@ 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',
@@ -32,7 +32,6 @@ export class MapComponent implements OnChanges {
@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;
@@ -182,6 +181,7 @@ export class MapComponent implements OnChanges {
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 521ecc678..fbb935ca5 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],
--
GitLab