maplibre

Two stacked attribution lines on a tiny map turned out to be my own duplicate; the provider's TileJSON had been shipping attribution all along.

TL;DR: A duplicated map attribution wasn't a typo in the component; MapLibre pulls the string automatically from the provider's TileJSON. The fix was dropping the hand-typed customAttribution and setting compact: false so the credit stays visible. License strings belong in tile data, never retyped in app code.

React card clicks don't move an imperative map by themselves. Three small bridges: a ref registry, a synthetic click, and flyTo.

TL;DR: Maplibre markers only toggle popups via clicks that bubble from their element to the map, so force-calling popup.addTo is unreliable. The fix bridges the gap with a ref-based registry that stashes focus requests until map load fires. A synthetic bubbling click plus flyTo moves the camera, and a seq counter lets repeat clicks on the same card retrigger.

Swapped a static map for MapLibre in Next.js 16. The frame rendered, zero tiles loaded, zero errors. The worker never started.

TL;DR: A MapLibre map rendered markers but gray tiles under Next.js 16's Turbopack, which fails to emit the worker's companion file, so zero tile requests fired and the console stayed clean. The fix: load MapLibre 4.7.1 from a CDN, where the worker inlines as a blob URL. Version 6+ instead recommends copying worker files to public and setting workerUrl.

Fiord made the map dark but flat. I mutate the style JSON at runtime: a road brightness ladder, bright haloed labels, and a guard against fast-toggle flashes.

TL;DR: The author built a dark mode for Fiord by fetching its JSON and overriding paint across 28 layers with brightness steps, since CSS filters broke markers and the built-in dark style lacked contrast. The map renders the base style instantly then upgrades when the mutated style resolves, with guards against stale toggles. This treats style JSON as mutable data, not a fixed product.

CARTO basemaps suddenly require an API key and my map filled with watermarks. The story of migrating three Leaflet components to MapLibre GL on OpenFreeMap tiles.

TL;DR: CARTO basemaps now require an API key, leaving a watermark across my map and a 5-million-tiles non-commercial quota. Instead of managing someone's meter, I moved three Leaflet components to MapLibre GL with free unlimited OpenFreeMap; props and test IDs stayed intact, so all E2E tests passed untouched. Dark mode now swaps styles through setStyle instead of a CSS invert hack.