feat: add township locate

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"

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>

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);

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(),

src/app/map/services/map.service.ts

+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], {

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     :::