Close Close Comment Creative Commons Donate Email Add Email Facebook Instagram Mastodon Facebook Messenger Mobile Nav Menu Podcast Print RSS Search Secure Twitter WhatsApp YouTube

Introducing Landline and Stateline: Two Tools For Quick Vector Maps in your Browser

Today we're releasing code to make it easier for newsrooms to produce maps quickly.

We used a variation of Landline in this graphic on the front page of our <a href="">nursing homes</a> app.

This post was co-published with Source.

Today we're releasing code to make it easier for newsrooms to produce maps quickly. Landline is an open source JavaScript library for turning GeoJSON data into browser-based SVG maps. It comes with Stateline, which builds on Landline to create U.S. state and county choropleth maps with very little code out-of-the-box.

We finished the project and wrote documentation as part of last week’s Knight-Mozilla OpenNews Code Convening program (thanks to Github's Jessica Lord for helping out on short notice). We've been using variations of Landline at ProPublica for some time, for example on the front page of our nursing homes app and this voting rights act explainer.

Both should work in nearly every commonly supported browser. The full documentation is over at GitHub, but in a nutshell:


Creating a map with Landline is as easy as passing it some GeoJSON.

var map = new LandLine(YOUR_GEOJSON).all();

Landline does the work of translating GeoJSON to SVG, so the level of complexity of your map is really up to you. The resulting SVG string can be sent right to the browser (for modern browsers) or proxied through Raphael.js for universal support.

With Landline, you bring your own projection (based on how the GeoJSON was processed), but you can also pass in your own projection function if you'd like to reproject the map on the fly.

Landline has no dependencies other than Underscore.js.


Creating a state map with Stateline is as easy as requiring the packaged state or county JSON file, specifying a container element and whether you’d like a state or county map:

var stateMap = new Landline.Stateline(container, "states");

You can also pass your own data to the map by joining on two-digit or five-digit FIPS codes associated with states and counties. This is ideal for presenting census data (such as the income map on our demo page), which comes with FIPS-based geoids.

The state and county maps packaged for Stateline are in the Albers projection for the continental U.S., and respective state plane projections for Alaska and Hawaii.

Stateline requires Underscore, jQuery and Raphaël.

Although we're releasing Landline and Stateline to the public today, it's still very much a work in progress. One thing we’re considering is moving the library to TopoJSON, a lighter weight format for sending geographic data over the wire (as it stands, the prepackaged county file clocks in at around 800 kilobytes, which is a bit big for most web applications). We’d also like to build up our library of Stateline packages for maps of counties within individual states, and other countries. Want to help out? Send us a pull request!

Latest Stories from ProPublica

Current site Current page