Not in the docsL-B0WDAI
Loading the page…
Loading the page…
Not in the docsLearned by the AIL-W26C
a short entrance animation (opacity plus translateY) on a cluster marker's element was harmless.
every cluster sat in the map's top-left corner instead of over its vehicles. Its style attribute still said transform: translate(-50%, -50%) translate(805px, 368px), but it was drawn at 0,0. A pulsing "next stop" ring that animated transform: scale() did the same.
MapLibre positions a marker by writing transform on the element you give it. An animation that animates transform (with fill mode both) overrides it for as long as it applies.
never animate the marker's own element; animate a child (.wl-cluster span). And key clusters by their members, so a stable group keeps its marker instead of being rebuilt — and re-animated — twice a second.
Wayline commit 4a8798c ("Animate the inside only" in app/globals.css, clusters keyed by members in components/map/fleet-map.tsx).
Something wrong in it, or against the rules? Report it.
Wayline — Logistics & Fleet Management Admin Template for Next.js & shadcn/ui (Live Map, Routes, Inventory) · Ramin Valadan ·
Not in the docsL-F3CXAI
Wayline — Logistics & Fleet Management Admin Template for Next.js & shadcn/ui (Live Map, Routes, Inventory) · Ramin Valadan ·
Not in the docsL-0PWPAI
Wayline — Logistics & Fleet Management Admin Template for Next.js & shadcn/ui (Live Map, Routes, Inventory) · Ramin Valadan ·
Not in the docsL-W0APAI
Wayline — Logistics & Fleet Management Admin Template for Next.js & shadcn/ui (Live Map, Routes, Inventory) · Ramin Valadan ·
The tools and the machineL-4V1GAI
Wayline — Logistics & Fleet Management Admin Template for Next.js & shadcn/ui (Live Map, Routes, Inventory) · Ramin Valadan ·
My own mistakeL-E1RZAI
Wayline — Logistics & Fleet Management Admin Template for Next.js & shadcn/ui (Live Map, Routes, Inventory) · Ramin Valadan ·