From 7bafac2029038677d2baaecac375f99da8b28879 Mon Sep 17 00:00:00 2001
From: Hugo SUBTIL <ext.sopra.husubtil@grandlyon.com>
Date: Wed, 7 Apr 2021 09:43:07 +0200
Subject: [PATCH] feat: add township locate
---
proxy.conf.json | 4 ++--
src/app/carto/carto.component.html | 1 +
src/app/carto/carto.component.ts | 3 +++
src/app/map/components/map.component.ts | 23 ++++++++++++++++++++---
src/app/map/services/map.service.ts | 5 ++++-
src/app/services/geojson.service.ts | 6 +++++-
6 files changed, 35 insertions(+), 7 deletions(-)
diff --git a/proxy.conf.json b/proxy.conf.json
index f5d918024..0feeb012e 100644
--- a/proxy.conf.json
+++ b/proxy.conf.json
@@ -26,8 +26,8 @@
"changeOrigin": true,
"logLevel": "info"
},
- "/geocoding/photon/api": {
- "target": "https://download.data.grandlyon.com",
+ "/geocoding/photon-bal/api": {
+ "target": "https://download.data.grandlyon.com/geocoding/photon-bal/api",
"secure": false,
"changeOrigin": true,
"logLevel": "info"
diff --git a/src/app/carto/carto.component.html b/src/app/carto/carto.component.html
index 13bcaeb92..3b47fe933 100644
--- a/src/app/carto/carto.component.html
+++ b/src/app/carto/carto.component.html
@@ -30,6 +30,7 @@
(selectedStructure)="showDetailStructure($event)"
(locatationTrigger)="locatationTrigger($event)"
[isMapPhone]="isMapPhone"
+ [searchedValue]="searchedValue"
class="right-pane"
[ngClass]="{ mapPhone: isMapPhone == true }"
></app-map>
diff --git a/src/app/carto/carto.component.ts b/src/app/carto/carto.component.ts
index e04b0f12d..d55b420b7 100644
--- a/src/app/carto/carto.component.ts
+++ b/src/app/carto/carto.component.ts
@@ -24,6 +24,7 @@ export class CartoComponent implements OnInit {
public userLatitude: number;
public userLongitude: number;
public isMapPhone = false;
+ public searchedValue = null;
public locate = false; // Use to sync location between search and map
constructor(private structureService: StructureService, private geoJsonService: GeojsonService) {}
@@ -41,6 +42,7 @@ export class CartoComponent implements OnInit {
public getStructures(filters: Filter[]): void {
const queryString = _.find(filters, { name: 'query' });
if (queryString) {
+ this.searchedValue = queryString.value;
if (this.isLocationRequest(queryString.value)) {
this.getCoordByAddress(queryString.value).then((res) => {
this.currentLocation = res;
@@ -60,6 +62,7 @@ export class CartoComponent implements OnInit {
});
}
} else {
+ this.searchedValue = null;
this.structureService.getStructures(filters).subscribe((structures) => {
if (structures) {
this.updateStructuresdistance(structures, this.userLongitude, this.userLatitude);
diff --git a/src/app/map/components/map.component.ts b/src/app/map/components/map.component.ts
index a038e5759..1b80b2b56 100644
--- a/src/app/map/components/map.component.ts
+++ b/src/app/map/components/map.component.ts
@@ -22,9 +22,10 @@ export class MapComponent implements OnChanges {
@Input() public selectedMarkerId: string;
@Input() public isMapPhone: boolean;
@Input() public locate = false;
+ @Input() public searchedValue: string;
@Output() selectedStructure: EventEmitter<Structure> = new EventEmitter<Structure>();
@Output() locatationTrigger: EventEmitter<boolean> = new EventEmitter<boolean>();
- private lc;
+ private lc; // Locate control
private currentStructure: Structure;
public map: Map;
@@ -51,6 +52,10 @@ export class MapComponent implements OnChanges {
}
ngOnChanges(changes: SimpleChanges): void {
+ if (changes.searchedValue && !changes.searchedValue.firstChange) {
+ if (changes.searchedValue.currentValue) this.processTownCoordinate(changes.searchedValue.currentValue);
+ else this.map.setView(this.mapOptions.center, this.mapOptions.zoom);
+ }
if (changes.isMapPhone) {
if (this.isMapPhone) {
setTimeout(() => {
@@ -91,6 +96,18 @@ export class MapComponent implements OnChanges {
}
}
+ public processTownCoordinate(queryString: string): void {
+ this.geoJsonService.getTownshipCoord(queryString).subscribe(
+ (townData) => {
+ const bounds = new L.LatLngBounds(townData.map((dataArray) => dataArray.reverse()));
+ this.map.fitBounds(bounds);
+ },
+ (err) => {
+ this.map.setView(this.mapOptions.center, this.mapOptions.zoom);
+ }
+ );
+ }
+
/**
* Get structures positions and add marker corresponding to those positons on the map
*/
@@ -108,8 +125,8 @@ export class MapComponent implements OnChanges {
}
}
- private getStructuresPositions(structureListe: Structure[]): void {
- structureListe.forEach((structure: Structure) => {
+ private getStructuresPositions(structureList: Structure[]): void {
+ structureList.forEach((structure: Structure) => {
this.mapService
.createMarker(
structure.getLat(),
diff --git a/src/app/map/services/map.service.ts b/src/app/map/services/map.service.ts
index 901b4d615..5918d6a5b 100644
--- a/src/app/map/services/map.service.ts
+++ b/src/app/map/services/map.service.ts
@@ -1,7 +1,10 @@
+import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { DivIcon, divIcon, Map } from 'leaflet';
import { Marker } from 'leaflet';
+import { Observable } from 'rxjs';
import { MarkerType } from '../components/markerType.enum';
+import { AddressGeometry } from '../models/addressGeometry.model';
@Injectable({
providedIn: 'root',
@@ -31,7 +34,7 @@ export class MapService {
iconSize: [19, 24],
iconAnchor: [9, 0],
});
- constructor() {}
+ constructor(private http: HttpClient) {}
public createMarker(lat: number, lon: number, markerType: MarkerType, id?: string, tooltip?: string): Marker {
const marker = new Marker([lat, lon], {
diff --git a/src/app/services/geojson.service.ts b/src/app/services/geojson.service.ts
index ac3bfe1e2..5b4670c86 100644
--- a/src/app/services/geojson.service.ts
+++ b/src/app/services/geojson.service.ts
@@ -49,10 +49,14 @@ export class GeojsonService {
*/
public getCoord(numero: string, address: string, zipcode: string): Observable<GeoJson> {
return this.http
- .get('/geocoding/photon/api' + '?q=' + numero + ' ' + address + ' ' + zipcode, { headers: { skip: 'true' } })
+ .get('/geocoding/photon-bal/api' + '?q=' + numero + ' ' + address + ' ' + zipcode, { headers: { skip: 'true' } })
.pipe(map((data: { features: any[]; type: string }) => new GeoJson(data.features[0])));
}
+ public getTownshipCoord(town: string): Observable<Array<any>> {
+ return this.http.get<Array<any>>(`/api/structures/coordinates/` + town);
+ }
+
// :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
// ::: :::
// ::: This routine calculates the distance between two points (given the :::
--
GitLab