Use BaseLayers sets in conf and impove map in add-site form component

frontend/src/app/programs/observations/detail/detail.component.ts

@@ -11,6 +11,27 @@ import {
 
 declare let $: any;
 
+const map_conf = {
+    BASE_LAYERS: MainConfig['BASEMAPS'].reduce((acc, baseLayer: Object) => {
+        const layerConf: any = {
+            name: baseLayer['name'],
+            attribution: baseLayer['attribution'],
+            detectRetina: baseLayer['detectRetina'],
+            maxZoom: baseLayer['maxZoom'],
+            bounds: baseLayer['bounds'],
+            apiKey: baseLayer['apiKey'],
+            layerName: baseLayer['layerName'],
+        };
+        if (baseLayer['subdomains']) {
+            layerConf.subdomains = baseLayer['subdomains'];
+        }
+        acc[baseLayer['name']] = L.tileLayer(baseLayer['layer'], layerConf);
+        return acc;
+    }, {}),
+    DEFAULT_BASE_MAP: () => 
+        map_conf.BASE_LAYERS[MainConfig['DEFAULT_PROVIDER']],
+};
+
 @Component({
     selector: 'app-obs-detail',
     templateUrl: '../../base/detail/detail.component.html',
@@ -48,10 +69,9 @@ export class ObsDetailComponent
                 });
 
             // setup map
-            const map = L.map('map');
-            L.tileLayer('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-                attribution: 'OpenStreetMap',
-            }).addTo(map);
+            const map = L.map('map', {
+                layers: [map_conf.DEFAULT_BASE_MAP()],
+            } as any);
 
             let coord = this.obs.geometry.coordinates;
             let latLng = L.latLng(coord[1], coord[0]);

frontend/src/app/programs/observations/form/form.component.ts

@@ -235,13 +235,11 @@ export class ObsFormComponent implements AfterViewInit {
 
                 // build map control
                 const formMap = L.map('formMap', {
+                    layers: [map_conf.DEFAULT_BASE_MAP()],
                     gestureHandling: true,
                 } as any);
                 this.formMap = formMap;
 
-                L.tileLayer('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-                    attribution: 'OpenStreetMap',
-                }).addTo(formMap);
                 L.control
                     .layers(map_conf.BASE_LAYERS, null, {
                         collapsed: map_conf.BASE_LAYER_CONTROL_INIT_COLLAPSED,

frontend/src/app/programs/sites/detail/detail.component.ts

@@ -18,6 +18,27 @@ import { UserService } from '../../../auth/user-dashboard/user.service.service';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { SiteService } from '../sites.service';
 
+const map_conf = {
+    BASE_LAYERS: MainConfig['BASEMAPS'].reduce((acc, baseLayer: Object) => {
+        const layerConf: any = {
+            name: baseLayer['name'],
+            attribution: baseLayer['attribution'],
+            detectRetina: baseLayer['detectRetina'],
+            maxZoom: baseLayer['maxZoom'],
+            bounds: baseLayer['bounds'],
+            apiKey: baseLayer['apiKey'],
+            layerName: baseLayer['layerName'],
+        };
+        if (baseLayer['subdomains']) {
+            layerConf.subdomains = baseLayer['subdomains'];
+        }
+        acc[baseLayer['name']] = L.tileLayer(baseLayer['layer'], layerConf);
+        return acc;
+    }, {}),
+    DEFAULT_BASE_MAP: () => 
+        map_conf.BASE_LAYERS[MainConfig['DEFAULT_PROVIDER']],
+};
+
 @Component({
     selector: 'app-site-detail',
     templateUrl: '../../base/detail/detail.component.html',
@@ -88,10 +109,9 @@ export class SiteDetailComponent
 
     prepareSiteData(): void {
         // setup map
-        const map = L.map('map');
-        L.tileLayer('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-            attribution: 'OpenStreetMap',
-        }).addTo(map);
+        const map = L.map('map', {
+            layers: [map_conf.DEFAULT_BASE_MAP()],
+        } as any);
         const coord = this.site.geometry.coordinates;
         const latLng = L.latLng(coord[1], coord[0]);
         map.setView(latLng, 13);

frontend/src/app/programs/sites/siteform/siteform.component.css

@@ -1,4 +1,4 @@
 #formMap {
-    min-height: 225px; /*50vh*/
+    min-height: 375px; /*50vh*/
     width: 100%;
 }

frontend/src/app/programs/sites/siteform/siteform.component.html

@@ -1,7 +1,7 @@
 <form id="siteForm" [formGroup]="siteForm" (ngSubmit)="onFormSubmit()">
 
     <div class="form-row">
-        <div class="form-group col-lg-6 col-md-12 half">
+        <div class="form-group col-lg-12 col-md-12">
             <h5>Informations</h5>
             <label for="counting">*Type de site&nbsp;</label>
             <select
@@ -21,7 +21,7 @@ <h5>Informations</h5>
             <label for="counting">*Nom du site&nbsp;</label>
             <input type="text" formControlName="name" class="form-control" />
         </div>
-        <div class="form-group col-lg-6 col-md-12 half">
+        <div class="form-group col-lg-12 col-md-12">
             <h5>Où est-il situé ?</h5>
             <div class="position-relative">
                 <div class="zoom-alert" *ngIf="hasZoomAlert">

frontend/src/app/programs/sites/siteform/siteform.component.ts

@@ -5,6 +5,8 @@ import {
     ViewChild,
     ElementRef,
     Input,
+    LOCALE_ID,
+    Inject,
 } from '@angular/core';
 import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
@@ -17,12 +19,47 @@ import * as L from 'leaflet';
 import { LeafletMouseEvent } from 'leaflet';
 import 'leaflet-fullscreen/dist/Leaflet.fullscreen';
 import 'leaflet-gesture-handling';
+import 'leaflet-search';
+import { ControlPosition } from 'leaflet';
+import { ToastrService } from 'ngx-toastr';
 
 import { MainConfig } from '../../../../conf/main.config';
 import { MapService } from '../../base/map/map.service';
 
 // declare let $: any;
 
+const map_conf = {
+    GEOLOCATION_CONTROL_POSITION: 'topright',
+    GEOLOCATION_HIGH_ACCURACY: false,
+    BASE_LAYERS: MainConfig['BASEMAPS'].reduce((acc, baseLayer: Object) => {
+        const layerConf: any = {
+            name: baseLayer['name'],
+            attribution: baseLayer['attribution'],
+            detectRetina: baseLayer['detectRetina'],
+            maxZoom: baseLayer['maxZoom'],
+            bounds: baseLayer['bounds'],
+            apiKey: baseLayer['apiKey'],
+            layerName: baseLayer['layerName'],
+        };
+        if (baseLayer['subdomains']) {
+            layerConf.subdomains = baseLayer['subdomains'];
+        }
+        acc[baseLayer['name']] = L.tileLayer(baseLayer['layer'], layerConf);
+        return acc;
+    }, {}),
+    BASE_LAYER_CONTROL_POSITION: 'topright' as ControlPosition,
+    BASE_LAYER_CONTROL_INIT_COLLAPSED: true,
+    DEFAULT_BASE_MAP: () =>
+        map_conf.BASE_LAYERS[MainConfig['DEFAULT_PROVIDER']],
+    PROGRAM_AREA_STYLE: {
+        fillColor: 'transparent',
+        weight: 2,
+        opacity: 0.8,
+        color: 'red',
+        dashArray: '4',
+    },
+};
+
 const PROGRAM_AREA_STYLE = {
     fillColor: 'transparent',
     weight: 2,
@@ -68,7 +105,9 @@ export class SiteFormComponent implements AfterViewInit {
     mapVars: any = {};
 
     constructor(
+        @Inject(LOCALE_ID) readonly localeId: string,
         private http: HttpClient,
+        private toastr: ToastrService,
         private mapService: MapService,
         private dateParser: NgbDateParserFormatter
     ) {}
@@ -112,22 +151,71 @@ export class SiteFormComponent implements AfterViewInit {
 
                 // build map control
                 const formMap = L.map('formMap', {
+                    layers: [map_conf.DEFAULT_BASE_MAP()],
                     gestureHandling: true,
                 } as any);
                 this.formMap = formMap;
 
-                L.tileLayer('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-                    attribution: 'OpenStreetMap',
-                }).addTo(formMap);
+                L.control
+                    .layers(map_conf.BASE_LAYERS, null, {
+                        collapsed: map_conf.BASE_LAYER_CONTROL_INIT_COLLAPSED,
+                        position: map_conf.BASE_LAYER_CONTROL_POSITION,
+                    })
+                    .addTo(formMap);
 
                 L.control['fullscreen']({
                     position: 'topright',
                     title: {
                         false: 'View Fullscreen',
-                        true: 'Exit Fullscreen',
+                        true: 'Exit Fullscreefullscreenn',
                     },
                     pseudoFullscreen: true,
                 }).addTo(formMap);
+                console.log('LControl', L.control);
+
+                L.control['search']({
+                    url: 'https://nominatim.openstreetmap.org/search?format=json&accept-language=fr-FR&q={s}',
+                    jsonpParam: 'json_callback',
+                    propertyName: 'display_name',
+                    position: 'topright',
+                    propertyLoc: ['lat', 'lon'],
+                    markerLocation: true,
+                    autoType: true,
+                    autoCollapse: true,
+                    minLength: 3,
+                    zoom: 15,
+                    text: 'Recherche...',
+                    textCancel: 'Annuler',
+                    textErr: 'Erreur',
+                }).addTo(formMap);
+
+                L.control
+                    .locate({
+                        icon: 'fa fa-location-arrow',
+                        position: map_conf.GEOLOCATION_CONTROL_POSITION,
+                        strings: {
+                            title: MainConfig.LOCATE_CONTROL_TITLE[
+                                this.localeId
+                            ]
+                                ? MainConfig.LOCATE_CONTROL_TITLE[this.localeId]
+                                : 'Me géolocaliser',
+                        },
+                        getLocationBounds: (locationEvent) =>
+                            locationEvent.bounds.extend(L.LatLngBounds),
+                        onLocationError: (locationEvent) => {
+                            let msg =
+                                'Vous semblez être en dehors de la zone du programme.';
+                            this.toastr.error(msg, '', {
+                                positionClass: 'toast-top-right',
+                            });
+                            //alert("Vous semblez être en dehors de la zone du programme")
+                        },
+                        locateOptions: {
+                            enableHighAccuracy:
+                                map_conf.GEOLOCATION_HIGH_ACCURACY,
+                        },
+                    } as any)
+                    .addTo(formMap);
 
                 const ZoomViewer = L.Control.extend({
                     onAdd: () => {