fix: prevent app wide crash when terrain properties are undefined

.github/workflows/test.yml

@@ -4,15 +4,19 @@ name: test
 on:
   push:
     branches:
-    - master
+      - master
   pull_request:
 
 permissions:
   contents: read
 
 jobs:
-  test-node:
+  test-node-matrix:
     runs-on: ubuntu-22.04
+    strategy:
+      fail-fast: false
+      matrix:
+        maplibre: ['^4.0.0', '^5.0.0', '^6.0.0']
     permissions:
       checks: write
       contents: read
@@ -29,6 +33,9 @@ jobs:
       - name: Enable Corepack
         run: corepack enable yarn
 
+      - name: Install MapLibre GL JS ${{ matrix.maplibre }}
+        run: yarn workspace @vis.gl/react-maplibre add --dev "maplibre-gl@${{ matrix.maplibre }}"
+
       - name: Install dependencies
         run: yarn bootstrap
 
@@ -40,6 +47,16 @@ jobs:
           yarn test ci
 
       - name: Coveralls
+        if: matrix.maplibre == '^5.0.0'
         uses: coverallsapp/github-action@648a8eb78e6d50909eff900e4ec85cab4524a45b # v2.3.6
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
+
+  test-node:
+    runs-on: ubuntu-22.04
+    needs: test-node-matrix
+    if: ${{ always() }}
+
+    steps:
+      - name: Check test matrix
+        run: test "${{ needs.test-node-matrix.result }}" = "success"

.nvmrc

@@ -1 +1 @@
-18.19.0
+24.18.0

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<maplibregl.GeolocateControl>();

docs/api-reference/maplibre/globe-control.md

@@ -2,6 +2,8 @@
 
 React component that wraps maplibre-gl's [GlobeControl](https://maplibre.org/maplibre-gl-js/docs/API/classes/GlobeControl/) class.
 
