Getting Started

• The first thing you will need to do is to load the simple_map_diagrams.js script into the HTML file of your webpage. It includes the code for the core functionality of the Simple Map Diagrams Library that is required before you can start using it.

• Next, the simple_map_diagrams.css file needs to be linked into the HTML file. It provides all the styling used by the Simple Map Diagrams library.

• And that's it! No other external modules or libraries are needed. Simple Map Diagramss uses Vanilla JavaScript only.

Now that you have the Simple Map Diagrams code loaded in, you can start adding maps to you webpage! In a separate script, you may instantiate and set up an instance of Simple Map Diagram as follows:

const smd = new SimpleMapDiagram(10, 5, 'sample title', 'sample description', 'example1')


This call will go through a series of tasks to set up all the necessary objects and containers needed for the map, and add it to the document, under the container specified by the given id (in this case, the element with id 'example1'). Once this is done, you are ready to start customizing the map! See the list of API functions below for instructions on how to do so.

---

List of API Functions

smdInstance.defaultSetUp()

• Completes a default setup of the map diagram, including all available features. You may choose not to use this function, and instead add individual features separately. This gives you the freedom to customize the layout of your website as you choose (refer to the functions at the end of this list). Note: must be called after creating all places on the map that are to be included.
• Arguments: N/A.
• Return: N/A.

smdInstance.addConnection(x1, y1, x2, y2)

• Adds a connection between the nodes represented by the two given points.
• Arguments: the x-y coordinates of the two points to connect.
• Return: true on success, false on failure (e.g., values out of bound).

smdInstance.addMultipleConnections(connections)

• Adds add multiple connections to the graph at once.
• Arguments: a list of the connections to add, in the following form: [[x1, y1, x2, y2], [...], [...], ... ]
• Return: true on success, false on failure (e.g., values out of bound)

smdInstance.addBlockPlace(x, y, width, height, type, name, description)

• Adds a block place to the map, i.e., a place that falls between the connections on the map. Note: type must match one of the pre-defined types below.
• Arguments: the x-y coordinates, width and height, name, title, and description of the place.
• Return: true on success, false on failure (e.g., unrecognized type).

smdInstance.addLinePlace(x1, y1, x2, y2, type, name, description)

• Adds a line place to the map, i.e., a place that falls on a connection on the map. Note: type must match one of the pre-defined types below.
• Arguments: the x-y coordinates of the start and end, name, title, and description of the place.
• Return: true on success, false on failure (e.g., unrecognized type).

smdInstance.addNodePlace(x, y, type, name, description)

• Adds a node place to the map, i.e., a place that falls on a node of the map. Note: type must match one of the pre-defined types below.
• Arguments: the x-y coordinates of the start and end, name, title, and description of the place.
• Return: true on success, false on failure (e.g., unrecognized type).

smdInstance.addInfoBox()

• Adds a box to the map to display information about places when clicked on by a user.
• Arguments: N/A.
• Return: N/A.

smdInstance.addNavigationMenu()

• Adds a navigation menu to the map where the user will be able to plan out route between places.
• Arguments: N/A.
• Return: N/A.

smdInstance.addFilterByClassBox()

• API function to add a filter box which will give users the option to filter by certain place type. Note: must be called after places are added to map.
• Arguments: N/A.
• Return: N/A.

smdInstance.addFilterByNameBox()

• API function to add a filter box which will give users the option to filter by certain place name. Note: must be called after places are added to map.
• Arguments: N/A.
• Return: N/A.

smdInstance.addLegend()

• API function to add a legend to the map, based on the types of places that are already on the map. Note: must be called after places are added to map.
• Arguments: N/A.
• Return: N/A.

---

Place Types

Listed below are all the categories of places currently supported.

Block Places:

• Park
• Building
• Water
• Hospital

Line Places:

• Street
• Transit Line (version 1)
• Transit Line (version 2)
• Highway

Node Places:

• Point of Interest
• Special Event
• Incident