How to make a map

Posted Saturday, July 25, 2009 at 2:57 p.m. by Chris Amico in Projects about code, data visualization, JavaScript, journalism and maps

Note: I wrote this up to help out a few colleagues a few months ago, and I thought it might be useful to more people. It's aimed at regular, non-programmer journalists who may at some point need to throw a quick map alongside a story (or by itself, that's cool, too). Obviously, this is in no way comprehensive.

Also, this is a snapshot version of a document being maintained in Google Docs. Check here for the latest.

In all cases, start with a spreadsheet (preferably using Google Docs ). This will ultimately make your life easier, even if you're simply pasting in values. Starting with structured data means you always know what's what.

Another thing you'll probably need at some point: Geocoders. Geocoding is a process of assigning a longitude and latitude to a physical address. Two useful tools are and Google's batch geocoder.

Quick tools for news you can use

Zeemaps

This is what we used to create the Obama Euro-trip map. Export your spreadsheet as a comma-separated values (CSV) file. Upload to Zeemaps (requires a free account) and you'll receive an email within one hour pointing to your finished map.

Lat/Lng fields aren't necessary with Zeemaps but geocoding tends to be more accurate if you do it yourself. The more obscure the locations (for example, smallish cities in China) the more likely you'll want to geocode locations yourself.

Zeemaps has a handful of features that might be useful depending on the project. It can output a PDF or JPG version of a map for $1, and it can be embedded as Flash or in an iFrame, which makes it a bit more versatile than most apps.

It's also possible to open a Zeemaps map to public editing, making it effectively a map wiki. You can moderate submissions, though there isn't much instruction. Check under settings > privacy and add an admin password to make sure you know who's editing your map.

Atlas

Easy, basic, Atlas will get you a map without much hassle. It's not as feature-rich as Zeemaps and doesn't always geocode as well, but it's probably easier to start with. Like Zeemaps, it can be collaborative and is probably a little easier to moderate.

Google MyMaps

Google MyMaps will let you do most anything the public API allows, but it's not always easy. There's no obvious way to bulk upload data, meaning it's usually better with fewer locations.

MyMaps allows collaboration in much the same way as Google Docs. You can invite collaborators or allow anyone to edit.

A little more complicated, but still code-free

The "code-free" map

Erica Smith at the Post-Dispatch likes this method more than I do. It will get you a map in a hurry, and it should be possible to add or update content. It does require longitude and latitude fields. You can get there with something like geocoder.us or use Google's batch geocoder.

Yahoo Pipes

Pipes is pseudo-programming, which makes it both more powerful and more complicated.

The trick here is getting clean data in, geocoding, then outputting a map. As usual, start with your spreadsheet. If you've already geocoded the data, you're halfway there.

  1. Start with your spreadsheet. Make sure location fields are clearly marked, either as addresses or lat/lng.
  2. Publish your spreadsheet as CSV, RSS or ATOM.
  3. Go to http://pipes.yahoo.com and create a new pipe
  4. Depending on what format you published your spreadsheet, use either Fetch Feed or Fetch CSV. Paste in the URL for your CSV or feed.
  5. Use the Location Extractor (under Operators) to isolate location data in each feed element. You may also need to use Rename.
  6. Output your feed and click on the Map tab.

Here's another trick I like: Scrape a table from Wikipedia, publish it as a spreadsheet, map it with Pipes.

And then there's JavaScript

If you want to get into serious, totally custom, exactly-like-you-want-it maps, and you're not afraid of a little code, check out the Google Maps API. You'll need an API key (free). There are two useful tutorials.

  1. Google Maps API tutorial: This will run you through the basics of creating a map with JavaScript. Look at the examples and check out the source code.
  2. Maps API Documentation: Less a tutorial than a description of all the inner workings of the code. I find it more useful when I have a specific task and want to know how to do it.

In both cases, it'll be easier if you have a basic understanding of JavaScript syntax.

More Maps

There are other tools out there. You can find them in the toolkit.

Finally, if you've made it through all that and really want to go crazy, roll your own maps.



Comments:

jul 31, 2009 at 2:21 p.m. // Pankaj K Garg said:

Hi Chris,

Thanks for the write-up and glad you are using ZeeMaps. Based on your blog entry we finally added a feature to ZeeMaps that we've been wanting to add for a long time: direct import from Google Spreadsheets.

Now, you can select Additions -> Upload CSV file and just click on "Use Google Spreadsheet" to upload your data from a Google Spreadsheet.

The requirements are: (1) the spreadsheet must be named ZeeMap-map-number, where map-number is the number for your map, and (2) you must allow zeemaps at gmail dot com view access to the spreadsheet.

Hope this makes it a bit easier to work with ZeeMaps.

Please let me know if you have any suggestions or feedback.

Pankaj

aug 14, 2009 at 9:43 a.m. // Pankaj K Garg said:

Another note ... we now use a better Geocoding service in case you have street address. It will be slower but more accurate.

Pankaj

Comments are closed for this post. If you still have something to say, please email me.