Helper function to request any JSON file from the backend. Used to request the unprocessed and the octilinear metro graph JSONs.
(url)
the JSON is requested from
(any)
(callback)
to be called upon receiving the Back-End response.
Performs setup of a leaflet map on the Website for displaying the unprocessed metro map.
(any)
the point the map should initially be focused on.
(any)
initial zoom level of the map. See Leaflet reference for more information on zoom levels.
Performs setup of a leaflet map on the Website for displaying the processed octilinear metro map.
(any)
the point the map should initially be focused on.
(any)
initial zoom level of the map. See Leaflet reference for more information on zoom levels.
fits the map to all markers present on it. Markers represent stations, therefore this function allows us to zoom and pan the map in a way that all stations are in the picture.
Draws a line on the target leaflet map specified.
(any)
the map the line should be drawn on.
(any)
array of two points that the line should connect.
(any)
color of the new line.
(any)
opacity of the new line.
(any)
offset of the new line to allow for multiple lines connecting two stations without them being drawn on top of each other. We use the leaflet.polylineoffset.js library for this.
any:
line the line object just drawn.
Draws a marker on the target leaflet map specified.
(any)
the map the marker should be drawn on.
(any)
the point in which the marker should be drawn as an array of two coordinates (lat, lng).
(any)
the fill color of the new marker.
(any)
the information the tooltip of the new marker should contain (used for station names in our case).
any:
marker the marker object just drawn.
Used to link the map and graph views so that when hovering on a marker of one, the marker representing the same station on the other map gets highlighted as well.
(any)
array holding markers to search for the marker we are hovering over.
(any)
name of the marker we are hovering over.
any:
marker array that holds all markers matching the specified name
Helper function that converts WebMercator Coordinates to WGS84. We use the proj4.js library for this. All coordinates in the input JSON data are in WebMercator format and require conversion to WGS84 in order to work with leaflet.
(any)
array of coordinates (lat, lng) to be converted.
any:
point array of coordinates (lat, lng) in WGS84 format.
Draws the unprocessed metro map on the leaflet map by processing the JSON file previously received from the Back-End.
Draws the processed octilinear graph on the leaflet map by processing the JSON file previously received from the Back-End.
Adds events for radio buttons on the Website for user interaction. The radio buttons allow to toggle the map overlay on the octilinear graph map view.
Generates a dictionary of offsets for when multiple lines exist on a single edge in order to offset these lines accordingly with the goal to avoid them being drawn on top of each other.
(any)
number of lines we want to draw parallel to each other.
any:
offsetDict dictionary of offsets for the lines
Gets the flip factor for a line, i.e. finds out whether its on the northern or southern semicircle and returns -1 or 1 to be used later on to flip the line in order to draw it parallel to other lines on an edge.
(any)
array of two points the line connects.
any:
number -1 or 1 as a flip factor.
Performs setup for the scrolling events in order to use the website itself as a presentation.