Skip to content

Instantly share code, notes, and snippets.

@Pessimistress

Pessimistress/map.js

Created October 8, 2018 03:36
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Pessimistress/ef06176d8590f71dc6ee23f1fcd03e88 to your computer and use it in GitHub Desktop.
Save Pessimistress/ef06176d8590f71dc6ee23f1fcd03e88 to your computer and use it in GitHub Desktop.
Download ZIP
deck.gl + Mapbox: Get Started
Raw
map.js
import {ScatterplotLayer} from '@deck.gl/layers';
import {MapboxLayer} from '@deck.gl/mapbox';
import mapboxgl from 'mapbox-gl';
// Get a mapbox API access token
mapboxgl.accessToken = '<your access token here>';
// Initialize mapbox map
const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-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');
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment