Hover effect for circles

krasch · Dec 18, 2024 · a1e74c3 · a1e74c3
1 parent ba7d2ba
commit a1e74c3
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 14 deletions.
diff --git a/script/components/map/map.js b/script/components/map/map.js
@@ -219,22 +219,23 @@ class MapWrapper {
           "outer-circle-animation",
         )) {
           marker.style.setProperty("animation-play-state", "paused");
-          marker.style.setProperty("visibility", "hidden");
+          marker.style.setProperty("visibility", "hidden"); // todo remove completely from map
         }
       }
 
+      this.setCityHoverState(e.feature.id, true);
+
       if (!e.featureState.circleVisible) return;
 
       this.#cityTooltip
         .setLngLat(e.lngLat)
         .setText(e.feature.properties.name)
         .addTo(this.map);
-      this.setCityHoverState(e.feature.id, true);
     });
     layerMouseEvents.cities.on("mouseLeave", (e) => {
+      this.setCityHoverState(e.feature.id, false);
       if (!e.featureState.circleVisible) return;
       this.#cityTooltip.remove();
-      this.setCityHoverState(e.feature.id, false);
     });
     layerMouseEvents.cities.on("click", (e) => {
       if (e.layer === "city-circle" && !e.featureState.circleVisible) return;

diff --git a/style/map/layers.js b/style/map/layers.js
@@ -71,13 +71,30 @@ const mapStyles = [
   //           city circles
   // ################################
 
+  {
+    id: "city-circle-outer-border",
+    source: "cities",
+    type: "circle",
+    paint: {
+      "circle-radius": [
+        "case",
+        ["boolean", ["feature-state", "hover"], false],
+        8.0,
+        5, // 5
+      ],
+      "circle-opacity": 0,
+      "circle-stroke-width": 1,
+      "circle-stroke-color": "#aaa",
+    },
+  },
+
   {
     id: "city-circle",
     source: "cities",
     type: "symbol",
     layout: {
       "icon-image": "circle",
-      "icon-size": 0.5,
+      "icon-size": 0.8,
       "icon-allow-overlap": true,
       "text-allow-overlap": true, // perhaps speed up redrawing?
     },
@@ -89,7 +106,7 @@ const mapStyles = [
         0.6,
         ["boolean", ["feature-state", "hover"], false],
         1.0, // todo does not appear to have effect
-        0,
+        1,
       ],
       "icon-halo-color": ["to-color", ["feature-state", "circleColor"], "#aaa"],
       "icon-halo-width": [

diff --git a/style/map/map.css b/style/map/map.css
@@ -24,31 +24,33 @@
 }
 
 .city-marker-destination {
-  --circle-radius: 8px;
-  --pulse-radius: 16px;
+  --circle-radius: 9px;
+  --circle-offset: -5px;
+  --pulse-radius: 15px;
+  --pulse-offset: -8px;
 }
 
 .city-marker-destination .inner-circle {
   position: absolute;
-  left: calc(-1 * var(--circle-radius) / 2);
-  bottom: calc(-1 * var(--circle-radius) / 2);
+  left: var(--circle-offset);
+  bottom: var(--circle-offset);
 
   /*background-image: url("../../images/marker_flag.svg");
   background-image: url("../../images/circle.svg");*/
-  height: var(--circle-radius);
+  /*height: var(--circle-radius);
   width: var(--circle-radius);
 
   border-radius: 50%;
   border: 1px solid darkgray;
 
-  background-color: white;
+  background-color: white;*/
 }
 
 .city-marker-destination .outer-circle,
 .city-marker-destination .outer-circle-animation {
   position: absolute;
-  left: calc(-1 * var(--pulse-radius) / 2);
-  bottom: calc(-1 * var(--pulse-radius) / 2);
+  left: var(--pulse-offset);
+  bottom: var(--pulse-offset);
 
   height: var(--pulse-radius);
   width: var(--pulse-radius);
@@ -64,7 +66,7 @@
 }
 
 .city-marker-destination .outer-circle:hover {
-  opacity: 1;
+  /*opacity: 1;*/
 }
 
 @keyframes pulsate {