I like travel.
I always wanted an app to help me memorize all the extradinary experiences in every journey. There are plenty of travalling apps on the web but none of them match my imagination so far (yeah, I’m that picky). So why not develop one myself?
It is good to have an end to journey toward; but it is the journey that matters, in the end.
– Ernest Hemingway
D3.js & My Footprint Map
The first thing I tried was D3.js, which is for Data-driven documents. Its capability is far beyond making a map, and I have just explored the very little part of it. Mastering such a comprehensive tool would require so much effort, and I’m glad that I began learning it with a certain project idea in mind that offered extra motivation. The map I was going to make is my footprint of provinces in China.
The idea came from an image I saw on Couchsurfing for someone’s visited countires (like this). I have not explored many countries yet so I wanted to make one for visited provinces in China. I found one with similar idea but it possesses no interaction I desire (but it gave me inspiration and data).
My final map/app came out like this:
- It visualizes both the provinces and cities borders;
- you can pick your marking color for each provinces independently (according to your own logic);
- you can save it to .png image.
You can try making your own footprint map (by clicking the image or go to the Playgournd) and share it. Below are the key steps/obstacles during my development that would help in case you want to customize your own map for another country or the world.
The magic of D3.js
The data model confused me until I found the story of Three Little Circle by Mike Bostock, one of the author of D3.js. He also wrote a detail post about How Selections Work that I plan to take time reading/understanding in the future.
Data & TopoJSON
The provinces/cities data I got was originally in GeoJSON format, a subset of JavaScript Object Notation for geographic data. I converted it to TopoJSON using geojson.io (it’s actually a great online map data editor), mainly for smaller file size and faster rendering (but it requires additional topojson.js and GeoJSON is more widely supported).
P.S. This project also help me pick up some geographic knowledge, e.g., the different map projections (and Mercator is the one I use).
Colors & JSColor
I give each province a “checked” attribute that filling the path with default color when off and filling with the color I choose when on. JSColor is so handy as a color picker. After all, each color can be represented as a string like ”#fff” or ”#D2E4B4”.
Images & SaveSvgAsPng
It took me few days to figure out how to save the rendered svg (that’s what D3.js draws for geo-paths) to image, which is important for a closure since I don’t want to screenshot my work. Mike also wrote a post about direct conversion on Chrome but I found saveSvgAsPng more easy to use (and at least supports Safari as well). There’s a blog post explains how it works (the key is to convert it to a data URL and go get it).
More About Maps
D3.js is good at illustrating many kinds of data and statistics, but it’s not designed for maps. Frankly speaking, what it does is just visualizing the a bunch of shapes (and treat them as paths), which is a simple form of the vector map. But that’s not the map you used to see.
Actually, tiled map is the most popular way to display and navigate maps so far. To be more specific, it is the raster tiled web map, which delivers rendered images (usually PNGs) of adjacent tiles from a server to your browser that seamlessly joins them. You might already seen the tiled effect loading a map when the network is slow.
(Image from Wikipedia)
Another emerging method for dilivering styled web maps is vector tiles (a.k.a. vectiles), which is more of a hybrid of vector map and tiled map. It reduces data transfer greatly by making the client do the rastering.
During these days’ study of web maps, I’d like to view it as two major components: the data/service and the client. As a case of the vector map, the footprint map uses TopoJSON as data (local service) and D3.js as client. For tiled map, Google Maps has provided both data/service and client (API). Buth there are other players in the game, and I will introduce them shortly.
Misc
- mapshaper: line simplification tool of vector map for smaller file size and easier zooming, see this article for explanation;
- For other kinds of web maps, read the wiki page
- From Natural Earth you can acquire “free vector and raster map data at 1:10m, 1:50m, and 1:110m scales “.
OpenStreetMap - The Data
OpenStreetMap (OSM) might be the strongest competitor of Google Maps. The main difference is that the map data is collected by the people on the ground, like a Wikipedia of map, which means you can “take back control of your map”. That’s why it’s “rich and detailed”, and always up-to-date (the whole data updates every week for, and it’s now over 40GB of it). If you are still not convinced by those pros, Switch2OSM will explain to you “from first principles to technical how-tos”.
But how those tiled web maps work? First let’s see those conventions they follow:
- Tiles are 256x256 PNG images;
- The outer most zoom level 0 convers the entire world under Mercator projection;
- A single tile is replaced by 4 tiles when zooming in;
- The Z-X-Y scheme is used for accessing tiles through REST API.
To give an example, here’s the first tile of OSM - http://tile.osm.org/0/0/0.png:
Cool, it’s the whole world (well, actually not all of it as the latitude is limited to around 85 degrees). I have made a simple map client using the OSM data in the Playground (click the image also directs you there). This toy provides blunt interactions for navigating to any place you want theoritically, up to the max-allowed zoom level (don’t try keeping zoom in, as I have not tested the max yet and it will crash :P).
But if you want to build real apps upon it, keep in mind that the data and the service (or server) is not the same in this case, since OSM focus on letting people contribute the data and sharing them (that’s already great enough for a non-profit group, see the usage policy for more details).
Luckily, we don’t have to worry about serving the data since there are other groups just do it, some are combined with the client. So, next!
Waiting for part II :)