From 5b3aeff2c6af37e2274eb7e9d2f1bf31a824d9c1 Mon Sep 17 00:00:00 2001
From: Hugo SUBTIL <ext.sopra.husubtil@grandlyon.com>
Date: Thu, 19 Nov 2020 15:57:19 +0100
Subject: [PATCH] feat: add mdm pop-up and marker display refacto
---
src/app/map/components/map.component.scss | 30 +++++++++-----
src/app/map/components/map.component.ts | 24 +++++++++++-
src/app/map/components/markerType.enum.ts | 4 ++
src/app/map/models/geoJsonProperties.model.ts | 3 ++
src/app/map/services/map.service.ts | 39 +++++++++++++++----
5 files changed, 81 insertions(+), 19 deletions(-)
create mode 100644 src/app/map/components/markerType.enum.ts
diff --git a/src/app/map/components/map.component.scss b/src/app/map/components/map.component.scss
index 9384e8a7b..a7ddbc547 100644
--- a/src/app/map/components/map.component.scss
+++ b/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 {
diff --git a/src/app/map/components/map.component.ts b/src/app/map/components/map.component.ts
index 29937bddd..7dfd98396 100644
--- a/src/app/map/components/map.component.ts
+++ b/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);
});
});
}
diff --git a/src/app/map/components/markerType.enum.ts b/src/app/map/components/markerType.enum.ts
new file mode 100644
index 000000000..28a427b55
--- /dev/null
+++ b/src/app/map/components/markerType.enum.ts
@@ -0,0 +1,4 @@
+export enum MarkerType {
+ structure = 0,
+ mdm = 1,
+}
diff --git a/src/app/map/models/geoJsonProperties.model.ts b/src/app/map/models/geoJsonProperties.model.ts
index fc9abed8d..adbd5378f 100644
--- a/src/app/map/models/geoJsonProperties.model.ts
+++ b/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;
}
diff --git a/src/app/map/services/map.service.ts b/src/app/map/services/map.service.ts
index e5b7ebdfe..cce6df9a9 100644
--- a/src/app/map/services/map.service.ts
+++ b/src/app/map/services/map.service.ts
@@ -1,6 +1,7 @@
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 {
--
GitLab