Update examples for v7.1 (#2192)

visgl · Jun 6, 2023 · 54cb0e5 · 54cb0e5
1 parent a23e826
commit 54cb0e5
Show file tree

Hide file tree

Showing 72 changed files with 72 additions and 75 deletions.
diff --git a/docs/get-started/mapbox-tokens.md b/docs/get-started/mapbox-tokens.md
@@ -21,7 +21,7 @@ We recommend using an environment variable to minimize leaking risks. See [secur
 It is possible to use the map component without the Mapbox service, if you use another tile source (for example, if you host your own map tiles). Note that this is no longer allowed using mapbox-gl v2.0 and above. The options are:
 
 - Stay on `mapbox-gl@1.x`. react-map-gl plans to continue supporting this release in the foreseeable future, however, this version will not include any of the latest features of the map renderer, nor get any future updates from Mapbox.
-- Use a community fork of mapbox-gl, for example [maplibre-gl](https://www.npmjs.com/package/maplibre-gl). See [using with a mapbox-gl fork](./get-started.md#using-with-a-mapbox-gl-fork) for how to configure your project.
+- Use a community fork of mapbox-gl, for example [maplibre-gl](https://www.npmjs.com/package/maplibre-gl). See [Get Started](./get-started.md) for how to configure your project.
 
 To use your own map service, you will need a custom Mapbox GL style that points to your own [vector tile source](https://www.mapbox.com/mapbox-gl-js/style-spec/), and pass it to `Map` using the `mapStyle` prop. This custom style must match the schema of your tile source.
 

diff --git a/examples/clusters/README.md b/examples/clusters/README.md
@@ -8,6 +8,8 @@ This example showcases how to visualize points as clusters.
 
 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 `src/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.
+
 ```bash
 npm i
 npm run start

diff --git a/examples/clusters/package.json b/examples/clusters/package.json
@@ -7,7 +7,7 @@
   "dependencies": {
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "react-map-gl": "^7.0.0",
+    "react-map-gl": "^7.1.0-beta",
     "mapbox-gl": "^2.0.0"
   },
   "devDependencies": {

diff --git a/examples/clusters/src/app.tsx b/examples/clusters/src/app.tsx
@@ -5,7 +5,6 @@ import {Map, Source, Layer} from 'react-map-gl';
 
 import ControlPanel from './control-panel';
 import {clusterLayer, clusterCountLayer, unclusteredPointLayer} from './layers';
-import mapboxgl from 'mapbox-gl';
 
 import type {MapRef} from 'react-map-gl';
 import type {GeoJSONSource} from 'react-map-gl';
@@ -42,7 +41,6 @@ export default function App() {
           longitude: -103.59,
           zoom: 3
         }}
-        mapLib={mapboxgl}
         mapStyle="mapbox://styles/mapbox/dark-v9"
         mapboxAccessToken={MAPBOX_TOKEN}
         interactiveLayerIds={[clusterLayer.id]}

diff --git a/examples/controls/README.md b/examples/controls/README.md
@@ -6,6 +6,8 @@ Demonstrates how various control components can be used with react-map-gl.
 
 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 `src/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.
+
 ```bash
 npm i
 npm run start

diff --git a/examples/controls/package.json b/examples/controls/package.json
@@ -7,7 +7,7 @@
   "dependencies": {
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "react-map-gl": "^7.0.0",
+    "react-map-gl": "^7.1.0-beta",
     "mapbox-gl": "^2.0.0"
   },
   "devDependencies": {

diff --git a/examples/controls/src/app.tsx b/examples/controls/src/app.tsx
@@ -9,7 +9,6 @@ import Map, {
   ScaleControl,
   GeolocateControl
 } from 'react-map-gl';
-import mapboxgl from 'mapbox-gl';
 
 import ControlPanel from './control-panel';
 import Pin from './pin';
@@ -52,7 +51,6 @@ export default function App() {
           bearing: 0,
           pitch: 0
         }}
-        mapLib={mapboxgl}
         mapStyle="mapbox://styles/mapbox/dark-v9"
         mapboxAccessToken={TOKEN}
       >

diff --git a/examples/custom-cursor/README.md b/examples/custom-cursor/README.md
@@ -6,6 +6,8 @@ This example showcases how to dynamically change the cursor over the map based o
 
 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 `src/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.
+
 ```bash
 npm i
 npm run start

diff --git a/examples/custom-cursor/package.json b/examples/custom-cursor/package.json
@@ -7,7 +7,7 @@
   "dependencies": {
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "react-map-gl": "^7.0.0",
+    "react-map-gl": "^7.1.0-beta",
     "mapbox-gl": "^2.0.0"
   },
   "devDependencies": {

diff --git a/examples/custom-cursor/src/app.tsx b/examples/custom-cursor/src/app.tsx
@@ -5,7 +5,6 @@ import {createRoot} from 'react-dom/client';
 import Map, {MapboxStyle} from 'react-map-gl';
 import ControlPanel from './control-panel';
 import MAP_STYLE from '../../map-style-basic-v8.json';
-import mapboxgl from 'mapbox-gl';
 
 const MAPBOX_TOKEN = ''; // Set your mapbox token here
 
@@ -39,7 +38,6 @@ export default function App() {
   return (
     <>
       <Map
-        mapLib={mapboxgl}
         initialViewState={initialViewState}
         mapStyle={MAP_STYLE as MapboxStyle}
         onClick={onClick}

diff --git a/examples/custom-overlay/README.md b/examples/custom-overlay/README.md
@@ -6,6 +6,8 @@ This app shows how to implement a custom control that draws arbitrary React cont
 
 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 `src/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.
+
 ```bash
 npm i
 npm run start

diff --git a/examples/custom-overlay/package.json b/examples/custom-overlay/package.json
@@ -8,7 +8,7 @@
     "d3-shape": "^3.1.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "react-map-gl": "^7.0.0",
+    "react-map-gl": "^7.1.0-beta",
     "mapbox-gl": "^2.0.0"
   },
   "devDependencies": {

diff --git a/examples/custom-overlay/src/app.tsx b/examples/custom-overlay/src/app.tsx
@@ -3,7 +3,6 @@ import {useMemo, useState} from 'react';
 import {createRoot} from 'react-dom/client';
 import Map from 'react-map-gl';
 import {arc, pie} from 'd3-shape';
-import mapboxgl from 'mapbox-gl';
 
 import CustomOverlay from './custom-overlay';
 import ControlPanel, {COLORS} from './control-panel';
@@ -27,7 +26,6 @@ export default function App() {
   return (
     <>
       <Map
-        mapLib={mapboxgl}
         initialViewState={{
           longitude: -100,
           latitude: 40,

diff --git a/examples/deckgl-overlay/README.md b/examples/deckgl-overlay/README.md
@@ -6,6 +6,8 @@ This example demonstrates using [deck.gl](https://deck.gl) to render a data over
 
 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 `src/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.
+
 ```bash
 npm i
 npm run start

diff --git a/examples/deckgl-overlay/package.json b/examples/deckgl-overlay/package.json
@@ -8,7 +8,7 @@
     "deck.gl": "^8.8.0-beta.2",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "react-map-gl": "^7.0.0",
+    "react-map-gl": "^7.1.0-beta",
     "mapbox-gl": "^2.0.0"
   },
   "devDependencies": {

diff --git a/examples/deckgl-overlay/src/app.tsx b/examples/deckgl-overlay/src/app.tsx
@@ -4,7 +4,6 @@ import {ArcLayer} from '@deck.gl/layers/typed';
 import {DeckProps, PickingInfo} from '@deck.gl/core/typed';
 import {MapboxOverlay} from '@deck.gl/mapbox/typed';
 import {useControl} from 'react-map-gl';
-import mapboxgl from 'mapbox-gl';
 
 import Map, {NavigationControl} from 'react-map-gl';
 
@@ -52,7 +51,6 @@ export default function App() {
 
   return (
     <Map
-      mapLib={mapboxgl}
       initialViewState={initialViewState}
       mapStyle="mapbox://styles/mapbox/light-v9"
       mapboxAccessToken={TOKEN}

diff --git a/examples/draggable-markers/README.md b/examples/draggable-markers/README.md
@@ -6,6 +6,8 @@ Demonstrates how Marker component can be dragged with react-map-gl.
 
 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 `src/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.
+
 ```bash
 npm i
 npm run start

diff --git a/examples/draggable-markers/package.json b/examples/draggable-markers/package.json
@@ -8,7 +8,7 @@
     "mapbox-gl": "^2.0.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "react-map-gl": "^7.0.0"
+    "react-map-gl": "^7.1.0-beta"
   },
   "devDependencies": {
     "typescript": "^4.0.0",

diff --git a/examples/draggable-markers/src/app.tsx b/examples/draggable-markers/src/app.tsx
@@ -2,7 +2,6 @@ import * as React from 'react';
 import {useState, useCallback} from 'react';
 import {createRoot} from 'react-dom/client';
 import Map, {Marker, NavigationControl} from 'react-map-gl';
-import mapboxgl from 'mapbox-gl';
 
 import ControlPanel from './control-panel';
 import Pin from './pin';
@@ -44,7 +43,6 @@ export default function App() {
   return (
     <>
       <Map
-        mapLib={mapboxgl}
         initialViewState={initialViewState}
         mapStyle="mapbox://styles/mapbox/dark-v9"
         mapboxAccessToken={TOKEN}

diff --git a/examples/draw-polygon/README.md b/examples/draw-polygon/README.md
@@ -6,6 +6,8 @@ This app reproduces Mapbox's [Draw a polygon and calculate its area](https://doc
 
 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 `src/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.
+
 ```bash
 npm i
 npm run start

diff --git a/examples/draw-polygon/package.json b/examples/draw-polygon/package.json
@@ -10,7 +10,7 @@
     "@turf/area": "^6.5.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "react-map-gl": "^7.0.0",
+    "react-map-gl": "^7.1.0-beta",
     "mapbox-gl": "^2.0.0"
   },
   "devDependencies": {

diff --git a/examples/draw-polygon/src/app.tsx b/examples/draw-polygon/src/app.tsx
@@ -2,7 +2,6 @@ import * as React from 'react';
 import {useState, useCallback} from 'react';
 import {createRoot} from 'react-dom/client';
 import Map from 'react-map-gl';
-import mapboxgl from 'mapbox-gl';
 
 import DrawControl from './draw-control';
 import ControlPanel from './control-panel';
@@ -35,7 +34,6 @@ export default function App() {
   return (
     <>
       <Map
-        mapLib={mapboxgl}
         initialViewState={{
           longitude: -91.874,
           latitude: 42.76,

diff --git a/examples/filter/README.md b/examples/filter/README.md
@@ -8,6 +8,8 @@ This example showcases how to dynamically add/remove filters from layers.
 
 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 `src/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.
+
 ```bash
 npm i
 npm run start

diff --git a/examples/filter/package.json b/examples/filter/package.json
@@ -8,7 +8,7 @@
     "mapbox-gl": "^2.0.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "react-map-gl": "^7.0.0"
+    "react-map-gl": "^7.1.0-beta"
   },
   "devDependencies": {
     "typescript": "^4.0.0",

diff --git a/examples/filter/src/app.tsx b/examples/filter/src/app.tsx
@@ -2,7 +2,6 @@ import * as React from 'react';
 import {useState, useMemo, useCallback} from 'react';
 import {createRoot} from 'react-dom/client';
 import Map, {Popup, Source, Layer} from 'react-map-gl';
-import mapboxgl from 'mapbox-gl';
 import ControlPanel from './control-panel';
 
 import {countiesLayer, highlightLayer} from './map-style';
@@ -27,7 +26,6 @@ export default function App() {
   return (
     <>
       <Map
-        mapLib={mapboxgl}
         initialViewState={{
           latitude: 38.88,
           longitude: -98,

diff --git a/examples/geocoder/README.md b/examples/geocoder/README.md
@@ -6,6 +6,8 @@ This app reproduces Mapbox's [Add a geocoder](https://docs.mapbox.com/mapbox-gl-
 
 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 `src/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.
+
 ```bash
 npm i
 npm run start

diff --git a/examples/geocoder/package.json b/examples/geocoder/package.json
@@ -9,7 +9,7 @@
     "@types/mapbox__mapbox-gl-geocoder": "^4.7.2",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "react-map-gl": "^7.0.0",
+    "react-map-gl": "^7.1.0-beta",
     "mapbox-gl": "^2.0.0"
   },
   "devDependencies": {

diff --git a/examples/geocoder/src/app.tsx b/examples/geocoder/src/app.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import {createRoot} from 'react-dom/client';
 import Map from 'react-map-gl';
-import mapboxgl from 'mapbox-gl';
 
 import GeocoderControl from './geocoder-control';
 import ControlPanel from './control-panel';
@@ -13,7 +12,6 @@ export default function App() {
   return (
     <>
       <Map
-        mapLib={mapboxgl}
         initialViewState={{
           longitude: -79.4512,
           latitude: 43.6568,

diff --git a/examples/geojson-animation/README.md b/examples/geojson-animation/README.md
@@ -8,6 +8,8 @@ This example showcases how to dynamically add and update custom data sources.
 
 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 `src/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.
+
 ```bash
 npm i
 npm run start

diff --git a/examples/geojson-animation/package.json b/examples/geojson-animation/package.json
@@ -7,7 +7,7 @@
   "dependencies": {
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "react-map-gl": "^7.0.0",
+    "react-map-gl": "^7.1.0-beta",
     "mapbox-gl": "^2.0.0"
   },
   "devDependencies": {

diff --git a/examples/geojson-animation/src/app.tsx b/examples/geojson-animation/src/app.tsx
@@ -4,7 +4,6 @@ import {useState, useEffect} from 'react';
 import {createRoot} from 'react-dom/client';
 import {Map, Source, Layer} from 'react-map-gl';
 import type {LayerProps} from 'react-map-gl';
-import mapboxgl from 'mapbox-gl';
 
 import ControlPanel from './control-panel';
 
@@ -39,7 +38,6 @@ export default function App() {
   return (
     <>
       <Map
-        mapLib={mapboxgl}
         initialViewState={{
           latitude: 0,
           longitude: -100,

diff --git a/examples/geojson/README.md b/examples/geojson/README.md
@@ -6,6 +6,8 @@ This example showcases how to dynamically add and update custom data sources.
 
 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 `src/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.
+
 ```bash
 npm i
 npm run start

diff --git a/examples/geojson/package.json b/examples/geojson/package.json
@@ -10,7 +10,7 @@
     "mapbox-gl": "^2.0.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "react-map-gl": "^7.0.0"
+    "react-map-gl": "^7.1.0-beta"
   },
   "devDependencies": {
     "typescript": "^4.0.0",

diff --git a/examples/geojson/src/app.tsx b/examples/geojson/src/app.tsx
@@ -2,7 +2,6 @@ import * as React from 'react';
 import {useState, useEffect, useMemo, useCallback} from 'react';
 import {createRoot} from 'react-dom/client';
 import Map, {Source, Layer} from 'react-map-gl';
-import mapboxgl from 'mapbox-gl';
 import ControlPanel from './control-panel';
 
 import {dataLayer} from './map-style';
@@ -43,7 +42,6 @@ export default function App() {
   return (
     <>
       <Map
-        mapLib={mapboxgl}
         initialViewState={{
           latitude: 40,
           longitude: -100,

diff --git a/examples/get-started/basic/README.md b/examples/get-started/basic/README.md
@@ -6,6 +6,8 @@ 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, visit the [maplibre-gl example](../maplibre).
+
 ```bash
 npm i
 npm run start