First version of circle animation using css

index.html

@@ -95,7 +95,11 @@
 </template>
 
 <template id="template-city-marker">
-    <div class="city-marker city-marker-empty city-marker-small city-marker-light"></div>
+    <div class="city-marker city-marker-empty city-marker-small city-marker-light">
+        <div class="inner-circle"></div>
+        <div class="outer-circle-animation"></div>
+        <div class="outer-circle"></div>
+    </div>
 </template>
 
 <template id="template-city-menu">

script/components/map/map.js

@@ -213,7 +213,18 @@ class MapWrapper {
 
     // set up mouse events for interacting with cities
     layerMouseEvents.cities.on("mouseOver", (e) => {
+      const icon = this.#states.cities.getDefault(e.features[0].id).markerIcon;
+      if (icon === "destination") {
+        for (let marker of document.getElementsByClassName(
+          "outer-circle-animation",
+        )) {
+          marker.style.setProperty("animation-play-state", "paused");
+          marker.style.setProperty("visibility", "hidden");
+        }
+      }
+
       if (!e.featureState.circleVisible) return;
+
       this.#cityTooltip
         .setLngLat(e.lngLat)
         .setText(e.feature.properties.name)

script/util.js

@@ -169,6 +169,10 @@ class StateManager {
     return diffs.filter((d) => d.kind !== "____");
   }
 
+  getDefault(id) {
+    return this.#defaults[id];
+  }
+
   #hasDefault(id, key) {
     return (
       this.#defaults !== undefined &&

style/map/map.css

@@ -24,31 +24,78 @@
 }
 
 .city-marker-destination {
-  background-image: url("../../images/marker_flag.svg");
+  --circle-radius: 8px;
+  --pulse-radius: 16px;
+}
+
+.city-marker-destination .inner-circle {
+  position: absolute;
+  left: calc(-1 * var(--circle-radius) / 2);
+  bottom: calc(-1 * var(--circle-radius) / 2);
+
+  /*background-image: url("../../images/marker_flag.svg");
+  background-image: url("../../images/circle.svg");*/
+  height: var(--circle-radius);
+  width: var(--circle-radius);
+
+  border-radius: 50%;
+  border: 1px solid darkgray;
+
+  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);
+
+  height: var(--pulse-radius);
+  width: var(--pulse-radius);
+
+  border: 1px solid #286099;
+  border-radius: 50%;
+
+  opacity: 0;
+}
+
+.city-marker-destination .outer-circle-animation {
+  animation: pulsate 1s ease-out infinite;
+}
+
+.city-marker-destination .outer-circle:hover {
+  opacity: 1;
+}
+
+@keyframes pulsate {
+  0% {
+    transform: scale(0.1, 0.1);
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1.2, 1.2);
+    opacity: 0;
+  }
 }
 
 .city-marker-small {
-  height: 1.5rem;
+  /*height: 1.5rem;
   width: calc(1.5rem * 0.64);
+  width: 1.5rem;*/
 }
 
 .city-marker-large {
   height: 2.5rem;
   width: calc(2.5rem * 0.64);
 }
 
-.city-marker-light {
-  filter: var(--filter-light-blue);
-}
-
 .city-marker-dark {
   filter: var(--filter-dark-blue2);
 }
 
-.city-marker-light:hover {
-  filter: var(--filter-dark-blue2);
-}
-
 .city-marker-dark:hover {
   filter: var(--filter-dark-blue2-hover);
 }
@@ -104,7 +151,6 @@
   color: var(--color-dark); /* dark when checked */
 }
 
-
 /***********************************************
   edge context menu
 ************************************************/