forked from visgl/deck.gl
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore(examples) add mapbox and maplibre get-started examples (visgl#8562
) * chore(examples) rename mapbox to maplibre in react * add(examples) mapbox v3 react example * add(examples) pure-js mapbox get-started * add interleaved to examples --------- Signed-off-by: Chris Gervang <chris@gervang.com>
- Loading branch information
1 parent
bde0ef6
commit 5af293f
Showing
17 changed files
with
300 additions
and
21 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| ## Example: Use deck.gl with Mapbox | ||
|
|
||
| Uses [Vite](https://vitejs.dev/) to bundle and serve files. | ||
|
|
||
| ## Usage | ||
|
|
||
| To run this example, you need a [Mapbox access token](https://docs.mapbox.com/help/how-mapbox-works/access-tokens/). You can either set an environment variable: | ||
|
|
||
| ```bash | ||
| export MapboxAccessToken=<mapbox_access_token> | ||
| ``` | ||
|
|
||
| Or set `MAPBOX_TOKEN` directly in `app.js`. | ||
|
|
||
| Other options can be found at [using with Mapbox GL](../../../../docs/developer-guide/base-maps/using-with-mapbox.md). | ||
|
|
||
| To install dependencies: | ||
|
|
||
| ```bash | ||
| npm install | ||
| # or | ||
| yarn | ||
| ``` | ||
|
|
||
| Commands: | ||
| * `npm start` is the development target, to serve the app and hot reload. | ||
| * `npm run build` is the production target, to create the final bundle and write to disk. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| import {MapboxOverlay as DeckOverlay} from '@deck.gl/mapbox'; | ||
| import {GeoJsonLayer, ArcLayer} from '@deck.gl/layers'; | ||
| import mapboxgl from 'mapbox-gl'; | ||
| import 'mapbox-gl/dist/mapbox-gl.css'; | ||
|
|
||
| // source: Natural Earth http://www.naturalearthdata.com/ via geojson.xyz | ||
| const AIR_PORTS = | ||
| 'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_10m_airports.geojson'; | ||
|
|
||
| // Set your Mapbox token here or via environment variable | ||
| const MAPBOX_TOKEN = process.env.MapboxAccessToken; // eslint-disable-line | ||
|
|
||
| const map = new mapboxgl.Map({ | ||
| container: 'map', | ||
| style: 'mapbox://styles/mapbox/light-v9', | ||
| accessToken: MAPBOX_TOKEN, | ||
| center: [0.45, 51.47], | ||
| zoom: 4, | ||
| bearing: 0, | ||
| pitch: 30 | ||
| }); | ||
|
|
||
| const deckOverlay = new DeckOverlay({ | ||
| // interleaved: true, | ||
| layers: [ | ||
| new GeoJsonLayer({ | ||
| id: 'airports', | ||
| data: AIR_PORTS, | ||
| // Styles | ||
| filled: true, | ||
| pointRadiusMinPixels: 2, | ||
| pointRadiusScale: 2000, | ||
| getPointRadius: f => 11 - f.properties.scalerank, | ||
| getFillColor: [200, 0, 80, 180], | ||
| // Interactive props | ||
| pickable: true, | ||
| autoHighlight: true, | ||
| onClick: info => | ||
| // eslint-disable-next-line | ||
| info.object && alert(`${info.object.properties.name} (${info.object.properties.abbrev})`), | ||
| // beforeId: 'waterway-label' // In interleaved mode render the layer under map labels | ||
| }), | ||
| new ArcLayer({ | ||
| id: 'arcs', | ||
| data: AIR_PORTS, | ||
| dataTransform: d => d.features.filter(f => f.properties.scalerank < 4), | ||
| // Styles | ||
| getSourcePosition: f => [-0.4531566, 51.4709959], // London | ||
| getTargetPosition: f => f.geometry.coordinates, | ||
| getSourceColor: [0, 128, 200], | ||
| getTargetColor: [200, 0, 80], | ||
| getWidth: 1 | ||
| }) | ||
| ] | ||
| }); | ||
|
|
||
| map.addControl(deckOverlay); | ||
| map.addControl(new mapboxgl.NavigationControl()); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| <!doctype html> | ||
| <html> | ||
| <head> | ||
| <meta charset='UTF-8' /> | ||
| <title>deck.gl example</title> | ||
| <style> | ||
| #map { | ||
| position: fixed; | ||
| top: 0; | ||
| left: 0; | ||
| right: 0; | ||
| bottom: 0; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <div id="map"></div> | ||
| <script type="module" src='app.js'></script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| { | ||
| "name": "deckgl-example-pure-js-mapbox", | ||
| "version": "0.0.0", | ||
| "private": true, | ||
| "license": "MIT", | ||
| "scripts": { | ||
| "start": "vite --open", | ||
| "start-local": "vite --config ../../../vite.config.local.mjs", | ||
| "build": "vite build" | ||
| }, | ||
| "dependencies": { | ||
| "@deck.gl/core": "^9.0.0-beta", | ||
| "@deck.gl/layers": "^9.0.0-beta", | ||
| "@deck.gl/mapbox": "^9.0.0-beta", | ||
| "mapbox-gl": "^3.0.0" | ||
| }, | ||
| "devDependencies": { | ||
| "vite": "^4.0.0" | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| export default { | ||
| define: { | ||
| 'process.env.MapboxAccessToken': JSON.stringify(process.env.MapboxAccessToken), | ||
| } | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| export default { | ||
| define: { | ||
| 'process.env.MapboxAccessToken': JSON.stringify(process.env.MapboxAccessToken), | ||
| } | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| ## Example: Use deck.gl with react-map-gl and Maplibre | ||
|
|
||
| Uses [Vite](https://vitejs.dev/) to bundle and serve files. | ||
|
|
||
| ## Usage | ||
|
|
||
| To install dependencies: | ||
|
|
||
| ```bash | ||
| npm install | ||
| # or | ||
| yarn | ||
| ``` | ||
|
|
||
| Commands: | ||
| * `npm start` is the development target, to serve the app and hot reload. | ||
| * `npm run build` is the production target, to create the final bundle and write to disk. | ||
|
|
||
| ### Basemap | ||
|
|
||
| The basemap in this example is provided by [CARTO free basemap service](https://carto.com/basemaps). To use an alternative base map solution, visit [this guide](https://deck.gl/docs/get-started/using-with-map#using-other-basemap-services) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,77 @@ | ||
| import React from 'react'; | ||
| import {createRoot} from 'react-dom/client'; | ||
| import {Map, NavigationControl, useControl} from 'react-map-gl/maplibre'; | ||
| import {GeoJsonLayer, ArcLayer} from 'deck.gl'; | ||
| import {MapboxOverlay as DeckOverlay} from '@deck.gl/mapbox'; | ||
| import 'maplibre-gl/dist/maplibre-gl.css'; | ||
|
|
||
| // source: Natural Earth http://www.naturalearthdata.com/ via geojson.xyz | ||
| const AIR_PORTS = | ||
| 'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_10m_airports.geojson'; | ||
|
|
||
| const INITIAL_VIEW_STATE = { | ||
| latitude: 51.47, | ||
| longitude: 0.45, | ||
| zoom: 4, | ||
| bearing: 0, | ||
| pitch: 30 | ||
| }; | ||
|
|
||
| const MAP_STYLE = 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json'; | ||
| function DeckGLOverlay(props) { | ||
| const overlay = useControl(() => new DeckOverlay(props)); | ||
| overlay.setProps(props); | ||
| return null; | ||
| } | ||
|
|
||
| function Root() { | ||
| const onClick = info => { | ||
| if (info.object) { | ||
| // eslint-disable-next-line | ||
| alert(`${info.object.properties.name} (${info.object.properties.abbrev})`); | ||
| } | ||
| }; | ||
|
|
||
| const layers = [ | ||
| new GeoJsonLayer({ | ||
| id: 'airports', | ||
| data: AIR_PORTS, | ||
| // Styles | ||
| filled: true, | ||
| pointRadiusMinPixels: 2, | ||
| pointRadiusScale: 2000, | ||
| getPointRadius: f => 11 - f.properties.scalerank, | ||
| getFillColor: [200, 0, 80, 180], | ||
| // Interactive props | ||
| pickable: true, | ||
| autoHighlight: true, | ||
| onClick, | ||
| // beforeId: 'watername_ocean' // In interleaved mode, render the layer under map labels | ||
| }), | ||
| new ArcLayer({ | ||
| id: 'arcs', | ||
| data: AIR_PORTS, | ||
| dataTransform: d => d.features.filter(f => f.properties.scalerank < 4), | ||
| // Styles | ||
| getSourcePosition: f => [-0.4531566, 51.4709959], // London | ||
| getTargetPosition: f => f.geometry.coordinates, | ||
| getSourceColor: [0, 128, 200], | ||
| getTargetColor: [200, 0, 80], | ||
| getWidth: 1 | ||
| }) | ||
| ]; | ||
|
|
||
| return ( | ||
| <Map | ||
| initialViewState={INITIAL_VIEW_STATE} | ||
| mapStyle={MAP_STYLE} | ||
| > | ||
| <DeckGLOverlay layers={layers} /*interleaved*/ /> | ||
| <NavigationControl position='top-left' /> | ||
| </Map> | ||
| ); | ||
| } | ||
|
|
||
| /* global document */ | ||
| const container = document.body.appendChild(document.createElement('div')); | ||
| createRoot(container).render(<Root />); |
Oops, something went wrong.