There’s something very appealing about the design of the London Underground (PDF) Tube maps. The design has spawned plenty of spinoffs, and is in demand for all types of projects. If you’re looking to include something similar in your own project, Nik Kalyani has produced a jQuery plugin that you can use to create your own.

Kalyani writes “with the advent of HTML5 <canvas> element and jQuery, I felt it was now possible to implement this in a way that with a little bit of effort, anyone who knows HTML can easily create a subway map. I felt a jQuery plugin was the way to go as I had never created one before and also it seemed like the most well-suited for the task.”

The markup for the elements on the map requires a div with attributes specifying the number of rows and columns for the map, the size of the cells and to describe other elements of the map. (For instance, whether the grid and grid numbers are shown on the map.) The data labels and colors are specified with ul elements, and the coordinates for the lines and locations are specified with li elements. It might take a little bit to play with the markup, but Kalyani has done a great job of explaining the markup and providing a reference. It shouldn’t take long at all to produce an attractive map.

If you want to check out the handywork, there’s a example that lays out the DotNetNuke ecosystem using Kalyani’s plugin. Note that the map on the page (also shown here in a screen grab) is not an image, but a map rendered with the plugin. You can select any of the text on the page, and some of the text has hyperlinks, which makes this a much nicer format for the Web. (Also probably more pleasant than doing an imagemap.) The plugin is available under an MIT type license, so you should be able to use it on any project your heart desires.

joe brockmeier 1