feat: add mdm pop-up and marker display refacto

src/app/map/components/map.component.scss

@@ -64,9 +64,21 @@
   margin-left: -21px !important;
 }
 
+::ng-deep .leaflet-left {
+  right: 0;
+  left: unset;
+  .leaflet-control {
+    margin-left: 0;
+    margin-right: 10px;
+  }
+}
+/*** POP-UP ***/
+
 ::ng-deep .leaflet-popup {
-  padding: 8px 10px 8px 10px;
   border-radius: 6px;
+  @include background-hash;
+  padding: 0 0 4px 4px;
+  bottom: -15px !important;
   h1 {
     color: $grey-1;
     @include cn-bold-20;
@@ -84,21 +96,19 @@
     button {
       @include btn-search-filter;
       @include cn-bold-14;
-      width: 149px;
     }
   }
   span {
     display: inline-block;
   }
 }
-
-::ng-deep .leaflet-left {
-  right: 0;
-  left: unset;
-  .leaflet-control {
-    margin-left: 0;
-    margin-right: 10px;
-  }
+::ng-deep .leaflet-popup-content-wrapper {
+  box-shadow: unset;
+  border-radius: 6px;
+  border: 1px solid $grey-4;
+}
+::ng-deep .leaflet-popup-tip-container {
+  display: none;
 }
 
 @media print {

src/app/map/components/map.component.ts

@@ -29,6 +29,8 @@ 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';
 
 @Component({
   selector: 'app-map',
@@ -109,7 +111,13 @@ export class MapComponent implements OnChanges {
     structureListe.forEach((element: Structure) => {
       this.getCoord(element.voie).subscribe((coord: GeoJson) => {
         this.mapService
-          .createMarker(coord.geometry.getLon(), coord.geometry.getLat(), element.id, this.buildToolTip(element))
+          .createMarker(
+            coord.geometry.getLon(),
+            coord.geometry.getLat(),
+            MarkerType.structure,
+            element.id,
+            this.buildToolTip(element)
+          )
           .addTo(this.map)
           // store structure before user click on button
           .on('popupopen', () => {
@@ -147,6 +155,10 @@ export class MapComponent implements OnChanges {
     );
   }
 
+  private buildMdmPopUp(mdmProperties: GeoJsonProperties): string {
+    return `<h1>${mdmProperties.nom}</h1><p>${mdmProperties.adresse}</p>`;
+  }
+
   /**
    * Get coord with a street reference
    * @param idVoie Street reference
@@ -210,7 +222,15 @@ export class MapComponent implements OnChanges {
   private initMDMLayer(): void {
     this.geoJsonService.getMDMGeoJson().subscribe((res) => {
       res.forEach((mdm) => {
-        this.mapService.createMDMMarker(mdm.geometry.getLon(), mdm.geometry.getLat()).addTo(this.map);
+        this.mapService
+          .createMarker(
+            mdm.geometry.getLon(),
+            mdm.geometry.getLat(),
+            MarkerType.mdm,
+            null,
+            this.buildMdmPopUp(mdm.properties)
+          )
+          .addTo(this.map);
       });
     });
   }

src/app/map/components/markerType.enum.ts

+export enum MarkerType {
+  structure = 0,
+  mdm = 1,
+}

src/app/map/models/geoJsonProperties.model.ts

@@ -2,6 +2,9 @@ export class GeoJsonProperties {
   public city: string;
   public country: string;
   public name: string;
+  public nom: string;
   public postcode: string;
   public state: string;
+  public adresse: string;
+  public ville: string;
 }

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

 import { Injectable } from '@angular/core';
 import { DivIcon, divIcon, Map } from 'leaflet';
 import { Marker } from 'leaflet';
+import { MarkerType } from '../components/markerType.enum';
 
 @Injectable({
   providedIn: 'root',
@@ -33,8 +34,11 @@ export class MapService {
   });
   constructor() {}
 
-  public createMarker(lat: number, lon: number, id: number, tooltip?: string): Marker {
-    const marker = new Marker([lat, lon], { icon: this.markerIcon });
+  public createMarker(lat: number, lon: number, markerType: MarkerType, id?: number, tooltip?: string): Marker {
+    const marker = new Marker([lat, lon], {
+      icon: this.getMarkerIcon(markerType),
+      attribution: this.getLayerAttributton(markerType),
+    });
     marker.on('mouseclick', (evt) => {
       evt.target.openPopup();
     });
@@ -44,14 +48,35 @@ export class MapService {
         autoPan: false,
       });
     }
-    MapService.markersList[id] = marker;
-    return this.bindMouseEventOnMarker(marker, this.markerIcon, this.markerIconHover);
+
+    if (id) {
+      MapService.markersList[id] = marker;
+    }
+    return this.bindMouseEventOnMarker(marker, this.getMarkerIcon(markerType), this.getMarkerIconHover(markerType));
+  }
+
+  private getLayerAttributton(markerType: MarkerType): string {
+    if (markerType === MarkerType.mdm) {
+      return 'mdm';
+    } else {
+      return 'structure';
+    }
   }
 
-  public createMDMMarker(lat: number, lon: number): Marker {
-    const marker = new Marker([lat, lon], { icon: this.markerIconMdm, attribution: 'mdm' });
+  private getMarkerIcon(markerType: MarkerType): DivIcon {
+    if (markerType === MarkerType.mdm) {
+      return this.markerIconMdm;
+    } else {
+      return this.markerIcon;
+    }
+  }
 
-    return this.bindMouseEventOnMarker(marker, this.markerIconMdm, this.markerIconMdmHover);
+  private getMarkerIconHover(markerType: MarkerType): DivIcon {
+    if (markerType === MarkerType.mdm) {
+      return this.markerIconMdmHover;
+    } else {
+      return this.markerIconHover;
+    }
   }
 
   private bindMouseEventOnMarker(marker: Marker, regularIcon: DivIcon, hoverIcon: DivIcon): Marker {