Map Experiments

There are quite a few different ways to create interactive maps, and for certain use cases some are more suitable than others. So the question is: What to use when?

So far I tried working with those different kinds:

Use cases for maps can be:

Those are the examples that come to my mind, I'm sure there are many more. I've tried using maps in several of those use cases:

D3 maps

A very good introduction, as always, is given by Mike Bostok in his tutorial "Let’s Make a Map". There he shows how to use TopoJSON (an extension to GeoJSON). TopoJSON is much lighter, because all redundant paths are eliminated - so instead of drawing one closed shape for each country, and then again for the neighbour country, borders are only drawn once. And there are more techniques to reduce size of those huge JSON files, by abstracting the shapes to an appropriate resolution. So if you show data that compares the averaged values of the provinces in Canada, you don't necessarily need the complete coastline and all tiny islands along the Sunshine Coast in BC. So you could dramatically decrease the file size by using Visvalingam’s algorithm, as Mike Bostok describes here. Mapshaper helps you do that.

My test case was to visualize data about maple syrup production in Canada. The project is unfinished (and uses GeoJSON instead of TopoJSON), but it still shows the huge difference in file sizes. Here's the raw canada.json (1.9MB), and that's the reduced one (51KB) - the TopoJSON file in this case would have a size of 15KB!!

TL;DR: Setup may take a while. Also wrapping head around GeoJSON and TopoJSON. But then: Everything is possible in D3.

Leaflet + Mapbox.js

Leaflet is "an open-source JavaScript library for mobile-friendly interactive maps". It works by sending requests for tiles to servers like Mapbox and enables animation, interactivity and all kinds of styles. It's super easy to get started if you use it together with MapboxJS - a JavaScript library that builds on top of Leaflet.js and uses vector maps. To get an Access Token you have to sign up at Mapbox, but it's for free as long as your map doesn't have more than 50,000 views per month. Creating custom icons to place on the map, or drawing panes is a walk in the park too. Everything is very well explained and documented.

My first usage scenario was to display some live GPS data. The integration was super fast, you just hand over the latitude and longitude. Mapbox offers many really nice default styles, and you can even create you very own one, using the Mapbox Studio.

TL;DR: You rely on map providers and given options - which are many, but ultimately it is limited. For most common cases very comfortable though.

Kartograph

Developed by Gregor Aisch back in 2012 (now he's graphics editor at the New York Times), Kartograph lets you build beautiful, interactive vector maps. "It was created with the needs of designers and data journalists in mind" he writes. I wrote a short article about it once, for t3n - one of Germany's technology magazines.
Kartograph.py, a Python library, lets you generate the customized underlying maps. But you can also use existing SVGs and quickly build interactve maps with Kartograph.js (build on Raphaël and jQuery). "La Bella Italia" is my favourite example.
I didn't have the chance yet to use it for an actual project and only played with the examples so far - but they look amazing! And the code not too complicated.

TL;DR: Check out the Showcase! Beautiful maps if you want to avoid the Google Maps look.

SVG map

That is probably the least accurate and most wobbly example. For implementation I also used D3, but not in the designated way. I first drew the map manually in Illustrator to get the triangle world map that I wanted. (Geographic details are pretty much ignored there. And no borders.) Then I exported it as SVG and used those paths as input. I chose this approach because in this case it was not about accuracy, but rather about giving a rough overview of locations and about a cool animation.

TL;DR: Suitable if it's not about accurate geography. And if you like animations and doing stuff in Illustrator.

Tableau

In this case I used Tableau Public as base for a static map. Probably not the designated approach either, but one I could imagine happening in a graphics department. Here's the interactive version.
If you have used Tableau before you may know about the straightforward data integration and Tableau very comfortably recognizes names of countries and does the mapping automatically.

My use case is data about participants of a data journalism award and the winners. The data set is manually generated based on the Shortlist of the award. I decided to do the labelling of the winners in Illustrator, after a few attempts in Tableau failed. And the drag and drop positioning and freedom in choice of symbols is just the easiest in Illustrator - or just a matter of preference.

TL;DR: Tableau does many things automatically as soon as you have your data in a proper shape. Very comfy, but if you want to customize a lot it can become a little cumbersome.

Google Maps

Admittedly a while ago, for my very first map project I used the Google Maps JavaScript API. I remember it being fairly easy to use for the basic features - like setting markers, changing their styles and drawing paths and integrating it into your website. Since the documentation is great, it's probably easy to do much more with it too. The only time I used it was for this study project.
I can imagine it being very handy when you only quickly want to show a location, e.g. for a restaurant's or hair dresser's website. Everybody is familiar with the look and the behaviour of Google Maps, so users can quickly find out themselves how to get there. If you want to do something more exotic though, I think one of the other tools would be a little more exciting.

TL;DR: It probably is the most familiar look of a map - if that is good or bad depends on the use case.

Those are the techniques that I have checked out so far, but there for sure are many many more. Just to name a few: CartoDB, Mapjam, Stately (interesting approach! Only US states though), Modest Maps. Here's another nice overview by Hongkiat: "13 JavaScript Libraries to Create Interactive & Customized Maps".