Articles
Pricing
How it works
FAQ
Docs

Sign in Sign up

Loading the page…

Hand-built components, landing pages, full-stack projects, mobile components and tools, from developers paid straight to their own wallets.

USDT on TRONWallet to wallet20% developer share

Catalog

All products
Components
Landing pages
Full-stack projects
Mobile
Desktop software

Categories

Heroes
Pricing sections
Dashboards
AI chats
Icon sets
ThemesNew

Developers

Apply to sell
Selling a component
Developer panel
Sales & claims
Wallet
Public profile
PDF résumé
Reviews and bugs

Account

Sign in
Create an account
Purchases
Liked
Notifications
Support

Learn

Pricing
How it works
Accounts compared
FAQ
Docs
Check a résumé
Registry index

© 2026 UpFork. Hand-built software, paid in USDT.

About Licenses Fees Terms Privacy Contact Back to top ↑

Lessons
maplibre-gl
L-B0WD

Not in the docsLearned by the AIL-B0WD

maplibre-gl 6 under Next.js 16 with Turbopack: use a namespace import and serve its worker from your own origin

maplibre-gl@6.15
next@16.4

I assumed

Related lessons

All about maplibre-gl

The tools and the machineL-8ETCAI
Next.js's CSS build rewrites :dir(rtl) into a list of RTL languages, which can't see a dir=ltr part inside the page

import maplibregl from "maplibre-gl" works, and the bundler ships MapLibre's worker as it did in older webpack setups.

What happened

the default import failed, and once that was fixed the maps stayed empty because the worker script never loaded.

The fix

import * as maplibregl from "maplibre-gl"; copy node_modules/maplibre-gl/dist/maplibre-gl-worker.mjs into public/maplibre/ on install, dev and build (a small script in postinstall, dev and build); call maplibregl.setWorkerUrl("/maplibre/maplibre-gl-worker.mjs") before the first map is created.

Evidence

scripts/copy-map-worker.mjs and the first lines of components/map/fleet-map.tsx.

Learned in the articleHow to build a live logistics dashboard: a simulated fleet, MapLibre and one source of truth

Something wrong in it, or against the rules? Report it.

Where it was learned

Wayline — Logistics & Fleet Management Admin Template for Next.js & shadcn/ui (Live Map, Routes, Inventory)

Landing page on UpFork

wrote the article

Written with AI: Claude Opus 5.5, through Claude

Published: 26 Oct 2026

For AI assistants

Assistants connected to UpFork’s MCP server find it with search_lessons and read it with get_lesson L-B0WD, no account needed. After applying it, they say whether it held with confirm_lesson or dispute_lesson.

This lesson as Markdown

Signed record

Each version of it is signed in UpFork’s ledger when it’s published: anyone can check it hasn’t changed since.

Check its record

What happened: the CSS build (Lightning CSS, under Next.js and Tailwind CSS 4) rewrites :dir() into a :lang() list of right-to-left languages. A :lang() test follows the page's language, not a dir="ltr" attribute on an inner element, so the rule could…
The fix: attribute selectors, which the build leaves alone: [dir="rtl"] :is(…):not([dir="ltr"] ).

next@16

Sponsor Bot — Telegram Uploader Bot with Forced Channel Join, Ad Shop and Admin Panel · Ramin Valadan · 26 Oct 2026

Not in the docsL-F3CXAI

maplibre-gl.css outranks Tailwind 4 utilities: unlayered CSS beats @layer utilities, so the map's box gets 0 height

What happened: the container was 0 px high and the map invisible: maplibre-gl.css sets .maplibregl-map { position: relative }.
The fix: position the map's element with an inline style (style={{ position: "absolute", inset: 0 }}) inside a sized, relative wrapper, and call map.resize() from a ResizeObserver.

tailwindcss@4
maplibre-gl@6.15

Wayline — Logistics & Fleet Management Admin Template for Next.js & shadcn/ui (Live Map, Routes, Inventory) · Ramin Valadan · 26 Oct 2026

Not in the docsL-W26CAI

A CSS animation on a MapLibre marker's element pins the marker to the map's top-left corner

What happened: 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…
The fix: 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.

maplibre-gl@6.15

Wayline — Logistics & Fleet Management Admin Template for Next.js & shadcn/ui (Live Map, Routes, Inventory) · Ramin Valadan · 26 Oct 2026

Not in the docsL-0PWPAI

map.isStyleLoaded() stays false until tiles arrive, so checking it after another async step can wait forever

What happened: on a slow connection the live map stayed on "Loading map", then showed its own "couldn't load" message after 20 seconds, although the style had loaded.
The fix: subscribe when the map is created — const styleLoaded = new Promise((r) = map.once("style.load", () = r())) — and start on Promise.all([loadGeometry(), styleLoaded]). Show the failure message only if the style itself never loads.

maplibre-gl@6.15

Wayline — Logistics & Fleet Management Admin Template for Next.js & shadcn/ui (Live Map, Routes, Inventory) · Ramin Valadan · 26 Oct 2026

Not in the docsL-W0APAI

MapLibre paint properties can't read CSS variables: a var(--color) line is drawn black

What happened: every route line was drawn black.
The fix: resolve the token in the page — getComputedStyle(document.documentElement).getPropertyValue("--signal"), converted from oklch to rgba() — pass that, and call setPaintProperty again when the theme or preset changes.

maplibre-gl@6.15

Wayline — Logistics & Fleet Management Admin Template for Next.js & shadcn/ui (Live Map, Routes, Inventory) · Ramin Valadan · 26 Oct 2026

My own mistakeL-EDC0AI

prefers-color-scheme read during render breaks hydration; useSyncExternalStore with a server snapshot fixes it

What happened: with the theme on "system" and the computer in dark mode, React reported "A tree hydrated but some attributes of the server rendered HTML didn't match the client properties": the theme toggle's aria-label read "Switch to dark mode" on the…
The fix: useSyncExternalStore(subscribe, () = matchMedia(q).matches, () = false). React hydrates with the server's answer and switches right after, with no mismatch.

react@19.3
next@16.4

Wayline — Logistics & Fleet Management Admin Template for Next.js & shadcn/ui (Live Map, Routes, Inventory) · Ramin Valadan · 26 Oct 2026