Skip to content

chore: upgrade website and examples to MapLibre v6 - #2602

Merged
chrisgervang merged 6 commits into
masterfrom
chr/website-maplibre-v6
Jul 29, 2026
Merged

chore: upgrade website and examples to MapLibre v6#2602
chrisgervang merged 6 commits into
masterfrom
chr/website-maplibre-v6

Conversation

@chrisgervang

@chrisgervang chrisgervang commented Jul 29, 2026

Copy link
Copy Markdown
Contributor

Follow-up to #2598.

Summary

  • upgrade the website and all MapLibre examples to maplibre-gl@^6.0.0
  • preserve historical v4/v5 default-import examples while updating current guidance for v6 named and namespace imports
  • configure MapLibre v6 workers using MapLibre's documented bundler patterns:
    • Vite examples import maplibre-gl-worker.mjs?worker&url and call setWorkerUrl before rendering
    • Docusaurus copies both the worker and shared modules, then initializes the worker URL under the site's base path
  • resolve MapLibre v6's ESM-only entry explicitly in the Docusaurus server and client builds
  • refresh the website's vendored MapLibre stylesheet and lockfile from v6
  • document the v6 worker setup requirement and link to MapLibre's per-bundler guidance

This changes website and example setup only. It does not change react-map-gl's public API or core runtime behavior.

Testing

  • yarn lint
  • yarn test
  • production Vite builds for all 20 MapLibre examples
  • verified every Vite build emits a self-contained worker with no unresolved maplibre-gl-shared.mjs import
  • yarn --cwd website build
  • production browser smoke tests for get-started, terrain, globe, deck.gl interleaving, and the Docusaurus terrain page
  • verified the Docusaurus worker and shared modules load successfully under /react-map-gl/
  • reproduced the missing-worker failure modes: Vite dev returns an unoptimized worker, Vite production omits the worker asset, and Docusaurus selects the page URL as the worker

Note

Low Risk
Documentation, example, and website dependency upgrades only; react-map-gl library code is untouched.

Overview
Upgrades the docs site and all MapLibre examples from maplibre-gl v5 to ^6.0.0, with setup changes required by MapLibre v6 (ESM-only package and mandatory worker configuration for bundler apps).

Documentation now distinguishes v4/v5 default imports from v6 namespace/named imports (import * as maplibregl), documents that v6 apps must configure the worker before rendering, and notes v8.1 supports MapLibre v4–v6. API reference snippets for mapLib, refs, and imperative examples use import * as maplibregl.

Vite MapLibre examples call setWorkerUrl with maplibre-gl-worker.mjs?worker&url, load CSS via module import instead of unpkg links, and bump dependencies to ^6.0.0.

Docusaurus website copies worker and shared .mjs assets, registers a client module that sets the worker URL under the site base path, aliases maplibre-gl to the ESM entry for SSR, and refreshes vendored MapLibre CSS and lockfile.

No changes to react-map-gl’s public API or core map wrapper runtime.

Reviewed by Cursor Bugbot for commit bdef0d5. Bugbot is set up for automated code reviews on this repo. Configure here.

@cursor cursor Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Fix All in Cursor

❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, have a team admin enable autofix in the Cursor dashboard.

Reviewed by Cursor Bugbot for commit 30088af. Configure here.

Comment thread examples/get-started/maplibre/package.json
@chrisgervang

Copy link
Copy Markdown
Contributor Author

Added setWorkerUrl calls and documented v6 support

Comment on lines 509 to +511
#### `workerUrl`: string {#workerurl}

Provides an interface for loading maplibre-gl's WebWorker bundle from a self-hosted URL. This is useful if your site needs to operate in a strict CSP (Content Security Policy) environment wherein you are not allowed to load JavaScript code from a Blob URL, which is default behavior.

Provides an interface for loading maplibre-gl's WebWorker bundle from a self-hosted URL. MapLibre GL JS v6 applications that use a bundler must configure the worker before rendering a map. Follow MapLibre's [installation instructions](https://maplibre.org/maplibre-gl-js/docs/#installation) to generate the appropriate worker URL for your bundler.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wonder if examples can use this instead of setWorkerUrl

import {useRef, useEffect} from 'react';
import {Map, Popup} from 'react-map-gl/maplibre';
import maplibregl from 'maplibre-gl';
import * as maplibregl from 'maplibre-gl';

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Type only import?

@chrisgervang
chrisgervang merged commit 7986834 into master Jul 29, 2026
6 checks passed
@chrisgervang
chrisgervang deleted the chr/website-maplibre-v6 branch July 29, 2026 16:03
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants