From 64f619a5de7517100392e15e8c90a09ec4a730ca Mon Sep 17 00:00:00 2001
From: Hugo SUBTIL <ext.sopra.husubtil@grandlyon.com>
Date: Fri, 4 Feb 2022 17:59:54 +0100
Subject: [PATCH 1/2] feat: put selected marker on top of the others
---
src/app/map/components/map.component.scss | 4 ++++
src/app/map/services/marker.ts | 2 +-
2 files changed, 5 insertions(+), 1 deletion(-)
diff --git a/src/app/map/components/map.component.scss b/src/app/map/components/map.component.scss
index 2da18137b..0c2728774 100644
--- a/src/app/map/components/map.component.scss
+++ b/src/app/map/components/map.component.scss
@@ -160,3 +160,7 @@
.body-wrap {
height: 400px;
}
+
+::ng-deep .on-top-marker {
+ z-index: 600 !important;
+}
diff --git a/src/app/map/services/marker.ts b/src/app/map/services/marker.ts
index b33008e4e..5f7a4d692 100644
--- a/src/app/map/services/marker.ts
+++ b/src/app/map/services/marker.ts
@@ -8,7 +8,7 @@ export const markerIcon = divIcon({
popupAnchor: [0, -48],
});
export const markerIconActive = divIcon({
- className: null,
+ className: 'on-top-marker',
html: '<svg width="48" height="48"><use xlink:href="assets/ico/sprite.svg#map-markerSelected"></use></svg>',
iconSize: [48, 48],
iconAnchor: [24, 48],
--
GitLab
From ab5fe4710823ea64f8cb5032f7b9fc8a62c1d020 Mon Sep 17 00:00:00 2001
From: Hugo SUBTIL <ext.sopra.husubtil@grandlyon.com>
Date: Mon, 7 Feb 2022 10:17:20 +0100
Subject: [PATCH 2/2] feat(carto): add on-top handling for hover icon
---
src/app/map/components/map.component.scss | 4 +++-
src/app/map/services/marker.ts | 2 +-
src/assets/scss/_z-index.scss | 1 +
3 files changed, 5 insertions(+), 2 deletions(-)
diff --git a/src/app/map/components/map.component.scss b/src/app/map/components/map.component.scss
index 0c2728774..a78caaa5c 100644
--- a/src/app/map/components/map.component.scss
+++ b/src/app/map/components/map.component.scss
@@ -5,6 +5,7 @@
@import '../../../assets/scss/shapes';
@import '../../../assets/scss/buttons';
@import '../../../assets/scss/breakpoint';
+@import '../../../assets/scss/z-index';
.map-wrapper {
border-radius: 6px;
@@ -86,6 +87,7 @@
}
}
&:hover {
+ z-index: calc($map-selected-marker - 1) !important;
svg {
fill: $blue-hover;
&.mdm {
@@ -162,5 +164,5 @@
}
::ng-deep .on-top-marker {
- z-index: 600 !important;
+ z-index: $map-selected-marker !important;
}
diff --git a/src/app/map/services/marker.ts b/src/app/map/services/marker.ts
index 5f7a4d692..fb940ba4c 100644
--- a/src/app/map/services/marker.ts
+++ b/src/app/map/services/marker.ts
@@ -15,7 +15,7 @@ export const markerIconActive = divIcon({
popupAnchor: [0, -48],
});
export const markerIconHover = divIcon({
- className: null,
+ className: 'on-top-marker',
html: '<svg width="48" height="48"><use xlink:href="assets/ico/sprite.svg#map-markerHover"></use></svg>',
iconSize: [48, 48],
iconAnchor: [24, 48],
diff --git a/src/assets/scss/_z-index.scss b/src/assets/scss/_z-index.scss
index fc1ca81b6..956dfa77b 100644
--- a/src/assets/scss/_z-index.scss
+++ b/src/assets/scss/_z-index.scss
@@ -1,3 +1,4 @@
+$map-selected-marker: 600;
// Phone view
$btn-phone-switch-map-list-z-index: 1002;
$menu-phone-z-index: 1003;
--
GitLab