failed attempt to get z-index ordering of animated markers correct

VEuPathDB · Nov 3, 2024 · c702c1c · c702c1c
1 parent 48d15cf
commit c702c1c
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 4 deletions.
diff --git a/packages/libs/components/src/map/animation_functions/geohash.tsx b/packages/libs/components/src/map/animation_functions/geohash.tsx
@@ -35,7 +35,10 @@ export default function geohashAnimation({
     const hashDif = currentGeohash.length - prevGeoHash.length;
     // Get array of new markers with old positions
     const cloneArray = updateMarkers(markers, prevMarkers, hashDif);
-    consolidatedMarkers = [...prevMarkers, ...cloneArray];
+    // put them first - ideally underneath the old markers
+    // (though it seems impossible to get this to work)
+    // ((see also updateMarkers zIndexOffset failed attempt))
+    consolidatedMarkers = [...cloneArray, ...prevMarkers];
   } else {
     /** No difference in geohashes - Render markers as they are **/
     zoomType = null;

diff --git a/packages/libs/components/src/map/animation_functions/updateMarkers.tsx b/packages/libs/components/src/map/animation_functions/updateMarkers.tsx
@@ -22,9 +22,10 @@ export default function updateMarkers(
       // Clone marker element with new position
       markerCloneProps = {
         position: matchingMarkers[0].props.position,
-        // ideally we would put the modified markers on top
-        // but this doesn't seem to work:
-        // zIndexOffset: -1000, // or +1000
+        icon: {
+          ...markerObj.props.icon,
+          className: 'bottom-marker', // doesn't seem to work :-(
+        },
       };
     }
 

diff --git a/packages/libs/components/src/map/styles/map-styles.css b/packages/libs/components/src/map/styles/map-styles.css
@@ -71,6 +71,10 @@
   z-index: 1;
 }
 
+.bottom-marker {
+  z-index: -1000;
+}
+
 /* Replace leaflet styles*/
 
 /* general typography */