Finally, 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. My goals:
Anyone should be able to create a beautiful, interactive subway map visualization for their website using HTML markup
The map should be as faithful as possible to the London Underground map style with smooth curves and interchange connectors and 45-degree diagonals
The map size, line width and colors should all be customizable
Stations, interchanges and linked interchanges should be distinguishable from each other
The markup used to create the map should be search engine friendly
With these goals in mind, I started creating my jQuery plugin. A few days of concentrated effort later, I had a working subwayMap plugin and am quite pleased with the result. You can download the plugin below and documentation follows in this post. I hope you will give the plugin a try and find it useful.