Absolutely everything* you need to know about online mapping tools - The Lede Program

It can be a little intimidating to try to make an online map as a newbie. With a ton of tools that range in complexity and attractiveness, it’s easy to get caught up figuring out which path to take. Let’s break down 10 of the most popular tools for building online maps and figure out what’s best for you.

I talk about base layers a fair amount below – that’s just the map that’s underneath your markers, lines or polygons.

* “Absolutely everything” is perhaps an overstatement. I originally intended this to be a breakdown of all things mapping-related, but it turns out there’s far too much to say for one post. Stay tuned for later Data Work 101 posts^[3]!

Mapping Tool Roundup

SVG (Scalable Vector Graphics)

SVG is a image format that deals with shapes instead of pixels (more details here^[4]). If you had a map of the United States^[5], for example, each state would be a shape that could be edited individually. You could pick the Alabama shape and color it green, and then turn Connecticut orange and New Mexico purple. You’d need to use a vector editing program like Adobe Illustrator^[6] or Inkscape^[7] to do the coloring, but it’d be super simple and require no programming. When finished, you’d export to PNG and be on your way to mapping fame.

Pros:

• No programming necessary
• Dead simple – just point and click
• Easy to place text on top

Cons:

• Not scalable (imagine manually coloring all 3000+ counties in the US!)
• Imprecise, using a color gradient would prove a nightmare
• Updating the data would require you to color each and every area again
• Not interactive (unless you jump through a few JavaScript/browser compatibility hoops)

Best for: Simple, non-interactive maps of colored shapes (states, etc)

Google Fusion Tables

Google Fusion Tables^[8] are a simple way to create maps when you 1) have geographic data that either already has data associated with it or 2) have geographic data and associated data with a column in common. Based on the data, you’re able to set simple style rules like “color these in 3 groups” or “make everything above this value red.” The end result is a constrained but fully interactive map.

Pros:

• Interactive
• Geolocates address information
• Easily updated with new information
• No programming necessary

Cons:

• Customizing colors can be a pain
• Can only use default base map within Fusion Tables – stuck with that “Google maps” look
• Clunky interface
• When zooming out, shapes can disappear or convert to points

Best for: Creating interactive maps quickly, where beauty isn’t too important [Edit: just received an email from a former student saying that nothing he makes looks as good as Fusion Tables, so take from that what you will]

MapBox

MapBox^[9] is one of a few major online data-map hosts – you design a map using its tools, they host it, and you pay a subscription fee. In addition to its web interface, it also offers a few tools to style your maps on your desktop, such as TileMill^[10] and the newer MapBox Studio^[11].

Pros:

• Attractive default map styling
• Interactive
• Graphical interface for styling map
• Highly customizable
• Great for large data sets
• Lower-priced than CartoDB (below)

Cons:

• Costs money (pricing based mostly on traffic^[12])
• Need to learn a simple language to style maps
• May require complementary GIS software + skills (i.e. QGIS, ArcGIS) to connect your data to geographic data

Best for: Complex maps where you want precise control over styling, or need to use multiple layers of data

CartoDB

The other kingpin of the online mapping world is CartoDB^[13]. It allows you to update and edit your data on “the cloud” while styling to your heart’s content.

Pros:

• (Much?) easier to use than MapBox
• Simple-to-use choropleth^[14] styling
• Interactive
• Graphical interface for styling map
• Great for large data sets
• Highly customizable
• Attractive default map styling

Cons:

Best for: Data-heavy projects where you want full control over design

QGIS

QGIS^[15] is a free GIS (Geographic Information Systems) software package. In the data journalism world, it’s mostly used to manipulate data which can then be styled in something like Google Fusion Tables or TileMill. Plenty of folks in other fields use it for styling, though, so it’s worth a look. ArcGIS^[16] is the comparable non-free alternative GIS software.

Pros:

• Free
• Can use absolutely any geospatial data format
• Not interactive
• Can do a ton of mathematical/geographic heavy lifting – how many points are inside of polygons, etc

Cons:

• Technical interface is a little tough to use
• Unattractive styling by default

Best for: If you feel comfortable on the GIS data management end of things and don’t need interactivity

D3.js

D3 is a JavaScript library that is the reigning champion of custom interactive data visualization. Because you’re writing your visual from scratch, you can create everything from bubble charts to maps of the Ebola outbreak. Most all of the fancy visualizations that come out of the New York Times are D3.

Pros:

• Infinitely customizable
• Fully interactive
• Can easily connect to bar graphs, line charts, and any other visualization
• The world is your oyster, basically

Cons:

• Requires learning JavaScript
• If you know JS, there’s still a steep learning curve for how d3 deals with data and objects
• Probably overkill for simple projects

Best for: If you’d like to become a wizard who can do anything, but might need some time to implement your solutions

Leaflet.js

Leaflet.js^[17] is a JavaScript library meant for stacking map layers on top of each other and providing interactivity between them. If you know JavaScript, it’s a great middle ground between something constrained like Google Fusion Tables and something like D3 that requires a little more heavy lifting. It also can take maps you’ve created using CartoDB or MapBox and provide additional functionality on top of them.

Pros:

• Easy to use
• Interactive
• Can be used with CartoDB, MapBox, Google maps and more
• Flexible
• Open source
• Many plugins available
• Excellent documentation

Cons:

• Requires knowledge of JavaScript
• Might need to prep your data using GIS software like QGIS
• Might need to pay for a base layer

Best for: Multipurpose mapping solution if you don’t need a graphical interface like MapBox or CartoDB provide

Google Maps (JavaScript API)

Beyond serving you point-to-point directions, Google Maps has a developer API^[18] that allows you to create custom maps. You then use JavaScript to plug your data in on top of it, drawing and styling your points and layers. If you’re interested in another Google product that’s much more limited but doesn’t require JavaScript, check out Google Maps Engine^[19].

Pros:

• Easy to style basemaps^[20]
• Simple-ish to use
• Free (up to 25k views a day)
• Interactive

Cons:

• Requires knowledge of JavaScript
• Closed source
• Strongly discourages interaction with non-Google products
• Difficult if you need to migrate to another service

Best for: Free multipurpose mapping solution (although you’re probably better off with Leaflet). Google Maps Engine works well for small data sets where you don’t mind inputting markers and polygons manually.

Tableau Public and Tableau Desktop

Tableau^[21] is a desktop application mainly used to create embeddable graphs and charts, but it also has excellent mapping capabilities. While your work is all public when using the free version, students are able to get a free version of Tableau Desktop^[22].

Pros:

• Interactive
• Innately understands many areas of geography, like states, countries, counties, election districts (no geospatial data required)
• One tool to create different graphs, maps, etc from same  dataset

Cons:

• Private data costs money
• Branded display + vendor lock-in
• Closed source
• Can’t interact with any other tools
• Limited customizability

Best for: Quick turnaround time for US political maps when you’d rather not deal with geospatial files and don’t mind Tableau branding

OpenLayers

OpenLayers^[23] is a JavaScript library that can be used to create highly customizable online maps. It’s comparable to Leaflet and the Google Maps developer API.

Pros:

• Very customizable and flexible (moreso than Leaflet)
• Tons of specific examples
• Interactive
• Open source

Cons:

• Requires knowledge of JavaScript
• Somewhat-inaccessible documentation – while it’s complete, it’s designed for a developer audience
• While there are plenty of examples, you aren’t walked through them

Best for: Custom mapping solutions when you don’t mind getting your hands dirty, or need something Leaflet doesn’t provide

Conclusion

While there are gotchas, exceptions and learning curves galore, my overall recommendations are:

• Simple maps: SVG + Illustrator/Inkscape^[24] – it’s easy and not interactive, but that doesn’t mean it’s wrong
• Interactive data-driven web maps, free: Google Fusion Tables^[25] – they aren’t the most attractive maps on the planet, but once you get over the learning curve you’ll be cranking them out
• Interactive data-driven web maps, $$$: CartoDB^[26] – easier to use than standard MapBox, it’s just a pity it costs so much
• Interactive web maps with JavaScript: Leaflet^[27] (+ MapBox^[28]) – Leaflet beats out OpenLayers for simplicity and Google Maps for flexibility, and can leverage MapBox layers if you’d like more stylistic control

Did I pass over a favorite tool or miss a point here or there? Let me know in the comments below, or ping me at @dangerscarf^[29] or jonathan.soma@gmail.com^[30]. While you’re at it you might want to check out the rest of the Data Work 101 series^[31].

References

1. ^{^} Data Work 101: Absolutely everything* you need to know to work with code or data (ledeprogram.com)
2. ^{^} Absolutely everything* you need to know about picking a first programming language (ledeprogram.com)
3. ^{^} Data Work 101 posts (ledeprogram.com)
4. ^{^} here (seesparkbox.com)
5. ^{^} map of the United States (commons.wikimedia.org)
6. ^{^} Adobe Illustrator (www.adobe.com)
7. ^{^} Inkscape (inkscape.org)
8. ^{^} Google Fusion Tables (support.google.com)
9. ^{^} MapBox (www.mapbox.com)
10. ^{^} TileMill (www.mapbox.com)
11. ^{^} MapBox Studio (www.mapbox.com)
12. ^{^} mostly on traffic (www.mapbox.com)
13. ^{^} CartoDB (cartodb.com)
14. ^{^} choropleth (en.wikipedia.org)
15. ^{^} QGIS (www.qgis.org)
16. ^{^} ArcGIS (www.arcgis.com)
17. ^{^} Leaflet.js (leafletjs.com)
18. ^{^} developer API (developers.google.com)
19. ^{^} Google Maps Engine (mapsengine.google.com)
20. ^{^} style basemaps (developers.google.com)
21. ^{^} Tableau (www.tableausoftware.com)
22. ^{^} Tableau Desktop (www.tableausoftware.com)
23. ^{^} OpenLayers (openlayers.org)
24. ^{^} Inkscape (inkscape.org)
25. ^{^} Google Fusion Tables (support.google.com)
26. ^{^} CartoDB (cartodb.com)
27. ^{^} Leaflet (leafletjs.com)
28. ^{^} MapBox (www.mapbox.com)
29. ^{^} @dangerscarf (twitter.com)
30. ^{^} jonathan.soma@gmail.com
31. ^{^} Data Work 101 series (ledeprogram.com)