Skip to content

Creating floor maps

Interactive floor maps are an advanced feature of Awesign. They take considerable effort to configure, but they're very impressive once complete.

Floor maps are part of the buildings configuration section. The configuration is described in Configuring buildings. Here's a brief example that doesn't include every field:

  buildings:
    - name: my_building
      display_name: My Building
      formal_name: My Building Hall
      floors:
        1:
          floor_name: "First Floor"
          floor_image: "mybuilding1.svg"
          map_data: { "points": { } }

Vector background image

The first step to creating a floor map is to draw the map "background" image. Use a vector editor, such as Inkscape, to trace the official floor plan of a building.

  • For consistent scaling of maps throughout Awesign, export the page rather than the document to include a margin around the floor plan.
  • Leave about a 10% gap between the border of the document and the floor plan on each edge of the page.
  • I wouldn't recommend putting any text on the image, as it will scale with the graphic as users zoom in; text should be added to the map in a later step.
  • Choose a consistent floor color and wall color for each floor map.
  • Stairs should be indicated with lines, and doors should be open gaps in the walls.
  • Export the page as an SVG with a width around 1056px at 96 DPI. Remove any tracing layers that shouldn't be in the final version. (Hiding a layer isn't sufficient, at least in Inkscape)

Place the final SVG file in data/backend/static_secure/maps. Maps are considered sensitive information, so this location restricts access to sign users only. This directory should be created automatically, but you can create it yourself if not.

Interactive map builder

We'll use Awesign's interactive map builder to create the map_data object to paste into the config.

Run the project in development mode and navigate to /dev/map-builder in your browser.

  • Sign in as a sign user
  • For "Map file name," input the name of the vector from the previous step (just the file name within the maps directory, not a full path). It will load below immediately.

There are three tabs of tools to the left of the map.

Create Points

Use the "Create Points" tab to add new points to the map.

  • "Point type" can be "hallway" or "destination". Use "hallway" for points that just connect multiple points together. Use "destination" for a location worth highlighting.
  • "Name" is a technical name to connect the location to backend data. It should match the name of a room in the building configuration or the name of a room from a department directory. (E.g., "101a")
  • "Label" is what will be shown on the map at that location. (E.g., "101A")
    • An additional longer "alt label" will automatically be applied by the backend if possible. The label here should be short.
  • "Force X position" and "Force Y position" along with their numerical values can be used to quickly align multiple points in a row or column. When a point is created and one of these is checked, it will override the X or Y position with the one you enter.
  • "Min scale" and "Max scale" determine at what zoom amount the point will be visible.
  • "Full detail scale" determines at what zoom amount the room description will be revealed.
  • "Max width" sets the maximum width (in pixels) the label will occupy. This is useful to prevent overlapping.
  • The "Copy selected point's options" button will copy the currently selected point's location, type, and scale values into the above fields.
  • Once these fields are populated appropriately, click somewhere on the map to add a point. You can always edit these values later.

Edit Points

Use the "Edit Points" tab to modify existing points on the map.

  • Click a point on the map to select it. It will get brighter to indicate it's selected.
  • You can change the type, name, label, X, Y, min scale, max scale, full detail scale, and max width in real time with the options on the left.
  • You can also click and drag the points to a new location while this tab is active.
  • "Recompute connection weights" will automatically set the weights of all connections involving this point based on their distance. (The next section will discuss connections)
  • If you enable "Allow dangerous actions," you can click "Delete selected point" to remove it from the map.
  • At the bottom, you'll see a list of points connected to the current point with their weight (connections are discussed below). You can hover over a point in the list to highlight it on the map.

Connect points

A map is functional without connections, but connections take it to the next level. Optimal paths will be calculated and displayed, if possible, when users are looking for a specific room.

Use the "Connect Points" tab to create connections between points.

  • The left pane will guide you on what to do. By default, you will select the first point, select the second point, and repeat for all the connections you want.
  • "Chain mode" will automatically set the first point to the previous second point when you create a connection, so you can quickly connect an entire hallway.
  • "Create bidirectional connection" allows a path to be constructed both ways. If you have a door that only functions as an exit, uncheck this, and keep the direction in mind. The map displays arrows to indicate the connection's direction.
  • "Compute weights automatically" uses the distance between the points to determine the cost of that connection. If you uncheck this, you can enter a weight manually below and then create the connection.
  • The "Reset point selections" button begins the wizard again, resetting your first and second selections, so you can start somewhere else on the map.
  • If you enable "Allow dangerous actions," you can click "Recompute ALL connection weights" to do exactly what it says.
  • Points will be shown smaller in this mode for better precision.

Export the map

At the bottom of the page, you can click "Copy JSON to clipboard" to get the map_data object to paste into the configuration file.

Import a map

You can edit a previously saved map by pasting the JSON object into the "Load map data from JSON" field at the top and clicking "Load".