Subway Map

HTML

<script src="http://dnnbook.com/Portals/0/jquery.subwayMap.js"></script>
<div class="subway-map" data-columns="26" data-rows="11" data-cellsize="36" data-legendid="legend" data-textclass="text" data-gridnumbers="true" data-grid="false" data-linewidth="8" data-reversemarkers="false">

  <ul data-color="#ff4db2" data-label="Community Teams">
    <li data-coords="6,4" data-marker="interchange" data-markerinfo="v5">Quality\nAssurance</li>
    <li data-coords="3,4"></li>
    <li data-coords="2,5" data-dir="W"></li>
    <li data-coords="2,6" data-marker="@station" data-labelpos="e">User\nExperience</li>
    <li data-coords="2,8" data-marker="station" data-labelpos="e">Extensions\nForge</li>
    <li data-coords="3,9" data-dir="S"></li>
    <li data-coords="4.5,9" data-marker="@station" data-labelpos="s">Internationalization</li>
    <li data-coords="6,9"></li>
    <li data-coords="7,8" data-dir="E"></li>
    <li data-coords="7,7" data-marker="station" data-labelpos="e">Health</li>
    <li data-coords="7,4" data-marker="interchange" data-markerinfo="v2" data-labelpos="se">Security</li>
    <li data-coords="7,1" data-marker="interchange" data-labelpos="e">Reference</li>
  </ul>

  <ul data-color="#3058a9" data-label="Places">
    <li data-coords="9,9" data-marker="interchange">Forums</li>
    <li data-coords="9,8" data-marker="@interchange" data-labelpos="e">Blog(s)</li>
    <li data-coords="9,4.5" data-marker="@station" data-labelpos="e">Flickr</li>
    <li data-coords="9,2.5" data-marker="@station" data-labelpos="e">Vimeo</li>
    <li data-coords="9,2"></li>
    <li data-coords="9,6" data-marker="@interchange" data-labelpos="n" data-markerinfo="h13"> </li>
    <li data-coords="10,1" data-dir="N" data-marker="station" data-labelpos="s">Wiki</li>
    <li data-coords="11.7,1" data-marker="@station" data-labelpos="s">Microsoft</li>
    <li data-coords="13,1"></li>
    <li data-coords="14,2" data-dir="E" data-marker="station" data-labelpos="w">Facebook</li>
    <li...

CSS

.subway-map {
    clear: both;
    margin: 0;
    width: 950px;
    height: 440px;
    background-color: white;
  }

  .text {
    font-family: Verdana;
    font-size: 8pt;
    text-decoration: none;
    color: black;
  }

  #legend {
    float: left;
    width: 250px;
    height: 400px;
    margin-top: 35px;
  }

  #legend div {
    height: 25px;
  }

  #legend span {
    margin: 5px 5px 5px 0;
  }

  .subway-map span {
    margin: 5px 5px 5px 0;
  }

  #main {
    width: 950px;
  }

JavaScript

$(function() {
  $(".subway-map").subwayMap({
    debug: true
  });
});