All deck.gl examples are set up to be "stand-alone", which means that
you can copy the example folder to your own environment, run
npm start and within minutes have a running, minimal app that you can
start modifying and experimenting with.
Layer Browser Example
- Layer Browser (Main Example) - The Layer Browser enables testing of props for all core layers and many sample layers. This is the main example used for testing layers during development of deck.gl.
These are intended to be absolutely minimal (in terms of application code, package.json, webpack config etc) examples of how to get deck.gl and a base map working together.
- Hello World (webpack2): Bundles a minimal app with webpack 2 and serves it with webpack-dev-server. Transpiles with buble.
- Hello World (browserify) Bundles a minimal app with browserify and serves it with budo. Transpiles with babel.
- Note that these apps just draw a single line on a map and that they don't even implement event handling (you can't pan and zoom the map). However, if you are having environment or build issues, or difficulties understanding how more complex deck.gl applications work, making sure that you can get one of these to run would be a good first step.
These are stand-alone versions of the "showcase" examples in the deck.gl website, with smaller uncompressed data sets to make it easy to understand how they work.
- Since these examples are set up so they can be run both stand-alone and also loaded by the website (demo), their code is organize slightly differently than a completely stand-alone applications typically are. If you want to base your application on one of these examples you may want to make some small code simplifications by comparing to non-demo examples.
SVG Interoperability: Shows how deck.gl can interoperate with SVG.
JSX Layers: Shows a way to use JSX syntax to render deck.g layers as if they were React components.
A number of sample layers are available in
examples/sample-layers. These can
be copied into your app and extended/modified as needed. Note that many of
the sample layers are imported by the Layer Browser example and can be tested
by running that example.
Installing and Running
As usual, you can install the dependencies either using
yarn or with
yarn installs faster, but is not required).
npm start will run build and
run the example (and hot reload any source code changes).
Note that many of the comments in the "Getting Started" section of deck.gl documentation also applies when building and running the examples.
Note on "Map Tokens"
The main requirement before running any examples using maps will be to provide a map token to the examples so that they can load maps from mapbox etc.
All the examples are set up to read the token from the environment variable
MapboxAccessToken, so you don't have to edit the code to test them.
- If you fail to provide a token, the examples will still run, and render any deck.gl overlays, but the underlying maps will not render.
- The map token requirement obviously only applies only to examples that use base maps, e.g. any examples using react-map-gl to render map tiles.
About the Hello World Examples
These examples are intended to give you a minimal working example to build off.
The goal is to demonstrate the smallest working
and configuration file settings for each bundler, removing all non-essential
dependencies and configuration, showing you exactly what is needed to get
started with deck.gl.
Although the interface might be slightly different, the result should be
exactly the same, i.e. an interactive dark map you can move and tilt with a
LineLayer showing one line.
Support for Working Directly Against deck.gl Source Code
Note that several examples are set up so that they can be run either against the local source code (enabling debugging of deck.gl itself, with hot reloading) or against an installed version of deck.gl (enables testing that things work with the published version).
Examples that support this mode have a 'start-local' script in their
Look at the
webpack.config.local.js in this directory for details.