Create Your Own Subway Maps

January 24, 2012

This week we have a real treat for you - a Subway Map Visualization jQuery Plugin. What the heck does that mean? It means that you can build your own custom maps and use them in your open source digital signage Presentations!

Get started with Rise Vision

I like to take things for a test drive before recommending them to our dear readers. So my goal this time was to recreate a section of the TTC (Toronto Transit Commission) subway map. In particular, this is what I was hoping to recreate:

In a nutshell, here are the steps you'll need to take in order to create a custom map (for a more detailed description, see the Step-by-Step Guide):

  • Download the plugin from here and upload it to a host server.
  • Include the plugin in the Presentation's HTML:
    <script type="text/javascript" src="path/to/jquery.subwayMap-0.5.0.js"></script>
  • Create the HTML markup that the plugin requires as outlined in the Step-by-Step Guide.
  • Initialize the plugin by including the following code immediately after the body tag:
    <script type="text/javascript">
    $(function() {
    $(".subway-map").subwayMap({ debug: true });
    });
    </script>
  • Add CSS to style the map.

Here is what my Presentation looked like after integrating the plugin:

Not too bad, right? There is one caveat to using this plugin, and that is that it doesn't work well inside of a Placeholder. You'll need to forego using a Placeholder if you want the labels to line up with their markers.

In addition to maps, there are many other creative ways that this plugin can be used. Visit this web site to see more examples. If you decide to give this a go, expect to spend a bit of time getting your map to look exactly how you want it. I'm sure the results will be worth it!