+Requires `maplibre-gl` v5 or later.
+
 ```tsx
 import * as React from 'react';
 import {Map, GlobeControl} from 'react-map-gl/maplibre';

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 <Map mapLib={maplibregl} />;
@@ -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

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<maplibregl.Marker>();

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<maplibregl.Popup>();

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.
+
   </TabItem>
 </Tabs>
 

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
 

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

examples/get-started/maplibre/package.json

@@ -4,7 +4,7 @@
     "build": "vite build"
   },
   "dependencies": {
-    "maplibre-gl": "^5.0.0",
+    "maplibre-gl": "^6.0.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-map-gl": "^8.0.0"

examples/maplibre/clusters/index.html

@@ -3,7 +3,6 @@
   <head>
     <meta charset='UTF-8' />
     <title>react-maplibre Example</title>
-    <link href="https://unpkg.com/maplibre-gl@4.7.0/dist/maplibre-gl.css" rel="stylesheet">
     <style>
       body {
         margin: 0;
@@ -34,7 +33,11 @@
     <div id="map"></div>
   </body>
   <script type="module" type="text/javascript">
+    import {setWorkerUrl} from 'maplibre-gl';
+    import 'maplibre-gl/dist/maplibre-gl.css';
+    import workerUrl from 'maplibre-gl/dist/maplibre-gl-worker.mjs?worker&url';
     import {renderToDom} from './src/app.tsx';
+    setWorkerUrl(workerUrl);
     renderToDom(document.getElementById('map'));
   </script>
 </html>

examples/maplibre/clusters/package.json

@@ -8,7 +8,7 @@
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-map-gl": "^8.0.0",
-    "maplibre-gl": "^5.0.0"
+    "maplibre-gl": "^6.0.0"
   },
   "devDependencies": {
     "typescript": "^5.0.0",

examples/maplibre/controls/index.html

@@ -3,7 +3,6 @@
   <head>
     <meta charset='UTF-8' />
     <title>react-maplibre Example</title>
-    <link href="https://unpkg.com/maplibre-gl@4.7.0/dist/maplibre-gl.css" rel="stylesheet">
     <style>
       body {
         margin: 0;
@@ -34,7 +33,11 @@
     <div id="map"></div>
   </body>
   <script type="module" type="text/javascript">
+    import {setWorkerUrl} from 'maplibre-gl';
+    import 'maplibre-gl/dist/maplibre-gl.css';
+    import workerUrl from 'maplibre-gl/dist/maplibre-gl-worker.mjs?worker&url';
     import {renderToDom} from './src/app.tsx';
+    setWorkerUrl(workerUrl);
     renderToDom(document.getElementById('map'));
   </script>
 </html>

examples/maplibre/controls/package.json

@@ -8,7 +8,7 @@
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-map-gl": "^8.0.0",
-    "maplibre-gl": "^5.0.0"
+    "maplibre-gl": "^6.0.0"
   },
   "devDependencies": {
     "typescript": "^5.0.0",

examples/maplibre/custom-cursor/index.html

@@ -3,7 +3,6 @@
   <head>
     <meta charset='UTF-8' />
     <title>react-maplibre Example</title>
-    <link href="https://unpkg.com/maplibre-gl@4.7.0/dist/maplibre-gl.css" rel="stylesheet">
     <style>
       body {
         margin: 0;
@@ -45,7 +44,11 @@
     <div id="map"></div>
   </body>
   <script type="module" type="text/javascript">
+    import {setWorkerUrl} from 'maplibre-gl';
+    import 'maplibre-gl/dist/maplibre-gl.css';
+    import workerUrl from 'maplibre-gl/dist/maplibre-gl-worker.mjs?worker&url';
     import {renderToDom} from './src/app.tsx';
+    setWorkerUrl(workerUrl);
     renderToDom(document.getElementById('map'));
   </script>
 </html>

examples/maplibre/custom-cursor/package.json

@@ -8,7 +8,7 @@
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-map-gl": "^8.0.0",
-    "maplibre-gl": "^5.0.0"
+    "maplibre-gl": "^6.0.0"
   },
   "devDependencies": {
     "typescript": "^5.0.0",

examples/maplibre/custom-overlay/index.html

@@ -3,7 +3,6 @@
   <head>
     <meta charset='UTF-8' />
     <title>react-maplibre Example</title>
-    <link href="https://unpkg.com/maplibre-gl@4.7.0/dist/maplibre-gl.css" rel="stylesheet">
     <style>
       body {
         margin: 0;
@@ -48,7 +47,11 @@
     <div id="map"></div>
   </body>
   <script type="module" type="text/javascript">
+    import {setWorkerUrl} from 'maplibre-gl';
+    import 'maplibre-gl/dist/maplibre-gl.css';
+    import workerUrl from 'maplibre-gl/dist/maplibre-gl-worker.mjs?worker&url';
     import {renderToDom} from './src/app.tsx';
+    setWorkerUrl(workerUrl);
     renderToDom(document.getElementById('map'));
   </script>
 </html>

examples/maplibre/custom-overlay/package.json

@@ -9,7 +9,7 @@
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-map-gl": "^8.0.0",
-    "maplibre-gl": "^5.0.0"
+    "maplibre-gl": "^6.0.0"
   },
   "devDependencies": {
     "typescript": "^5.0.0",

examples/maplibre/deckgl-overlay/index.html

@@ -3,7 +3,6 @@
   <head>
     <meta charset='UTF-8' />
     <title>react-maplibre Example</title>
-    <link href="https://unpkg.com/maplibre-gl@4.7.0/dist/maplibre-gl.css" rel="stylesheet">
     <style>
       body {
         margin: 0;
@@ -20,7 +19,11 @@
     <div id="map"></div>
   </body>
   <script type="module" type="text/javascript">
+    import {setWorkerUrl} from 'maplibre-gl';
+    import 'maplibre-gl/dist/maplibre-gl.css';
+    import workerUrl from 'maplibre-gl/dist/maplibre-gl-worker.mjs?worker&url';
     import {renderToDom} from './src/app.tsx';
+    setWorkerUrl(workerUrl);
     renderToDom(document.getElementById('map'));
   </script>
 </html>

examples/maplibre/deckgl-overlay/package.json

@@ -9,7 +9,7 @@
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-map-gl": "^8.0.0",
-    "maplibre-gl": "^5.0.0"
+    "maplibre-gl": "^6.0.0"
   },
   "devDependencies": {
     "typescript": "^5.0.0",

examples/maplibre/draggable-markers/index.html

@@ -3,7 +3,6 @@
   <head>
     <meta charset='UTF-8' />
     <title>react-maplibre Example</title>
-    <link href="https://unpkg.com/maplibre-gl@4.7.0/dist/maplibre-gl.css" rel="stylesheet">
     <style>
       body {
         margin: 0;
@@ -35,7 +34,11 @@
     <div id="map"></div>
   </body>
   <script type="module" type="text/javascript">
+    import {setWorkerUrl} from 'maplibre-gl';
+    import 'maplibre-gl/dist/maplibre-gl.css';
+    import workerUrl from 'maplibre-gl/dist/maplibre-gl-worker.mjs?worker&url';
     import {renderToDom} from './src/app.tsx';
+    setWorkerUrl(workerUrl);
     renderToDom(document.getElementById('map'));
   </script>
 </html>

examples/maplibre/draggable-markers/package.json

@@ -5,7 +5,7 @@
     "build": "vite build"
   },
   "dependencies": {
-    "maplibre-gl": "^5.0.0",
+    "maplibre-gl": "^6.0.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-map-gl": "^8.0.0"

examples/maplibre/draw-polygon/index.html

@@ -3,7 +3,6 @@
   <head>
     <meta charset='UTF-8' />
     <title>react-maplibre Example</title>
-    <link href="https://unpkg.com/maplibre-gl@4.7.0/dist/maplibre-gl.css" rel="stylesheet">
     <style>
       body {
         margin: 0;
@@ -34,7 +33,11 @@
     <div id="map"></div>
   </body>
   <script type="module" type="text/javascript">
+    import {setWorkerUrl} from 'maplibre-gl';
+    import 'maplibre-gl/dist/maplibre-gl.css';
+    import workerUrl from 'maplibre-gl/dist/maplibre-gl-worker.mjs?worker&url';
     import {renderToDom} from './src/app.tsx';
+    setWorkerUrl(workerUrl);
     renderToDom(document.getElementById('map'));
   </script>
 </html>

examples/maplibre/draw-polygon/package.json

@@ -11,7 +11,7 @@
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-map-gl": "^8.0.0",
-    "maplibre-gl": "^5.0.0"
+    "maplibre-gl": "^6.0.0"
   },
   "devDependencies": {
     "typescript": "^5.0.0",

examples/maplibre/filter/index.html

@@ -3,7 +3,6 @@
   <head>
     <meta charset='UTF-8' />
     <title>react-maplibre Example</title>
-    <link href="https://unpkg.com/maplibre-gl@4.7.0/dist/maplibre-gl.css" rel="stylesheet">
     <style>
       body {
         margin: 0;
@@ -40,7 +39,11 @@
     <div id="map"></div>
   </body>
   <script type="module" type="text/javascript">
+    import {setWorkerUrl} from 'maplibre-gl';
+    import 'maplibre-gl/dist/maplibre-gl.css';
+    import workerUrl from 'maplibre-gl/dist/maplibre-gl-worker.mjs?worker&url';
     import {renderToDom} from './src/app.tsx';
+    setWorkerUrl(workerUrl);
     renderToDom(document.getElementById('map'));
   </script>
 </html>

examples/maplibre/filter/package.json

@@ -5,7 +5,7 @@
     "build": "vite build"
   },
   "dependencies": {
-    "maplibre-gl": "^5.0.0",
+    "maplibre-gl": "^6.0.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-map-gl": "^8.0.0"