Skip to content
Jason Aller edited this page Mar 13, 2015 · 4 revisions

Map files can be created via any SVG editor.

Adobe Illustrator has produced maps that are in production. Inkscape was found to add extra elements and attributes to the .svg files.

Overview

The map file should have a background graphic to provide spacial context. We've had good luck with reasonably high resolution .png files.

Then on top of this the rooms can be traced as paths which can either be filled or just the outline of the room. The rooms then should be made clickable and have an id attached. These could either be visible, or not depending on your needs

Doors are line segments that represent endpoints on the map. They have ids that are the same as the rooms (the non-xml use of duplicated ids is handled by the code). One end of the line should have x and y coordinates that match the same coordinates of a path segments. These will be hidden by the code.

Paths are line segments without any id. They work by joining ends with matching coordinates. These are hidden by the code.

If the routing will involved more than one map, for example multiple floors then portals which are like doors need to be added. They too will be hidden by the code.

Structure

Within the SVG file there should be group elements for Rooms, Portals, Doors, and Paths under the root element. There can be other elements to hold the graphical representation of the map.

Base graphic

This provides the base map on top of which everything else is drawn.

<g id="Base">
    <image overflow="visible" opacity="0.35" enable-background="new" width="3400" height="2200" xlink:href="images/floor_0.png" transform="matrix(0.3556 0 0 0.3556 55.8589 21.1343)"></image>
</g>

Rooms

The Rooms group should consist of <a> elements that identify the room and make it clickable.

<g id="Rooms">
  <a id="lobby_1_" xlink:href="#" >
    <g>
      <rect x="279.5" y="399.5" fill="#E6E6E6" width="44" height="26"/>
      <path d="M323,400v25h-43v-25H323 M324,399h-45v27h45V399L324,399z"/>
    </g>
  </a>

In Illustrator 4 the Attributes window has a URL field that should be set to "#" in order to make rooms clickable.

Attributes URL dialog

The Layers windows will allow you to give id's to groups or elements:

layers window

Double clicking on an entry in the layers window brings up this options dialog

options dialog

Portals

Portals do not display on the map, but provide a point at which maps can be joined so that travel from one map can continue onto another map.

<g id="Portals">
  <line id="Elev.1.floor2" fill="none" stroke="#FF00FF" x1="297" y1="237" x2="315" y2="255"/>
  <line id="Stair.1.floor2" fill="none" stroke="#FF00FF" x1="297" y1="273" x2="288" y2="273"/>
</g>

In this instance we see two portals Elev.1.floor2 and Stair.1.floor2. The naming is to determine the portal type Elev, Stair, or Door where elevators and doors are presumed to be accessible and stairs are not. The next element is the identifier for a particular portal. If there are two stairwells in a building all of the stairs in a stairwell would share a common identifier. The last element is the name of the map to look for the connecting portal on. For instance Elev.1.floor2 on the first floor map would connect to Elev.1.floor1 on the second floor map.

Doors

Doors identify travel origins and destinations. Every Room element should have at least one door element.

<g id="Doors">
  <line id="lobby" fill="none" stroke="#00FF00" x1="297" y1="408" x2="306" y2="417"/>
  <line id="R121_1_" fill="none" stroke="#00FF00" x1="117" y1="156" x2="126" y2="165"/>

The identifier for a door line element is used to target it for routing.

Paths

Paths connect to other paths, doors and portals. The endpoints must have exactly matching x and y values.

<g id="Paths">
  <line fill="none" stroke="#00FFFF" x1="297" y1="273" x2="315" y2="273"/>
  <line fill="none" stroke="#00FFFF" x1="342" y1="264" x2="342" y2="336"/>

Clone this wiki locally