diff --git a/src/app/map/components/map.component.scss b/src/app/map/components/map.component.scss
index a0b56f0dc94c670afc6542e44726f9432d31257b..de50ff0b1c4d79a19e525aba1c04afd18c95f8df 100644
--- a/src/app/map/components/map.component.scss
+++ b/src/app/map/components/map.component.scss
@@ -27,29 +27,38 @@
::ng-deep .leaflet-popup-close-button {
display: none;
}
-
+::ng-deep .leaflet-bar-part-single {
+ &:hover {
+ .fa-map-marker {
+ background-color: $blue-hover;
+ }
+ }
+ &:active {
+ .fa-map-marker {
+ background-color: $blue-active;
+ }
+ }
+}
::ng-deep .fa-map-marker {
- color: $black;
position: absolute;
- width: 12px;
- height: 12px;
- border: solid 1px currentColor;
- border-radius: 7px 7px 7px 0;
+ width: 18px;
+ height: 18px;
+ border-radius: 50% 50% 50% 0;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
- margin-left: -6px;
- margin-top: 6px;
-}
-
-::ng-deep .fa-map-marker:before {
- content: '';
- position: absolute;
- left: 3px;
- top: 3px;
- width: 4px;
- height: 4px;
- border: solid 1px currentColor;
- border-radius: 3px;
+ background-color: $grey-3;
+ margin-left: -8px;
+ margin-top: 4px;
+ &:before {
+ content: '';
+ position: absolute;
+ left: 5px;
+ top: 6px;
+ width: 7px;
+ height: 7px;
+ border-radius: 4px;
+ background-color: $white;
+ }
}
::ng-deep .leaflet-control-locate-circle {
@@ -82,6 +91,7 @@
::ng-deep .leaflet-popup {
border-radius: 6px;
@include background-hash;
+ border: 1px solid $grey-4;
padding: 0 0 4px 4px;
bottom: -15px !important;
h1 {
@@ -110,7 +120,6 @@
::ng-deep .leaflet-popup-content-wrapper {
box-shadow: unset;
border-radius: 6px;
- border: 1px solid $grey-4;
}
::ng-deep .leaflet-popup-content {
width: 240px;
diff --git a/src/app/map/components/map.component.ts b/src/app/map/components/map.component.ts
index e8b0b1cc58598276b72881e1b669507ff117c014..4b2abe9c3efeeee10550f033dd23a37c640b1a46 100644
--- a/src/app/map/components/map.component.ts
+++ b/src/app/map/components/map.component.ts
@@ -69,9 +69,11 @@ export class MapComponent implements OnChanges {
// Handle map marker tooltip
if (changes.toogleToolTipId && changes.toogleToolTipId.currentValue !== changes.toogleToolTipId.previousValue) {
if (changes.toogleToolTipId.previousValue !== undefined) {
- this.mapService.toogleToolTip(changes.toogleToolTipId.previousValue);
+ this.mapService.setUnactiveMarker(changes.toogleToolTipId.previousValue);
+ }
+ if (changes.toogleToolTipId.currentValue !== undefined) {
+ this.mapService.setActiveMarker(changes.toogleToolTipId.currentValue);
}
- this.mapService.toogleToolTip(changes.toogleToolTipId.currentValue);
}
// Handle map marker selection
if (changes.selectedMarkerId && this.map) {
@@ -232,15 +234,6 @@ export class MapComponent implements OnChanges {
});
}
- /**
- * Toogle all tooltips given in parameters
- */
- public toggleToolTip(ids: Array<number>): void {
- ids.forEach((id) => {
- this.mapService.toogleToolTip(id);
- });
- }
-
private centerLeafletMapOnMarker(markerId: number): void {
const marker = this.mapService.getMarker(markerId);
const latLngs = [marker.getLatLng()];
diff --git a/src/app/map/services/map.service.ts b/src/app/map/services/map.service.ts
index 58594ff2388e9a06ffeb01abbb29ad578f4f45f6..eb7143fdc1b7666a997db978e9f0a210d0646b5f 100644
--- a/src/app/map/services/map.service.ts
+++ b/src/app/map/services/map.service.ts
@@ -8,6 +8,7 @@ import { MarkerType } from '../components/markerType.enum';
})
export class MapService {
private static markersList = {};
+ private isMarkerActive = false;
public markerIconHover = divIcon({
className: null,
html: '<svg width="40" height="46"><use xlink:href="assets/ico/sprite.svg#map-marker-locate"></use></svg>',
@@ -15,6 +16,13 @@ export class MapService {
iconAnchor: [20, 46],
popupAnchor: [0, -46],
});
+ public markerIconActive = divIcon({
+ className: null,
+ html: '<svg width="40" height="46" fill="#d50000"><use xlink:href="assets/ico/sprite.svg#map-marker"></use></svg>',
+ iconSize: [40, 46],
+ iconAnchor: [20, 46],
+ popupAnchor: [0, -46],
+ });
public markerIcon = divIcon({
className: null,
html:
@@ -96,13 +104,18 @@ export class MapService {
}
/**
- * Toogle a tooltip
* @param id marker id
*/
- public toogleToolTip(id: number): void {
- if (id) {
- this.getMarker(id).togglePopup();
+ public setActiveMarker(id: number): void {
+ this.getMarker(id).setIcon(this.getMarkerIconHover(MarkerType.structure));
+ }
+
+ public setUnactiveMarker(id: number): void {
+ // To skip mouseleave when user emit click on structure list
+ if (!this.isMarkerActive) {
+ this.getMarker(id).setIcon(this.getMarkerIcon(MarkerType.structure));
}
+ this.isMarkerActive = false;
}
/**
@@ -121,7 +134,8 @@ export class MapService {
*/
public setSelectedMarker(id: number): void {
if (id) {
- this.getMarker(id).setIcon(this.markerIconHover);
+ this.getMarker(id).setIcon(this.markerIconActive);
+ this.isMarkerActive = true;
}
}
diff --git a/src/app/structure-list/components/card/card.component.html b/src/app/structure-list/components/card/card.component.html
index fb162dab7397dab16d9459f4379362eddaed0259..2e4a7f611a02f04fc305904356e922df691cd355 100644
--- a/src/app/structure-list/components/card/card.component.html
+++ b/src/app/structure-list/components/card/card.component.html
@@ -1,4 +1,4 @@
-<div class="structure" fxLayout="column" (click)="cardClicked()" (mouseover)="cardHover()">
+<div class="structure" fxLayout="column" (click)="cardClicked()" (mouseenter)="cardHover()">
<div class="headerStructure" fxLayout="row" fxLayoutAlign="space-between center" fxLayoutGap="16px">
<span class="nomStructure">{{ structure.structureName }}</span>
<div
diff --git a/src/app/structure-list/structure-list.component.html b/src/app/structure-list/structure-list.component.html
index f0da17a8cd8ad9ce6d6d4fbc4d19d9d7b491602e..a4d7320ed0c1ee10516512502ddf3c53371c360e 100644
--- a/src/app/structure-list/structure-list.component.html
+++ b/src/app/structure-list/structure-list.component.html
@@ -5,7 +5,7 @@
{{ structureList ? structureList.length : '0' }} structure{{ structureList && structureList.length > 1 ? 's' : '' }}
</div>
-<div (scroll)="onScrollDown($event)" id="listCard" class="listCard" (mouseout)="mouseOut()">
+<div (scroll)="onScrollDown($event)" id="listCard" class="listCard" (mouseleave)="mouseLeave()">
<app-card
*ngFor="let structure of structuresListChunked"
[structure]="structure"
diff --git a/src/app/structure-list/structure-list.component.ts b/src/app/structure-list/structure-list.component.ts
index 7478e3778974522f3476e7004f00cc98cddfe178..68b0db213920b4720f9d922553ed91e1e83bf327 100644
--- a/src/app/structure-list/structure-list.component.ts
+++ b/src/app/structure-list/structure-list.component.ts
@@ -55,7 +55,7 @@ export class StructureListComponent implements OnChanges {
this.displayMapMarkerId.emit([event.id]);
}
- public mouseOut(): void {
+ public mouseLeave(): void {
this.displayMapMarkerId.emit([undefined]);
}