| license: mit |
Here you will find an empty HTML template for the workshop. We'll be adding javascript code to the section between the opening and closing <script></script> tags in the index.html file.
Let's get started!
Built with blockbuilder.org
forked from clhenrick's block: ischool-geo-viz-template
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset='utf-8' /> | |
| <title>iSchool GeoVisualization Workshop</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.35.0/mapbox-gl.js'></script> | |
| <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.35.0/mapbox-gl.css' rel='stylesheet' /> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/Turf.js/2.0.2/turf.min.js"></script> | |
| <style> | |
| body { margin:0; padding:0; } | |
| #map { position:absolute; top:0; bottom:0; width:100%; } | |
| </style> | |
| </head> | |
| <body> | |
| <div id='map'></div> | |
| <script> | |
| // javascript code goes here | |
| var dataURL = "https://raw.githubusercontent.com/clhenrick/geovisualization_workshop_ischool/master/data/nyc_crashes.geojson"; | |
| var accessToken = 'pk.eyJ1IjoiZW5qYWxvdCIsImEiOiIzOTJmMjBiZmI2NGQ2ZjAzODhiMzhiOGI2MTI1YTk4YSJ9.sIOXXU3TPp5dLg_L3cUxhQ'; | |
| mapboxgl.accessToken = accessToken; | |
| var map = new mapboxgl.Map({ | |
| container: 'map', | |
| style: 'mapbox://styles/mapbox/light-v9', | |
| center: [-73.9, 40.7627], | |
| zoom: 11 | |
| }); | |
| d3.json(dataURL, function(error, data){ | |
| if (error) throw error; | |
| console.log(data); | |
| //add data source to object called map | |
| map.addSource('crashes', { | |
| type: 'geojson', | |
| data: data | |
| }); | |
| 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', '#be240d'], | |
| ['injury_and_fatality', '#750017'] | |
| ] | |
| }, | |
| 'circle-opacity': 0.8, | |
| 'circle-radius': { | |
| 'base': 1.75, | |
| 'stops': [ | |
| [12,2], | |
| [22, 180] | |
| ] | |
| } | |
| } | |
| }); | |
| } | |
| ) | |
| </script> | |
| </body> | |
| </html> |