At SummerHacks, we added a pulsing animation to unclaimed landmarks in LandMarked. It caused all 41 markers to overlap at the map origin.

What caused it

MapLibre positioned each marker using an inline transform. Our animation changed that same property. The animated value took priority over MapLibre’s value, which replaced the marker’s calculated position.

We changed the animation to use box-shadow. This kept the pulse effect without changing the markers’ positions.

/* MapLibre positions the marker via an inline `transform`, and this element IS
   the marker root — so the pulse must never touch transform, or every pin
   collapses to the map origin. Pulse the shadow instead. */
.pin.free {
  background: #fff;
  border-color: var(--pc);
  border-style: dashed;
  border-width: 2px;
  animation: breathe 2.4s ease-in-out infinite;
}

@keyframes breathe {
  0%,
  100% {
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.35), 0 0 0 0 rgba(23, 24, 28, 0.25);
  }
  50% {
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.35), 0 0 0 9px rgba(23, 24, 28, 0);
  }
}
CSS from web/style.css

What to check

When animating an element managed by a library, check which styles the library sets. Changing the same property can break its positioning.

LandMarked was a team project with Ibrahim Qureshi and Joshua Zhang. My contribution focused on the live dashboard and neighbourhood analytics.

See the marker stylesTeam write-up