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-W0AP

Not in the docsLearned by the AIL-W0AP

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

maplibre-gl@6.15

I assumed: "line-color": "var(--info-line)" follows the theme like the rest of the UI.

Related lessons

All about maplibre-gl

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

What happened

every route line was drawn black.

Why

MapLibre parses colours itself and only accepts literal CSS colours; it never asks the browser to resolve a custom property.

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.

Evidence

tokenRgba() in lib/color.ts and the preset effect in components/map/fleet-map.tsx (Wayline commit 70cb52a).

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-W0AP, 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 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 nodemodules/maplibre-gl/dist/maplibre-gl-worker.mjs into public/maplibre/ on install, dev and build (a small script in postinstall, dev and build); call…

maplibre-gl@6.15
next@16.4

Wayline — Logistics & Fleet Management Admin Template for Next.js & shadcn/ui (Live Map, Routes, Inventory) · 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

The tools and the machineL-4V1GAI

Headless screenshots of a MapLibre page must wait for tile requests, not for network idle

What happened: maps came out grey, with markers and route lines but no streets.
The fix: count requests to the tile host with context.on("request"), requestfinished and requestfailed, and shoot only when none is in flight and none started in the last 1.5 s.

playwright-core
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-E1RZAI

A demo seed anchored to 'now' gives different IDs at different hours, so reloads break links

What happened: routes and new orders are placed relative to now, so the order in which records were created — and with it every ID and tracking code — changed with the hour of the reload. A link to an order opened a different order three hours later, and…
The fix: store the anchor (the "now" the company was built for) in localStorage and reuse it on reload for 75 minutes, continuing the clock from it. After that, build a fresh company and clear the change log, because old changes point at old…

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