diff --git a/src/app/map/components/map.component.scss b/src/app/map/components/map.component.scss
index 0c3ea79c1a82fca613f905de8ac1d9194b7c3551..0e07fe89a00487da7b9b57d720ff44119ad7a581 100644
--- a/src/app/map/components/map.component.scss
+++ b/src/app/map/components/map.component.scss
@@ -62,9 +62,21 @@
}
}
+::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;
@@ -82,21 +94,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 01a17f2f9f6b5ca9388e8e39065210250f76d99b..84a68b693016845ba1fc4f5631c1abcb44baaccc 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.n, element.voie, element.commune).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 0000000000000000000000000000000000000000..28a427b55b4bb4012d354b7a4947db5819683d46
--- /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 fc9abed8dfa0c6db0cbd2e0c3a1f93d651ec5195..adbd5378f31e46cf1e6c27283f758cf9f498f053 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 f2664c53f8930b86ab02c9189dd352879a4f53c9..dac2b55e2d9b7a1d76b3a99d2b0d686f73f46cc0 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',
@@ -35,8 +36,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();
});
@@ -46,14 +50,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 {