Skip to content

Instantly share code, notes, and snippets.

@clhenrick

clhenrick/.block

Last active April 9, 2018 02:11
Show Gist options
  • Save clhenrick/57a76d0f25877840568ab26515eb03ac to your computer and use it in GitHub Desktop.
Save clhenrick/57a76d0f25877840568ab26515eb03ac to your computer and use it in GitHub Desktop.
Download ZIP
ischool-geo-viz-02
Raw
.block
license: mit
Raw
README.md

02 Data Driven Styling With MapBoxGL

In this step we style our data using one of its properties, crash_type. Notice that we do this by adding stops to our style configuration, and that the size of our circles transitions smoothly as we zoom in and out.

Things to Try Out:

  • Change the stop values for the 'circle-radius' property. Remember that stops accepts an array of arrays, where each inner array has a value for zoom level and a value for the circle radius. What happens if we add more than two arrays to our stops array?

  • Try adding a popup that displays when mousing over a crash location: https://www.mapbox.com/mapbox-gl-js/example/popup-on-hover/

Helpful links

Built with blockbuilder.org

forked from clhenrick's block: ischool-geo-viz-template

Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>02: Data Driven Styling</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src="//d3js.org/d3.v3.min.js"></script>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.43.0/mapbox-gl.js'></script>
<link href='https://unpkg.com/mapbox-gl@0.43.0/dist/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script>
// set our access token
mapboxgl.accessToken = 'pk.eyJ1IjoiZW5qYWxvdCIsImEiOiIzOTJmMjBiZmI2NGQ2ZjAzODhiMzhiOGI2MTI1YTk4YSJ9.sIOXXU3TPp5dLg_L3cUxhQ';
var dataURL = "https://raw.githubusercontent.com/clhenrick/geovisualization_workshop_ischool/master/data/nyc_crashes.geojson"
// create a new map using our div#map
// set the style, zoom, and center
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v9',
center: [-74.0059, 40.7127],
zoom: 10
});
// add map controls
map.addControl(new mapboxgl.NavigationControl());
// function to call once the map has loaded
map.on('load', function() {
console.log('map loaded!');
// we'll use d3.json to load the point data asynchronously
d3.json(dataURL, function(error, data) {
// report an error if their was a problem getting the geojson data
if (error) throw error;
// filter out data with no geometry, otherwise MapboxGL throws an error and won't load data
data.features = data.features.filter(function(d) {
return d.geometry;
});
// add the source to the map styles
map.addSource('crashes', {
type: 'geojson',
'data': data,
});
// add the map layer
map.addLayer({
id: 'crashes',
type: 'circle',
source: 'crashes',
'layout': {},
'paint': {
'circle-color': {
property: 'crash_type',
type: 'categorical',
stops: [
['no_injury_fatality', '#FECC5C'],
['injury', '#FD8D3C'],
['fatality', '#F03B20'],
['injury_and_fatality', '#BD0026']
]
},
'circle-opacity': 0.8,
'circle-radius': {
'base': 1.75,
'stops': [[12, 2], [22, 180]]
},
}
});
}); // end d3.json
}); // end map.on('load')
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment