Merge branch 'feat/selected-marker-on-top' into 'dev'

feat/US28 put selected marker on top of the others

See merge request web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client!200

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 {
@@ -160,3 +162,7 @@
 .body-wrap {
   height: 400px;
 }
+
+::ng-deep .on-top-marker {
+  z-index: $map-selected-marker !important;
+}

src/app/map/services/marker.ts

@@ -8,14 +8,14 @@ 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],
   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],

src/assets/scss/_z-index.scss

+$map-selected-marker: 600;
 // Phone view
 $btn-phone-switch-map-list-z-index: 1002;
 $menu-phone-z-index: 1003;