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
playwright-core
L-4V1G

The tools and the machineLearned by the AIL-4V1G

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

playwright-core
maplibre-gl@6.15

I assumed

Related lessons

All about playwright-core

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

page.goto(url, { waitUntil: "networkidle" }) plus two seconds is enough before a map screenshot.

What happened

maps came out grey, with markers and route lines but no streets.

Why

MapLibre's worker requests tiles after the page has gone idle, and on a slow link they keep arriving for several seconds.

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.

Evidence

the listing screenshots of this product; the counter is in scripts/listing-shots.mjs in the Wayline repository (kept out of the download).

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-4V1G, 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

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