Update style.css

style.css

@@ -370,12 +370,18 @@ nav {
   color: #CC0033;
 }
 
-#map {
+
+#map_chi {
     position: relative; /* This makes it a reference for absolute children positioning */
 }
 
+#map_score {
+    position: relative; /* This makes it a reference for absolute children positioning */
+}
+
+
 /* Style for the tooltip */
-.tooltip {
+.tooltip_score, .tooltip_chi {
     position: absolute;
     text-align: center;
     padding: 6px;
@@ -387,16 +393,22 @@ nav {
     opacity: 1; 
 }
 
-#map-legend {
+#map-legend_score, #map-legend_chi {
     position: absolute;
-    top: 10px;  /* Adjust as needed */
-    right: 10px; /* Adjust as needed, or change to left if you prefer */
+    top: 15px;  /* Adjust as needed */
+    right: 15px; /* Adjust as needed, or change to left if you prefer */
     z-index: 10; /* Higher than the map's z-index */
     pointer-events: none; /* Makes it non-interactive so map can be interacted with */
 }
 
 /* Ensure the text and rects inside the legend are interactive for mouse events */
-#map-legend text,
-#map-legend rect {
+#map-legend_score text,
+#map-legend_score rect {
+    pointer-events: all;
+}
+
+/* Ensure the text and rects inside the legend are interactive for mouse events */
+#map-legend_chi text,
+#map-legend_chi rect {
     pointer-events: all;
 }