Update example types and README to v7.1 (#2205)

examples/clusters/README.md

@@ -8,9 +8,12 @@ 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
 ```
+
+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'`
+- Change the `mapStyle` prop of `<Map>` to `"https://demotiles.maplibre.org/style.json"` or a self-hosted URL

examples/clusters/src/app.tsx

@@ -7,7 +7,7 @@ import ControlPanel from './control-panel';
 import {clusterLayer, clusterCountLayer, unclusteredPointLayer} from './layers';
 
 import type {MapRef} from 'react-map-gl';
-import type {GeoJSONSource} from 'react-map-gl';
+import type {GeoJSONSource} from 'mapbox-gl';
 
 const MAPBOX_TOKEN = ''; // Set your mapbox token here
 

examples/controls/README.md

@@ -6,9 +6,12 @@ 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
 ```
+
+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'`
+- Change the `mapStyle` prop of `<Map>` to `"https://demotiles.maplibre.org/style.json"` or a self-hosted URL

examples/custom-cursor/README.md

@@ -6,9 +6,12 @@ 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
 ```
+
+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'`
+- Change the `mapStyle` prop of `<Map>` to `"https://demotiles.maplibre.org/style.json"` or a self-hosted URL

examples/custom-overlay/README.md

@@ -6,9 +6,12 @@ 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
 ```
+
+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'`
+- Change the `mapStyle` prop of `<Map>` to `"https://demotiles.maplibre.org/style.json"` or a self-hosted URL

examples/custom-overlay/src/app.tsx

@@ -9,7 +9,7 @@ import ControlPanel, {COLORS} from './control-panel';
 
 import electionData from '../../.data/us-election-2016.json';
 
-import type {MapboxMap} from 'react-map-gl';
+import type {Map as MapboxMap} from 'mapbox-gl';
 
 const TOKEN = ''; // Set your mapbox token here
 

examples/custom-overlay/src/custom-overlay.tsx

@@ -3,11 +3,11 @@ import {useState, cloneElement} from 'react';
 import {useControl} from 'react-map-gl';
 import {createPortal} from 'react-dom';
 
-import type {MapboxMap, IControl} from 'react-map-gl';
+import type {IControl, MapInstance} from 'react-map-gl';
 
 // Based on template in https://docs.mapbox.com/mapbox-gl-js/api/markers/#icontrol
 class OverlayControl implements IControl {
-  _map: MapboxMap = null;
+  _map: MapInstance = null;
   _container: HTMLElement;
   _redraw: () => void;
 

examples/deckgl-overlay/README.md

@@ -6,9 +6,12 @@ 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
 ```
+
+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'`
+- Change the `mapStyle` prop of `<Map>` to `"https://demotiles.maplibre.org/style.json"` or a self-hosted URL

examples/draggable-markers/README.md

@@ -6,9 +6,12 @@ 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
 ```
+
+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'`
+- Change the `mapStyle` prop of `<Map>` to `"https://demotiles.maplibre.org/style.json"` or a self-hosted URL

examples/draw-polygon/README.md

@@ -6,9 +6,12 @@ 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
 ```
+
+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'`
+- Change the `mapStyle` prop of `<Map>` to `"https://demotiles.maplibre.org/style.json"` or a self-hosted URL

examples/draw-polygon/src/draw-control.ts

@@ -1,7 +1,7 @@
 import MapboxDraw from '@mapbox/mapbox-gl-draw';
 import {useControl} from 'react-map-gl';
 
-import type {MapRef, ControlPosition} from 'react-map-gl';
+import type {ControlPosition} from 'react-map-gl';
 
 type DrawControlProps = ConstructorParameters<typeof MapboxDraw>[0] & {
   position?: ControlPosition;
@@ -14,12 +14,12 @@ type DrawControlProps = ConstructorParameters<typeof MapboxDraw>[0] & {
 export default function DrawControl(props: DrawControlProps) {
   useControl<MapboxDraw>(
     () => new MapboxDraw(props),
-    ({map}: {map: MapRef}) => {
+    ({map}) => {
       map.on('draw.create', props.onCreate);
       map.on('draw.update', props.onUpdate);
       map.on('draw.delete', props.onDelete);
     },
-    ({map}: {map: MapRef}) => {
+    ({map}) => {
       map.off('draw.create', props.onCreate);
       map.off('draw.update', props.onUpdate);
       map.off('draw.delete', props.onDelete);

examples/filter/README.md

@@ -8,9 +8,12 @@ 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
 ```
+
+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'`
+- Change the `mapStyle` prop of `<Map>` to `"https://demotiles.maplibre.org/style.json"` or a self-hosted URL

examples/filter/src/app.tsx

@@ -21,7 +21,10 @@ export default function App() {
   }, []);
 
   const selectedCounty = (hoverInfo && hoverInfo.countyName) || '';
-  const filter = useMemo(() => ['in', 'COUNTY', selectedCounty], [selectedCounty]);
+  const filter: ['in', string, string] = useMemo(
+    () => ['in', 'COUNTY', selectedCounty],
+    [selectedCounty]
+  );
 
   return (
     <>
@@ -45,7 +48,7 @@ export default function App() {
           <Popup
             longitude={hoverInfo.longitude}
             latitude={hoverInfo.latitude}
-            offset={[0, -10]}
+            offset={[0, -10] as [number, number]}
             closeButton={false}
             className="county-info"
           >

examples/filter/src/map-style.ts

@@ -2,6 +2,7 @@ import type {FillLayer} from 'react-map-gl';
 
 export const countiesLayer: FillLayer = {
   id: 'counties',
+  source: '',
   type: 'fill',
   'source-layer': 'original',
   paint: {

examples/geocoder/README.md

@@ -6,9 +6,12 @@ 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
 ```
+
+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'`
+- Change the `mapStyle` prop of `<Map>` to `"https://demotiles.maplibre.org/style.json"` or a self-hosted URL

examples/geocoder/src/geocoder-control.tsx

@@ -36,7 +36,8 @@ export default function GeocoderControl(props: GeocoderControlProps) {
           result &&
           (result.center || (result.geometry?.type === 'Point' && result.geometry.coordinates));
         if (location && props.marker) {
-          setMarker(<Marker {...props.marker} longitude={location[0]} latitude={location[1]} />);
+          const markerProps = typeof props.marker === 'object' ? props.marker : {};
+          setMarker(<Marker {...markerProps} longitude={location[0]} latitude={location[1]} />);
         } else {
           setMarker(null);
         }

examples/geojson-animation/README.md

@@ -8,9 +8,12 @@ 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
 ```
+
+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'`
+- Change the `mapStyle` prop of `<Map>` to `"https://demotiles.maplibre.org/style.json"` or a self-hosted URL

examples/geojson/README.md

@@ -6,9 +6,12 @@ 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
 ```
+
+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'`
+- Change the `mapStyle` prop of `<Map>` to `"https://demotiles.maplibre.org/style.json"` or a self-hosted URL

examples/geojson/src/map-style.ts

@@ -1,11 +1,12 @@
-import type {FillLayer} from 'react-map-gl';
+import type {LayerProps} from 'react-map-gl';
 
 // For more information on data-driven styles, see https://www.mapbox.com/help/gl-dds-ref/
-export const dataLayer: FillLayer = {
+export const dataLayer: LayerProps = {
   id: 'data',
   type: 'fill',
   paint: {
     'fill-color': {
+      type: 'interval',
       property: 'percentile',
       stops: [
         [0, '#3288bd'],

examples/heatmap/README.md

@@ -6,9 +6,12 @@ This app reproduces Mapbox's [Create a heatmap layer](https://docs.mapbox.com/ma
 
 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
 ```
+
+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'`
+- Change the `mapStyle` prop of `<Map>` to `"https://demotiles.maplibre.org/style.json"` or a self-hosted URL

examples/heatmap/src/map-style.ts

@@ -1,8 +1,8 @@
-import type {HeatmapLayer} from 'react-map-gl';
+import type {LayerProps} from 'react-map-gl';
 
 const MAX_ZOOM_LEVEL = 9;
 
-export const heatmapLayer: HeatmapLayer = {
+export const heatmapLayer: LayerProps = {
   id: 'heatmap',
   maxzoom: MAX_ZOOM_LEVEL,
   type: 'heatmap',

examples/interaction/README.md

@@ -6,9 +6,12 @@ This example showcases how to toggle/limit user interaction.
 
 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
 ```
+
+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'`
+- Change the `mapStyle` prop of `<Map>` to `"https://demotiles.maplibre.org/style.json"` or a self-hosted URL

examples/layers/README.md

@@ -6,9 +6,12 @@ This example showcases how to dynamically change layer styles and show/hide laye
 
 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
 ```
+
+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'`
+- Change the `mapStyle` prop of `<Map>` to `"https://demotiles.maplibre.org/style.json"` or a self-hosted URL

examples/side-by-side/README.md

@@ -6,9 +6,12 @@ Demonstrates how to synchronize two maps 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
 ```
+
+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'`
+- Change the `mapStyle` prop of `<Map>` to `"https://demotiles.maplibre.org/style.json"` or a self-hosted URL

examples/terrain/README.md

@@ -6,9 +6,12 @@ Demonstrates how to add 3D terrain 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
 ```
+
+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'`
+- Change the `mapStyle` prop of `<Map>` to `"https://demotiles.maplibre.org/style.json"` or a self-hosted URL

examples/viewport-animation/README.md

@@ -6,9 +6,12 @@ This example showcases how to transition smoothly between one viewport to anothe
 
 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
 ```
+
+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'`
+- Change the `mapStyle` prop of `<Map>` to `"https://demotiles.maplibre.org/style.json"` or a self-hosted URL

examples/zoom-to-bounds/README.md

@@ -6,9 +6,12 @@ Demonstrates how to zoom to a bounding box 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
 ```
+
+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'`
+- Change the `mapStyle` prop of `<Map>` to `"https://demotiles.maplibre.org/style.json"` or a self-hosted URL

package.json

@@ -25,7 +25,7 @@
   ],
   "scripts": {
     "typecheck": "tsc -p tsconfig.esm.json --noEmit",
-    "bootstrap": "PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true yarn && ocular-bootstrap",
+    "bootstrap": "PUPPETEER_SKIP_DOWNLOAD=true yarn && ocular-bootstrap",
     "build": "ocular-clean && tsc -b tsconfig.esm.json && tsc -b tsconfig.es5.json",
     "lint": "ocular-lint",
     "cover": "ocular-test cover",