Mapping is all the rage on the Web these days, but it often involves complicated mapping servers, complicated features like zooming and tiling, and complicated coordinate systems.
Try answering this: how can I display a map of a country which shows a certain economic indicator (for instance, proportion of people with education) by administrative region?
Yes, you can fire up Mapnik, worry about OpenStreetMap layers and install server after server to preprocess and prepare the data. But I'm looking for a one-sentence answer.
I'll start with the fun stuff. Here's an interactive map, entirely public-domain. Play all you want, and "View Source" to play even more. Below, I'll describe how this came to be.
Source: 2001 Household Budget Survey
How it works
In broad strokes, you must:
- Create an SVG map of the area in question, entirely from closed path elements, with class attributes indicating the Region and District.
- Output all the data to map, as in the above table.
I suggest you "View Source" on this page if you want to follow along.
1. Create an SVG map
This will take some hunting, and I'm the wrong person to ask for advice. I created this map of Tanzania by running the mi2svg tool on a public-domain MapInfo (.mif) file from maplibrary.org, which I found by starting at OpenStreetMap's Tanzania wiki page. I tidied it up in Inkscape and removed Lake Victoria. It's a bit disappointing because most lakes and national parks aren't shown, and some of its administrative regions are missing or misspelled, but it's better than nothing.
Insert the SVG image into an XHTML document using an iframe tag.
I'm afraid I'm no expert on either SVG or mapping. I don't know any good sources for maps and I don't even know whether SVG can be embedded in HTML documents in the same way. I stopped when I got something that works for me.
2. Output the data
I can't help you find the data, either. Census data is always nice, and your organization's in-house data may be great.
- Parses the data from the HTML table (into an Object mapping "keys" to numeric values)
- Analyzes that data to find the maximum value (it assumes 0 is the semantic minimum) and does any necessary preprocessing so we get a quick function to map values to colors
- Walks through every path in the SVG document, looks up our value (using the path's "key", like the key in step 1), finds the color (using our analysis from step 2), and sets the fill color appropriately in the path's style
It's interactive. Just play with the values above and watch it work. Isn't it fun?
Advantages of SVG come for free: for instance, maps scale very nicely to large sizes and high resolutions. To render a PNG version, just use "Print Screen".
Every step is fast. The processing time scales linearly with the size of the dataset and the complexity of the SVG file. (Okay, the sort() I put in the analysis step doesn't technically scale linearly, but it's darned fast anyway.)
The data is open. You can just as easily set it up so that the data is a set of editable text-boxes or is one big CSV textarea. Imagine copy/pasting random spreadsheets into a page to produce maps. (The code, while simple, is not included here. Yet.)
The complex task of generating maps from data can be left in the hands of the slightly-computer literate. There's nothing more satisfying to a programmer than programming himself out of a task forevermore.
Great system, right? There are some flaws.
For one thing, Internet Explorer (up to version 8) doesn't support SVG. You'll have to find a workaround (complicated canvas magic? server-side SVG rendering?) which might remove interactivity. Or you can just ignore Internet Explorer or wait for people to take up Internet Explorer 9. (I used this particular map in an internal website at an office where nobody uses Internet Explorer.)
The SVG file is hard to get right: you'll find problems in any map data, and if you're trying to merge multiple maps (for instance, merging lakes and rivers with administrative regions) you might run into inconsistencies. I'm by no means an expert at generating an SVG map.
The more time you spend, the more ideal your SVG and dataset can become.
Finally, if you're trying to generate a map while keeping the data behind it private, this whole system will not work. If you "Print Screen" to make a PNG file, though, the PNG version won't carry your data table.
Still, it's easier than setting up a map server.
I can't think of another way to map data in such a quick and satisfying manner, either on web pages or in standalone applications. The concept and the code are simple and intuitive.
Internet Explorer may prevent this kind of map from adorning many websites, but intranets everywhere can use maps like this to bring data from complicated databases into simple graphics.
I declare this code to belong to the public domain in every way possible and in every country. Use it however you want without fear of reprisals from me (though if you seek to use these ideas or any others to plan raids and bombings, I urge you, on a more personal level, to reconsider your ambitions).
If you'd like me to share the code with you under a more restrictive license, send me the license file and I'll probably agree.