[v8] Separate examples for mapbox and maplibre

examples/get-started/basic/app.jsx

@@ -1,7 +1,7 @@
 /* global document */
 import * as React from 'react';
 import {createRoot} from 'react-dom/client';
-import Map, {Marker} from 'react-map-gl';
+import Map, {Marker} from 'react-map-gl/mapbox';
 
 import 'mapbox-gl/dist/mapbox-gl.css';
 

examples/get-started/basic/package.json

@@ -6,8 +6,8 @@
   "dependencies": {
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "react-map-gl": "^7.1.0",
-    "mapbox-gl": "^2.0.0"
+    "react-map-gl": "^8.0.0",
+    "mapbox-gl": "^3.5.0"
   },
   "devDependencies": {
     "typescript": "^4.0.0",

examples/get-started/controlled/README.md

@@ -6,7 +6,7 @@ This example shows a minimal app configuration to use react-map-gl's Map compone
 
 To run this example, you need a [Mapbox token](http://visgl.github.io/react-map-gl/docs/get-started/mapbox-tokens). You can either set it as `MAPBOX_TOKEN` in `app.js`, or set a `MapboxAccessToken` environment variable in the command line.
 
-Alternative to acquiring a Mapbox token, you can install `maplibre-gl` and change all `import from 'react-map-gl'` to `import from 'react-map-gl/maplibre'`. You also need to supply a third-party or self-hosted `mapStyle` URL.
+Alternative to acquiring a Mapbox token, you can install `maplibre-gl` and change all `import from 'react-map-gl/mapbox'` to `import from 'react-map-gl/maplibre'`. You also need to supply a third-party or self-hosted `mapStyle` URL.
 
 ```bash
 npm i

examples/get-started/controlled/app.jsx

@@ -1,7 +1,7 @@
 /* global document */
 import * as React from 'react';
 import {createRoot} from 'react-dom/client';
-import Map, {Marker} from 'react-map-gl';
+import Map, {Marker} from 'react-map-gl/mapbox';
 
 import 'mapbox-gl/dist/mapbox-gl.css';
 

examples/get-started/controlled/package.json

@@ -6,8 +6,8 @@
   "dependencies": {
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "react-map-gl": "^7.1.0",
-    "mapbox-gl": "^2.0.0"
+    "react-map-gl": "^8.0.0",
+    "mapbox-gl": "^3.5.0"
   },
   "devDependencies": {
     "typescript": "^4.0.0",

examples/get-started/hook/README.md

@@ -6,7 +6,7 @@ This example shows how to use react-map-gl's Map component with the `useMap` hoo
 
 To run this example, you need a [Mapbox token](http://visgl.github.io/react-map-gl/docs/get-started/mapbox-tokens). You can either set it as `MAPBOX_TOKEN` in `map.js`, or set a `MapboxAccessToken` environment variable in the command line.
 
-Alternative to acquiring a Mapbox token, you can install `maplibre-gl` and change all `import from 'react-map-gl'` to `import from 'react-map-gl/maplibre'`. You also need to supply a third-party or self-hosted `mapStyle` URL.
+Alternative to acquiring a Mapbox token, you can install `maplibre-gl` and change all `import from 'react-map-gl/mapbox'` to `import from 'react-map-gl/maplibre'`. You also need to supply a third-party or self-hosted `mapStyle` URL.
 
 ```bash
 npm i

examples/get-started/hook/app.jsx

@@ -1,7 +1,7 @@
 /* global document */
 import * as React from 'react';
 import {createRoot} from 'react-dom/client';
-import {MapProvider} from 'react-map-gl';
+import {MapProvider} from 'react-map-gl/mapbox';
 
 import Map from './map';
 import Controls from './controls';

examples/get-started/hook/controls.jsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import {useCallback, useState, useEffect} from 'react';
-import {useMap} from 'react-map-gl';
+import {useMap} from 'react-map-gl/mapbox';
 
 export default function Controls() {
   /**

examples/get-started/hook/controls2.jsx

@@ -1,4 +1,4 @@
-// import {useMap} from 'react-map-gl';
+// import {useMap} from 'react-map-gl/mapbox';
 
 export default function Controls2() {
   /**

examples/get-started/hook/map.jsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import Map from 'react-map-gl';
-// import {useMap} from 'react-map-gl';
+import Map from 'react-map-gl/mapbox';
+// import {useMap} from 'react-map-gl/mapbox';
 
 import 'mapbox-gl/dist/mapbox-gl.css';
 import Controls2 from './controls2';

examples/get-started/hook/package.json

@@ -6,8 +6,8 @@
   "dependencies": {
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "react-map-gl": "^7.1.0",
-    "mapbox-gl": "^2.0.0"
+    "react-map-gl": "^8.0.0",
+    "mapbox-gl": "^3.5.0"
   },
   "devDependencies": {
     "typescript": "^4.0.0",

examples/get-started/maplibre/package.json

@@ -4,10 +4,10 @@
     "build": "vite build"
   },
   "dependencies": {
-    "maplibre-gl": "^2.0.0",
+    "maplibre-gl": "^5.0.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "react-map-gl": "^7.1.0"
+    "react-map-gl": "^8.0.0"
   },
   "devDependencies": {
     "typescript": "^4.0.0",

examples/get-started/nextjs/README.md

@@ -4,7 +4,7 @@ This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next
 
 To run this example, you need a [Mapbox token](http://visgl.github.io/react-map-gl/docs/get-started/mapbox-tokens). You can either set it as `MAPBOX_TOKEN` in `pages/index.js`, or set a `MapboxAccessToken` environment variable in the command line.
 
-Alternative to acquiring a Mapbox token, you can install `maplibre-gl` and change all `import from 'react-map-gl'` to `import from 'react-map-gl/maplibre'`. You also need to supply a third-party or self-hosted `mapStyle` URL.
+Alternative to acquiring a Mapbox token, you can install `maplibre-gl` and change all `import from 'react-map-gl/mapbox'` to `import from 'react-map-gl/maplibre'`. You also need to supply a third-party or self-hosted `mapStyle` URL.
 
 ## Getting Started
 

examples/get-started/nextjs/package.json

@@ -9,8 +9,8 @@
     "next": "12.0.7",
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "react-map-gl": "^7.1.0",
-    "mapbox-gl": "^2.0.0"
+    "react-map-gl": "^8.0.0",
+    "mapbox-gl": "^3.5.0"
   },
   "devDependencies": {
     "eslint": "8.5.0",

examples/get-started/nextjs/pages/index.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Head from 'next/head';
-import Map, {Marker} from 'react-map-gl';
+import Map, {Marker} from 'react-map-gl/mapbox';
 
 import 'mapbox-gl/dist/mapbox-gl.css';
 

examples/get-started/redux/README.md

@@ -6,7 +6,7 @@ This example shows how to use react-map-gl's Map component with react-redux.
 
 To run this example, you need a [Mapbox token](http://visgl.github.io/react-map-gl/docs/get-started/mapbox-tokens). You can either set it as `MAPBOX_TOKEN` in `map.js`, or set a `MapboxAccessToken` environment variable in the command line.
 
-Alternative to acquiring a Mapbox token, you can install `maplibre-gl` and change all `import from 'react-map-gl'` to `import from 'react-map-gl/maplibre'`. You also need to supply a third-party or self-hosted `mapStyle` URL.
+Alternative to acquiring a Mapbox token, you can install `maplibre-gl` and change all `import from 'react-map-gl/mapbox'` to `import from 'react-map-gl/maplibre'`. You also need to supply a third-party or self-hosted `mapStyle` URL.
 
 ```bash
 npm i

examples/get-started/redux/map.jsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Map from 'react-map-gl';
+import Map from 'react-map-gl/mapbox';
 
 import {useCallback} from 'react';
 import {useSelector, useDispatch} from 'react-redux';

examples/get-started/redux/package.json

@@ -6,9 +6,9 @@
   "dependencies": {
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "react-map-gl": "^7.1.0",
+    "react-map-gl": "^8.0.0",
     "react-redux": "^7.0.0",
-    "mapbox-gl": "^2.0.0"
+    "mapbox-gl": "^3.5.0"
   },
   "devDependencies": {
     "typescript": "^4.0.0",

examples/clusters/README.md → examples/mapbox/clusters/README.md

@@ -15,5 +15,5 @@ npm run start
 
 Alternative to acquiring a Mapbox token, you can use `maplibre-gl` instead. Follow these steps:
 - Run `npm install maplibre-gl`
-- In the source, change all `import ... from 'react-map-gl'` to `import ... from 'react-map-gl/maplibre'`
+- In the source, change all `import ... from 'react-map-gl/mapbox'` to `import ... from 'react-map-gl/maplibre'`
 - Change the `mapStyle` prop of `<Map>` to `"https://demotiles.maplibre.org/style.json"` or a self-hosted URL

examples/controls/package.json → examples/mapbox/clusters/package.json

@@ -1,14 +1,14 @@
 {
   "scripts": {
     "start": "vite --open",
-    "start-local": "vite --config ../vite.config.local.js",
+    "start-local": "vite --config ../../vite.config.local.js",
     "build": "vite build"
   },
   "dependencies": {
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "react-map-gl": "^7.1.0",
-    "mapbox-gl": "^2.0.0"
+    "react-map-gl": "^8.0.0",
+    "mapbox-gl": "^3.5.0"
   },
   "devDependencies": {
     "typescript": "^4.0.0",

examples/clusters/src/app.tsx → examples/mapbox/clusters/src/app.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import {useRef} from 'react';
 import {createRoot} from 'react-dom/client';
-import {Map, Source, Layer} from 'react-map-gl';
+import {Map, Source, Layer} from 'react-map-gl/mapbox';
 
 import ControlPanel from './control-panel';
 import {clusterLayer, clusterCountLayer, unclusteredPointLayer} from './layers';
 
-import type {MapRef} from 'react-map-gl';
+import type {MapRef} from 'react-map-gl/mapbox';
 import type {GeoJSONSource} from 'mapbox-gl';
 
 const MAPBOX_TOKEN = ''; // Set your mapbox token here

examples/clusters/src/layers.ts → examples/mapbox/clusters/src/layers.ts

@@ -1,4 +1,4 @@
-import type {LayerProps} from 'react-map-gl';
+import type {LayerProps} from 'react-map-gl/mapbox';
 
 export const clusterLayer: LayerProps = {
   id: 'clusters',

examples/controls/README.md → examples/mapbox/controls/README.md

@@ -13,5 +13,5 @@ npm run start
 
 Alternative to acquiring a Mapbox token, you can use `maplibre-gl` instead. Follow these steps:
 - Run `npm install maplibre-gl`
-- In the source, change all `import ... from 'react-map-gl'` to `import ... from 'react-map-gl/maplibre'`
+- In the source, change all `import ... from 'react-map-gl/mapbox'` to `import ... from 'react-map-gl/maplibre'`
 - Change the `mapStyle` prop of `<Map>` to `"https://demotiles.maplibre.org/style.json"` or a self-hosted URL

examples/clusters/package.json → examples/mapbox/controls/package.json

@@ -1,14 +1,14 @@
 {
   "scripts": {
     "start": "vite --open",
-    "start-local": "vite --config ../vite.config.local.js",
+    "start-local": "vite --config ../../vite.config.local.js",
     "build": "vite build"
   },
   "dependencies": {
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "react-map-gl": "^7.1.0",
-    "mapbox-gl": "^2.0.0"
+    "react-map-gl": "^8.0.0",
+    "mapbox-gl": "^3.5.0"
   },
   "devDependencies": {
     "typescript": "^4.0.0",

examples/controls/src/app.tsx → examples/mapbox/controls/src/app.tsx

@@ -8,12 +8,12 @@ import Map, {
   FullscreenControl,
   ScaleControl,
   GeolocateControl
-} from 'react-map-gl';
+} from 'react-map-gl/mapbox';
 
 import ControlPanel from './control-panel';
 import Pin from './pin';
 
-import CITIES from '../../.data/cities.json';
+import CITIES from '../../../.data/cities.json';
 
 const TOKEN = ''; // Set your mapbox token here
 

examples/custom-cursor/README.md → examples/mapbox/custom-cursor/README.md

@@ -13,5 +13,5 @@ npm run start
 
 Alternative to acquiring a Mapbox token, you can use `maplibre-gl` instead. Follow these steps:
 - Run `npm install maplibre-gl`
-- In the source, change all `import ... from 'react-map-gl'` to `import ... from 'react-map-gl/maplibre'`
+- In the source, change all `import ... from 'react-map-gl/mapbox'` to `import ... from 'react-map-gl/maplibre'`
 - Change the `mapStyle` prop of `<Map>` to `"https://demotiles.maplibre.org/style.json"` or a self-hosted URL

examples/custom-cursor/package.json → examples/mapbox/custom-cursor/package.json

@@ -1,14 +1,14 @@
 {
   "scripts": {
     "start": "vite --open",
-    "start-local": "vite --config ../vite.config.local.js",
+    "start-local": "vite --config ../../vite.config.local.js",
     "build": "vite build"
   },
   "dependencies": {
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "react-map-gl": "^7.1.0",
-    "mapbox-gl": "^2.0.0"
+    "react-map-gl": "^8.0.0",
+    "mapbox-gl": "^3.5.0"
   },
   "devDependencies": {
     "typescript": "^4.0.0",

examples/custom-cursor/src/app.tsx → examples/mapbox/custom-cursor/src/app.tsx

@@ -2,9 +2,9 @@
 import * as React from 'react';
 import {useState, useCallback} from 'react';
 import {createRoot} from 'react-dom/client';
-import Map, {MapboxStyle} from 'react-map-gl';
+import Map, {MapStyle} from 'react-map-gl/mapbox';
 import ControlPanel from './control-panel';
-import MAP_STYLE from '../../map-style-basic-v8.json';
+import MAP_STYLE from '../../../map-style-basic-v8.json';
 
 const MAPBOX_TOKEN = ''; // Set your mapbox token here
 
@@ -39,7 +39,7 @@ export default function App() {
     <>
       <Map
         initialViewState={initialViewState}
-        mapStyle={MAP_STYLE as MapboxStyle}
+        mapStyle={MAP_STYLE as MapStyle}
         onClick={onClick}
         onMouseEnter={onMouseEnter}
         onMouseLeave={onMouseLeave}

examples/custom-overlay/README.md → examples/mapbox/custom-overlay/README.md

@@ -13,5 +13,5 @@ npm run start
 
 Alternative to acquiring a Mapbox token, you can use `maplibre-gl` instead. Follow these steps:
 - Run `npm install maplibre-gl`
-- In the source, change all `import ... from 'react-map-gl'` to `import ... from 'react-map-gl/maplibre'`
+- In the source, change all `import ... from 'react-map-gl/mapbox'` to `import ... from 'react-map-gl/maplibre'`
 - Change the `mapStyle` prop of `<Map>` to `"https://demotiles.maplibre.org/style.json"` or a self-hosted URL