Make Cool Interactive Maps with Polymaps

by Lisa Hoover - Aug. 25, 2010Comments (0)

Whether you want to display an interactive map of local farmers' markets on your blog or you're trying to put together a clickable map displaying branch offices on your corporate Web site, there's a good chance Polymaps can help you get the job done. It's a free, open source JavaScript library for making dynamic maps in a Web browser.

Polymaps uses cartography from OpenStreetMap, Bing, and other image-based Web map providers, and also supports visual presentations for tiled vector data. The application uses Scalable Vector Graphics (SVG) to display information so you can use CSS rules to easily design your map.

Polymaps was developed with an eye on speedy performance. If you've ever used Google Maps over a bad Internet connection and waited endlessly for a map to reposition itself after zooming in, you know how slow the process can be. Polymaps caches tiles so if it's needed again the tile is pulled from the recent cache instead of the server. If the tile isn't available in the cache, adjacent tiles are temporarily rescaled until the needed tile becomes available. Polymaps has a bunch of other tricks up its sleeve for making the whole process of zooming and panning a smooth experience for the user.

Check out examples of some of the ways Polymaps has been used to construct clever maps with a variety of overlayed data. The source code for each example is available right on the Web site, so if you see something you like, feel free to grab it, tweak it, and make it your own. If you're new to interactive map-making, be sure to check out Polymap's extensive documentation.