Skip to content

Map

Jump to bottom
Zhao, Xuan edited this page Dec 4, 2020 · 32 revisions

Navigation

User Guide

Methods

Applications

Developer Guide

Clone this wiki locally

Description

Map tab provides an overview of the whole campus. User can see basic information of every building on the map. Users can customize their searches through 4 inputs selection. Based on the user's selection, the main panel will display a map with different markers or a table with just data. The map tab appears when first opening studysafe website. It can answer users several questions, like: Where is safer place to go right now?

Functionality

Interface Overview

  • When opening the website, the Map tab appears first. However, if user is on the other tab, hamburger (red circle) can be used to navigate between tabs.
  • There is a short tutorial (red rectangle) to teach users how to use map tab, and user can hide the tutorial anytime by clicking "-" in the upper right corner.
  • A selection panel (blue rectangle) is used to let users customize their inputs selection so that they can see different result map according to their needs. Map interface

Input Selection

Users customize their searches using the following 4 selections:

  1. Choose a display: Map or Table
    • Map: Show the map with markers with different colors.
    • Table: Show just data which has features: Total number of users, Max number of users, and Percentage of max.
  2. Choose a date: Select a date that you want to see the information on.
  3. Choose a time: Select a time that you want to see the information at.
    • User can also click "NOW!" to update date and time to latest automatically
  4. Choose a Building: Select a specific building, and then the marker corresponding to that building will change to star on the map.
    • This input selection is designed for users who cannot find the position of building they want to go on the map.

After selecting all inputs, user need to click "Update Graphs" to update the map unless user click "NOW!" to update date and time to latest.

Map display

  • The map has lots of markers with different colors, so there is a color legend (red rectangle) to show the meaning of colors. The percentage means how much the number of people in the building at this time compare with max users of the building through the semester. In the formula, (number of users/max number of users)*100%.

  • Users can zoom in or out to find buildings using "+" and "-" (blue rectangle) or just using mouse.

  • Users can click a marker to see the basic information of that building. After clicking a marker, there is a pop up (magenta rectangle) to show the info. Map

  • It may be hard for some users to find the building they want to go. Then they can choose the building name (blue rectangle) so that the marker corresponding to that building will change to star (magenta circle) on the map, which is very obvious. Also there is a new legend (red rectangle) to show the star marker. Besides, the color of star still represents the percentage of capacity. Map star

  • For the pop up, user can click "here" to jump to "Find a Place to Study" tab to see more information of that building.

Table display

  • Table contains the basic information of all buildings. User can search building's name or type to see the building's info. Map table