Home Create Subway Maps with jQuery Plugin

Create Subway Maps with jQuery Plugin

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.

About ReadWrite’s Editorial Process

The ReadWrite Editorial policy involves closely monitoring the tech industry for major developments, new product launches, AI breakthroughs, video game releases and other newsworthy events. Editors assign relevant stories to staff writers or freelance contributors with expertise in each particular topic area. Before publication, articles go through a rigorous round of editing for accuracy, clarity, and to ensure adherence to ReadWrite's style guidelines.

Get the biggest tech headlines of the day delivered to your inbox

    By signing up, you agree to our Terms and Privacy Policy. Unsubscribe anytime.

    Tech News

    Explore the latest in tech with our Tech News. We cut through the noise for concise, relevant updates, keeping you informed about the rapidly evolving tech landscape with curated content that separates signal from noise.

    In-Depth Tech Stories

    Explore tech impact in In-Depth Stories. Narrative data journalism offers comprehensive analyses, revealing stories behind data. Understand industry trends for a deeper perspective on tech's intricate relationships with society.

    Expert Reviews

    Empower decisions with Expert Reviews, merging industry expertise and insightful analysis. Delve into tech intricacies, get the best deals, and stay ahead with our trustworthy guide to navigating the ever-changing tech market.