Applying data-driven style to remote data sources

GitHub, Dropbox, and Google Sheets make it easy to store and share data — but how do you request a file from these sources to use it as a data layer on a map? I’ll show you how to request data from each service and apply data-driven styling.

Each example uses data provided by the open data catalog for the City of Vancouver and in the interest of keeping things simple, I applied light data-driven styles to either the circle-radius or circle-color properties of points received.

GitHub

This GitHub example uses gist.github.com to anonymously store a GeoJSON document containing over 8,000 points of graffiti site data. Each point contains a single value COUNT that represents the number of graffiti found at each location that’s used to style each point. GitHub’s API limits the number of requests you can make to anonymously posted data so you can use a service called RawGit to serve it instead.

varurl='https://cdn.rawgit.com/anonymous/420a209481f79d97f61241a626ddfea8/raw/d090100b0bbb8f383d20e9e2e9f06f11af180bef/map.geojson';map.addSource('data',{type:'geojson',data:url});

Google Sheets

With Google Sheets, data is stored in a spreadsheet. With a powerful online interface and collaboration settings, it’s a great solution for continuous modifications. After creating your spreadsheet, you’ll need to set the share settings to “Public on the web” or “Anyone with a link” (found under Advanced in the Link sharing modal) and publish your data File > Publish to the web.

The response returned by Google Sheets requires some processing to format the data into valid GeoJSON. You can use mapboxgl.util.getJSON to fetch the data and then format it on callback.

varurl='https://spreadsheets.google.com/feeds/list/16fTFtrVyW6zunP0fow5jZaupEkKA-MSMvtQQLp3-tQY/od6/public/basic?alt=json';mapboxgl.util.getJSON(url,function(err,data){// From the requested source we'll need to do a bit of// data processing to get it into a format for our needs.// The finished output looks like GeoJSONvargeojson={type:'FeatureCollection',features:[]};data.feed.entry.forEach(function(d){varlng,lat;// Add coordinates fields you want based on `d.content`geojson.features.push({type:'Feature',properties:{title:d.title.$t},geometry:{type:'Point',coordinates:[lng,lat]}});});});

Dropbox

Dropbox comes with a caveat: you need to place your files in a public folder which requires a Business or Pro account. Files in the public folder allow you to link directly to the raw source without having to build an authentication layer.

varurl='https://dl.dropboxusercontent.com/u/3677104/data/city-owned-properties-in-vancouver.geojson';map.addSource('data',{type:'geojson',data:url});

In this example, I used data-driven styling simply here to distinguish between building types. In the data, 0 stands for “Captial fund” and 1 stands for “Property endowment fund”.

'circle-color':{property:'TYPE',stops:[[0,'#fa946e'],[1,'#c091e6']]}

Others?

Click on the full screen link under each example to learn more how I built each example by viewing the source code. Have a question about another third party source? Reach out to us on Twitter @Mapbox.