As they huddle around the desk, Trump likes to pore over visuals — maps, charts, pictures and videos, as well as “killer graphics,” as CIA Director Mike Pompeo phrased it. (Washington Post — May 29, 2017)
Maps are an effective and compelling way displaying information. While making them appears complicated (and can be), tools like MapBox and QGIS can let us render beautiful and interactive maps in just minutes. Here’s how to get started.
Grab some data and load it into QGIS. In this example, we’ll use a shapefile of Washington, D.C. tree inspections over the last 30 days. (Shapefiles are a common format for storing geographic data; read more about them here.) Now fire up QGIS and import your shapefile by selecting the “Add Vector Layer” option:
Convert the shapefile to GeoJSON. Web mapping tools like Leaflet and Mapbox easily read GeoJSON (a detailed overview of the format is available here). In just a few clicks, QGIS lets us convert a shapefile to GeoJSON. Right click on your layer and select “Save As…:
Next, give your file a name and select GeoJSON as your format:
Upload to Mapbox and convert to Tileset. Mapbox Studio makes it especially easy to work with GeoJSONs. Create an account and upload the file as a “Dataset.”
Success! Now, if necessary, the data can be edited. When you’re ready to make your map, click export in the top left and export the coordinates to tiles.
Create a style and link your tiles. Head back to studio and create a new style. We’ll use the pre-made “Light” template for this example. In the top-left, select “Add Layer” and select the trees Tileset. You can style the layer without code using the Studio interface.
Make your map in Mapbox GL JS. Mapbox is well-documented, so I won’t rehash the whole process of initializing a map, but here’s the gist:
Create an HTML file and make sure it includes a div with an id of map.
In a JavaScript file, declare your map as a variable, specify its container (our map div), and starting position.
Set the style to the map you just created. Don’t forget your API key!
let map = new mapboxgl.Map({container: ‘map’,style: ‘mapbox://styles/adamcohn/cjiopq1b92cn22rpi4ar2b4al’,center: [-96, 37.8],zoom: 3});
Viola!
