Skip to content

Instantly share code, notes, and snippets.

@Pessimistress

Pessimistress/index.html

Last active October 30, 2018 19:44
Show Gist options
  • Save Pessimistress/432693e986ff34c976a2fc57b9c9e2d9 to your computer and use it in GitHub Desktop.
Save Pessimistress/432693e986ff34c976a2fc57b9c9e2d9 to your computer and use it in GitHub Desktop.
Download ZIP
deck.gl + Mapbox: Get Started (Demo)
Raw
index.html
<html>
<head>
<title>deck.gl + Mapbox Integration</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src="https://unpkg.com/deck.gl@^6.2.0/deckgl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js"></script>
<link rel="stylesheet" type="text/css" href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.css">
</head>
<body>
<div id="map" style="width: 100vw; height: 100vh"></div>
</body>
<script type="text/javascript">
const {MapboxLayer, ScatterplotLayer} = deck;
// Get a mapbox API access token
mapboxgl.accessToken = 'pk.eyJ1IjoidWJlcmRhdGEiLCJhIjoiY2pudzRtaWloMDAzcTN2bzN1aXdxZHB5bSJ9.2bkj3IiRC8wj3jLThvDGdA';
// Initialize mapbox map
const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v9',
center: [-74.50, 40],
zoom: 9
});
// Create a mapbox-compatible deck.gl layer
const myDeckLayer = new MapboxLayer({
id: 'my-scatterplot',
type: ScatterplotLayer,
data: [
{position: [-74.5, 40], size: 10000}
],
getPosition: d => d.position,
getRadius: d => d.size,
getColor: [255, 0, 0]
});
// Insert the layer before mapbox labels
map.on('load', () => {
map.addLayer(myDeckLayer, 'waterway-label');
});
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment