The purpose of the mapLabelling module is to draw the path of an intruder given a set of coordinates on a map. These set of coordinates represented by latitude and longitude indicate the specific locations that the intruder has visited. By connecting these coordinates with a polyline on the Google Map, a clear illustration of the route that the intruder took can then be saved as an image. To do this, a Google map API was used.
A google map was created in Atom text editor using JavaScript API. It is unsure which other text editors are compatible with the code, so it would be helpful to simply download Atom text editor. A very useful video on how to get started and set the map up can be found here: https://www.youtube.com/watch?v=Zxf1mnP5zcw&ab_channel=TraversyMedia . Before anything, you will require a google map API key to use in your code. Without the key, your map will not display. In Google Cloud Platform https://console.cloud.google.com/google/maps-apis/api-list?project=testproject-340117, navigate to “APIs” at the leftmost sidebar, find “Maps JavaScript API” from the list, and enable it. Then return to the sidebar, and select “Credentials”. near the top, select, “CREATE CREDENTIALS”, AND CLICK “API key”. A new API key should be created, and you should see it below under “API Keys”. Copy or save this Key for later.
...
It is important to note that the warning message will pop up everytimeevery time, and it is safe to ignore it. The entire is also covered in a watermark “For development purposes only” as projects in Google Cloud Platform require billing (which has not been added). Do not worry, as the map can still be navigated through with the watermark.
...
A listener was added to “listen” to clicks on the map, and when clicked, a new marker is added with a sequential alphabet label. Another listener was added to listen to clicks on existing markers, which then shows the info window for that marker. A list of markers were declared with lat/long coordinates and content containing the location name. The list was looped through and each marker was added to the map. The red polyline path was drawn using a list of flightPlanCoordinates, which is just another list of lat and long coordinates
...
The mapLabelling module works together with geolocation to receive and display locations. From the geolocation module, a final list of all latitude and longitude coordinates are accumulated in a list. Once all the coordinates are appended to the list, the list is then written to a .txt file in the format shown below:
...
This .txt file is then accessed by the HTML file that displays the JavaScript Google map API. After the HTML file reads in the text file, it first splits the latitude and longitude coordinates by new line, “\n” to create an array. In this array, each index represents one coordinate, for example, [43.47036890733803,-80.5362815379075]. Then, the array is split again at commas, “,” to create a list of lists. In this example, the list contains 21 elements, and each element contains another two elements (latitude and longitude). Each coordinate in the array is parsed into a float, and two floats (one coordinate) is made into an object. Now, this array of objects were either used to loop through and create markers, or they were drawn on the map as a polyline. Properties of the polyline were set, such as the colour, opacity, and weight, and the flight path was set to the map. This simply connects each sequential coordinate from head to tail using a red line and displays the red line on the map.
Finally, functions were added to display buttons that allow the user to jump to their current location, as well as jumping back to the Waterloo campus. Another “Print Map” button was added at the bottom left of the map that allows the user to save the current map as an image.