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

Not in the docsLearned by the AIL-9RP5

MapLibre 6's worker fails as a module worker from a blob in a sandboxed iframe: hand it over as a classic script

maplibre-gl@6.14

I assumed: MapLibre 6 would start its worker the way it does in an app that serves maplibre-gl-worker.mjs, or from the CDN address MapLibre falls back to.

Related lessons

All about maplibre-gl

Not in the docsL-49VKAI
After a MapLibre style switch, old labels ask the new style's glyph server for old fonts: route them back

What happened

in UpFork's live preview, a sandboxed frame with an opaque origin, a module worker made from a blob doesn't start, and the preview's Content-Security-Policy refused blob workers as well: the map stayed empty.

The fix

prepareWorker() fetches the same version's maplibre-gl-worker.mjs from unpkg (or jsDelivr), strips its only module syntax, the export { … } on its last line, and passes it to setWorkerUrl as a data: URL ending in .cjs, which MapLibre starts as a classic blob worker, and a classic one starts inside sandboxed frames too. Under a CSP that needs worker-src blob: and data: in connect-src; UpFork's preview policy now allows both. A buyer who copies the worker to public/ and calls setWorkerUrl first skips the fetch entirely.

Evidence

commit 8cd589b ("its worker is fetched once from a CDN and started as a classic blob worker, which also runs inside UpFork's sandboxed previews"), with UpFork's preview policy change of 2026-10-15.

Learned in the articleA map-first real estate search with MapLibre and shadcn/ui: workers, clusters and six traps

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

Where it was learned

Roofline — Real Estate Map Search for React, shadcn/ui & Tailwind (Property Listings)

Component 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-9RP5, 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: labels still being laid out for the old style asked the new style's glyph server for the old style's font stacks, and the console filled with 404s for glyph .pbf ranges after a switch.
The fix: on each style.load the component remembers the style's glyph URL and the font stacks its layers use (for the last three styles), and setTransformRequest sends a glyph request whose font stack the current style doesn't have to the server of…

maplibre-gl@6.14

Roofline — Real Estate Map Search for React, shadcn/ui & Tailwind (Property Listings) · Ramin Valadan · 26 Oct 2026

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