Great Open Source Map Tools for Web Developers

Page 2 of 3

TileMill If you're a Web programmer who loves maps, you'll find TileMill to be the greatest combination since electricity met semiconductors. The tool combines open source data with a language for controlling how the data is rendered. When you're done, TileMill will spit out all of the tiles that your mapping application presents to the user.

The core of the product is Carto, a language for describing how the fonts, lines, and colors are combined. It is, for most intents and purposes, a version of CSS. You design your maps with the same corner of your brain that you use to determine the look for your Web pages. If you want the major streets to be thicker, you bump up the number next to the CSS-like parameter "line-width."

TileMill turns open source data about the world into map tiles that allow you to customize (or experiment with) the look of your maps.

There are also a wide variety of open data sources to drive your fun. I started poking around and was soon putting labels on railroads all over the United States. The software pulled the numbers from a large collection of open data sets.

TileMill offers a surprisingly large range of options to the map designer, and the tool makes it quite easy to produce a map with just a few clicks. The trouble is that it's quite hard to produce something beautiful. It might be cheaper to hire someone with real talent.

More mapping sources If you're building your site or application out of the Ext framework, you'll want to look at GeoExt. The code will fill a panel with data from OpenStreetMap, then let you add your own layers and pop-ups to make the maps more presentable. The best class name may be the Symbolizer, which lets you put arbitrary vector shapes in a layer floating above the map. The code is available with a BSD license.

Most of the mapping systems serve up tiles rendered at the right resolution. It's a sound approach that allows the rendering algorithm to move quickly, but it's not particularly efficient if users zoom in and out.

JQVMap is a collection of vector outlines of the major countries embedded into a jQuery plug-in. You install it in your Web page and point the code at a DIV, which is then filled with a zoomable map. The parameters let you choose the colors and add mouse-over overlays. It's a simple way to let someone select a country by clicking on a map.

Modest Maps is a solid, basic API for putting up a map in a DIV. It's like Google Maps, but open source. You point the API at your DIV and choose a source of map tiles; Modest Maps pretty much does the rest.

Modest Maps works well with the different tile providers, which often share the library themselves or use it as a building block. HTMAPL, a tool for writing your map code in HTML and jQuery templates instead of pure JavaScript and HTML, is one of these.

HTMAPL is a jQuery plug-in that pairs HTML with Modest Maps to streamline Web mapmaking.

A skilled artist can work wonders with the OpenStreetMap data. Some of my favorites come from Stamen, a general design studio that has been releasing the tiles under a Creative Commons license. The Terrain maps are nice, but the watercolor maps are eye opening. The colors run together as if they were painted by hand with a messy watercolor brush.

Here are some examples showing the Black and White "Toner" tiles, Watercolor tiles, and Terrain tiles.

Most of the mapping tools are built with Web technology stacks because most people assume the maps will be consumed by mobile browsers. MapNik is written in C++ for desktop users, although it offers Python bindings that might be used in browser-based applications.

The code is essentially a big pipe for juggling geographic data and feeding it into the AGG rendering library, the "antigrain" tool that does a great job with antialiasing. The quality shows too -- MapNik maps have some of the most pleasing details I've seen. Google has been a big supporter of this project during recent Summers of Code, and I hope that continues. Desktop users need maps too.

| 1 2 3 Page 2
Shop Tech Products at Amazon