diff --git a/docs/api-reference/maplibre/geolocate-control.md b/docs/api-reference/maplibre/geolocate-control.md index d09c84789..834a4a8e6 100644 --- a/docs/api-reference/maplibre/geolocate-control.md +++ b/docs/api-reference/maplibre/geolocate-control.md @@ -84,7 +84,7 @@ You may use it to call any imperative methods: import * as React from 'react'; import {useRef, useEffect} from 'react'; import {Map, GeolocateControl} from 'react-map-gl/maplibre'; -import type maplibregl from 'maplibre-gl'; +import type * as maplibregl from 'maplibre-gl'; function App() { const geoControlRef = useRef(); diff --git a/docs/api-reference/maplibre/map.md b/docs/api-reference/maplibre/map.md index 0169a90e7..6af3d63ef 100644 --- a/docs/api-reference/maplibre/map.md +++ b/docs/api-reference/maplibre/map.md @@ -444,7 +444,7 @@ By module import (and embedding in the final bundle): ```tsx import * as React from 'react'; import {Map} from 'react-map-gl/maplibre'; -import maplibregl from 'maplibre-gl'; +import * as maplibregl from 'maplibre-gl'; function App() { return ; @@ -508,8 +508,7 @@ The number of web workers instantiated on a page with maplibre-gl maps. #### `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. ## Methods diff --git a/docs/api-reference/maplibre/marker.md b/docs/api-reference/maplibre/marker.md index 375be884a..57862c47c 100644 --- a/docs/api-reference/maplibre/marker.md +++ b/docs/api-reference/maplibre/marker.md @@ -122,7 +122,7 @@ You may use it to call any imperative methods: import * as React from 'react'; import {useRef, useMemo, useCallback} from 'react'; import {Map, Marker} from 'react-map-gl/maplibre'; -import maplibregl from 'maplibre-gl'; +import * as maplibregl from 'maplibre-gl'; function App() { const markerRef = useRef(); diff --git a/docs/api-reference/maplibre/popup.md b/docs/api-reference/maplibre/popup.md index d051ea768..f9bc94c1f 100644 --- a/docs/api-reference/maplibre/popup.md +++ b/docs/api-reference/maplibre/popup.md @@ -99,7 +99,7 @@ You may use it to call any imperative methods: import * as React from 'react'; import {useRef, useEffect} from 'react'; import {Map, Popup} from 'react-map-gl/maplibre'; -import maplibregl from 'maplibre-gl'; +import * as maplibregl from 'maplibre-gl'; function App() { const popupRef = useRef(); diff --git a/docs/get-started/get-started.md b/docs/get-started/get-started.md index a7505a636..3faec76db 100644 --- a/docs/get-started/get-started.md +++ b/docs/get-started/get-started.md @@ -23,6 +23,21 @@ npm install react-map-gl mapbox-gl @types/mapbox-gl npm install react-map-gl maplibre-gl ``` +MapLibre GL JS imports depend on the version: + +```tsx +// MapLibre v4/v5 +import maplibregl from 'maplibre-gl'; + +// MapLibre v6 +import * as maplibregl from 'maplibre-gl'; +// or use named imports +``` + +MapLibre v6 applications that use a bundler must also configure the worker before rendering a map. + +Follow MapLibre's [installation instructions](https://maplibre.org/maplibre-gl-js/docs/#installation) for your bundler. The MapLibre get-started example uses Vite's recommended `?worker&url` import. + diff --git a/docs/whats-new.md b/docs/whats-new.md index 3d2c2a405..db60e1f47 100644 --- a/docs/whats-new.md +++ b/docs/whats-new.md @@ -6,7 +6,9 @@ Release date: Oct 2025 The core logic in the Mapbox GL JS wrapper has been rewritten to use [Proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) to intercept camera updates. We expect the new approach to improve camera synchronization between the native controller and React props when terrain and/or non-mercator projections are used. See more backgrounds in [#2514](https://github.com/visgl/react-map-gl/pull/2514). -The Maplibre wrapper is unaffected by this change. +The MapLibre wrapper is unaffected by this change. + +The v8.1 release line supports MapLibre GL JS v4, v5 and v6. MapLibre v6 applications must use named or namespace imports and configure the worker when using a bundler. See the [Get Started guide](./get-started/get-started.md) for setup instructions and MapLibre's [v5 to v6 migration guide](https://maplibre.org/maplibre-gl-js/docs/guides/v5-to-v6-migration-guide/) for other changes in MapLibre v6. ## react-map-gl v8.0 diff --git a/examples/get-started/maplibre/app.jsx b/examples/get-started/maplibre/app.jsx index 79381f5fb..a48916531 100644 --- a/examples/get-started/maplibre/app.jsx +++ b/examples/get-started/maplibre/app.jsx @@ -1,10 +1,15 @@ /* global document */ import * as React from 'react'; import {createRoot} from 'react-dom/client'; +// eslint-disable-next-line import/namespace +import {setWorkerUrl} from 'maplibre-gl'; +import workerUrl from 'maplibre-gl/dist/maplibre-gl-worker.mjs?worker&url'; import Map, {Marker} from 'react-map-gl/maplibre'; import 'maplibre-gl/dist/maplibre-gl.css'; +setWorkerUrl(workerUrl); + function Root() { return ( react-maplibre Example -