How to create Google Fusion maps that actually look nice

Fair warning: This post will include a snippet or two of HTML and Javascript. Don’t panic.

So here’s the thing: Google’s Fusion Tables is a fantastic free tool for mapping data, particularly when more advanced programs such as CartoDB and qGIS still scare you (=me). If you’re unfamiliar with it, data journalist Simon Rogers has published a great tutorial of how to use it.

There’s only one problem. Since every newsroom in the world is using the same tool, results tends to look very… generic. For instance, I recently made an interactive map for a story in the Hackney Post about Hackney’s claimant count being the highest in Greater London. Dandy, but when I simply use Google’s auto-version of the map, it looks like this:

fusion1

The colours are incomprehensible, there’s no legend… Definite room for improvement.

Luckily, there is a solution to this. It’s actually possible to tweak and customize your maps as much as you want.

Colours

First of all, and easiest: On a chloropleth map, we can change the colours of the polygons freely, and a great tool for choosing appropriate colour schemes for your data, whether it’s diverging or sequential, is ColorBrewer.

fusion2

Legend

Google’s Fusion Tables doesn’t automatically include a legend, but you’re pretty much always going to want one. Open “Change feature styles” and click on ”Automatic legend” to get that sorted.

fusionnew1

Background

Phew, piece of cake! Next we’re going to change the background of our map, which still has that very recognizable Google Maps colour scheme. Now, this bit does mean you’ll have to be able to look at a page of code and not run screaming in the other direction. If you’re somewhat familiar with the syntax of these languages, you’ll be absolutely fine. If not, take some deep breaths and you’ll still get through it!

1) When publishing your map, instead of grabbing that handy old Iframe code and embedding it into your article, you’re going to want to use the raw HTML code.

fusionnew

2) Paste it into any sort of text editor, such as Notepad or SublimeText (which I highly recommend for any sort of coding).

3) To customise the background colours, you can tweak freely using Google’s own Style Wizard.

fusion7

If you’re lazy, though (=again, me) a site called SnazzyMaps prepares ready-made templates. Whichever you use, you’re going to end up with a snippet of code.

Where to put it?

fusion5

4) Roughly one-third of the way through the code you’ve got in your editor (I’m using SublimeText, which is why everything is so delightfully colourful!) there’s a row that looks like this:

                     mapTypeId: google.maps.MapTypeId.ROADMAP

Add a comma to the end of that row and press enter. Then paste in your snippet of code from SnazzyMaps or the Style Wizard. Like so:

fusion8

That’s it! That’s all we need to be able to do with the code. My finished result, uploaded onto my website, looks like this:

fusionmap

 

Now, to keep it simple, in this example we only changed the background colours. Once you’re feeling comfortable with the code, you can of course tweak any part of it. Change the size of the map, add charts to your info-windows, change the legend (something you may notice I’ve actually done above)… The possibilities are limitless!

Is there anything you think I’ve missed? Let me know! Write me a comment, or tweet me @cguibourg.

Annonser

2 kommentarer

  1. tomfelle · oktober 15, 2014

    very useful, Clara!

    Gilla

Kommentera

Fyll i dina uppgifter nedan eller klicka på en ikon för att logga in:

WordPress.com Logo

Du kommenterar med ditt WordPress.com-konto. Logga ut /  Ändra )

Google-foto

Du kommenterar med ditt Google-konto. Logga ut /  Ändra )

Twitter-bild

Du kommenterar med ditt Twitter-konto. Logga ut /  Ändra )

Facebook-foto

Du kommenterar med ditt Facebook-konto. Logga ut /  Ändra )

Ansluter till %s