diff --git a/examples/clusters/README.md b/examples/clusters/README.md index e3a612a8..8866b972 100644 --- a/examples/clusters/README.md +++ b/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 `` to `"https://demotiles.maplibre.org/style.json"` or a self-hosted URL diff --git a/examples/clusters/src/app.tsx b/examples/clusters/src/app.tsx index 6f9e114b..9da34af4 100644 --- a/examples/clusters/src/app.tsx +++ b/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 diff --git a/examples/controls/README.md b/examples/controls/README.md index 68e9bff5..77b13451 100644 --- a/examples/controls/README.md +++ b/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 `` to `"https://demotiles.maplibre.org/style.json"` or a self-hosted URL diff --git a/examples/custom-cursor/README.md b/examples/custom-cursor/README.md index 51e5bea3..ff3ebe89 100644 --- a/examples/custom-cursor/README.md +++ b/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 `` to `"https://demotiles.maplibre.org/style.json"` or a self-hosted URL diff --git a/examples/custom-overlay/README.md b/examples/custom-overlay/README.md index 8e3112e0..fb7c87a0 100644 --- a/examples/custom-overlay/README.md +++ b/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 `` to `"https://demotiles.maplibre.org/style.json"` or a self-hosted URL diff --git a/examples/custom-overlay/src/app.tsx b/examples/custom-overlay/src/app.tsx index 6419bc69..b74dbd1b 100644 --- a/examples/custom-overlay/src/app.tsx +++ b/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 diff --git a/examples/custom-overlay/src/custom-overlay.tsx b/examples/custom-overlay/src/custom-overlay.tsx index 29da2c9f..82b4c22a 100644 --- a/examples/custom-overlay/src/custom-overlay.tsx +++ b/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; diff --git a/examples/deckgl-overlay/README.md b/examples/deckgl-overlay/README.md index 6a05d02f..4473095c 100644 --- a/examples/deckgl-overlay/README.md +++ b/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 `` to `"https://demotiles.maplibre.org/style.json"` or a self-hosted URL diff --git a/examples/draggable-markers/README.md b/examples/draggable-markers/README.md index 6a54d6c2..7043163a 100644 --- a/examples/draggable-markers/README.md +++ b/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 `` to `"https://demotiles.maplibre.org/style.json"` or a self-hosted URL diff --git a/examples/draw-polygon/README.md b/examples/draw-polygon/README.md index 16c9679d..5b31b6bd 100644 --- a/examples/draw-polygon/README.md +++ b/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 `` to `"https://demotiles.maplibre.org/style.json"` or a self-hosted URL diff --git a/examples/draw-polygon/src/draw-control.ts b/examples/draw-polygon/src/draw-control.ts index e886f617..42f71dd1 100644 --- a/examples/draw-polygon/src/draw-control.ts +++ b/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[0] & { position?: ControlPosition; @@ -14,12 +14,12 @@ type DrawControlProps = ConstructorParameters[0] & { export default function DrawControl(props: DrawControlProps) { useControl( () => 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); diff --git a/examples/filter/README.md b/examples/filter/README.md index 1599d9c6..43a5c91e 100644 --- a/examples/filter/README.md +++ b/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 `` to `"https://demotiles.maplibre.org/style.json"` or a self-hosted URL diff --git a/examples/filter/src/app.tsx b/examples/filter/src/app.tsx index 2e5e63a0..2a4aabd0 100644 --- a/examples/filter/src/app.tsx +++ b/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() { diff --git a/examples/filter/src/map-style.ts b/examples/filter/src/map-style.ts index 4a13db46..556c2cc1 100644 --- a/examples/filter/src/map-style.ts +++ b/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: { diff --git a/examples/geocoder/README.md b/examples/geocoder/README.md index 936c4cf4..aa34b532 100644 --- a/examples/geocoder/README.md +++ b/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 `` to `"https://demotiles.maplibre.org/style.json"` or a self-hosted URL diff --git a/examples/geocoder/src/geocoder-control.tsx b/examples/geocoder/src/geocoder-control.tsx index f9ff9bfa..ddb5421a 100644 --- a/examples/geocoder/src/geocoder-control.tsx +++ b/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(); + const markerProps = typeof props.marker === 'object' ? props.marker : {}; + setMarker(); } else { setMarker(null); } diff --git a/examples/geojson-animation/README.md b/examples/geojson-animation/README.md index aed3cb4b..081940af 100644 --- a/examples/geojson-animation/README.md +++ b/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 `` to `"https://demotiles.maplibre.org/style.json"` or a self-hosted URL diff --git a/examples/geojson/README.md b/examples/geojson/README.md index 3dccc42a..6fe1be0b 100644 --- a/examples/geojson/README.md +++ b/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 `` to `"https://demotiles.maplibre.org/style.json"` or a self-hosted URL diff --git a/examples/geojson/src/map-style.ts b/examples/geojson/src/map-style.ts index c0976799..cce6f942 100644 --- a/examples/geojson/src/map-style.ts +++ b/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'], diff --git a/examples/heatmap/README.md b/examples/heatmap/README.md index 970a2933..1c8a0257 100644 --- a/examples/heatmap/README.md +++ b/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 `` to `"https://demotiles.maplibre.org/style.json"` or a self-hosted URL diff --git a/examples/heatmap/src/map-style.ts b/examples/heatmap/src/map-style.ts index 0e8dfad8..3fb22bae 100644 --- a/examples/heatmap/src/map-style.ts +++ b/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', diff --git a/examples/interaction/README.md b/examples/interaction/README.md index dae8b978..b3295fef 100644 --- a/examples/interaction/README.md +++ b/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 `` to `"https://demotiles.maplibre.org/style.json"` or a self-hosted URL diff --git a/examples/layers/README.md b/examples/layers/README.md index 208a3522..52748500 100644 --- a/examples/layers/README.md +++ b/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 `` to `"https://demotiles.maplibre.org/style.json"` or a self-hosted URL diff --git a/examples/side-by-side/README.md b/examples/side-by-side/README.md index 882b3cdd..dc16d109 100644 --- a/examples/side-by-side/README.md +++ b/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 `` to `"https://demotiles.maplibre.org/style.json"` or a self-hosted URL diff --git a/examples/terrain/README.md b/examples/terrain/README.md index 20047245..83f32550 100644 --- a/examples/terrain/README.md +++ b/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 `` to `"https://demotiles.maplibre.org/style.json"` or a self-hosted URL diff --git a/examples/viewport-animation/README.md b/examples/viewport-animation/README.md index cdd9c03a..670da192 100644 --- a/examples/viewport-animation/README.md +++ b/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 `` to `"https://demotiles.maplibre.org/style.json"` or a self-hosted URL diff --git a/examples/zoom-to-bounds/README.md b/examples/zoom-to-bounds/README.md index 57bb95fb..1e4e8f06 100644 --- a/examples/zoom-to-bounds/README.md +++ b/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 `` to `"https://demotiles.maplibre.org/style.json"` or a self-hosted URL diff --git a/package.json b/package.json index 3809de70..2332b94d 100644 --- a/package.json +++ b/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",