mapLabelling

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.

Now, open open the index.html file by right clicking → Open With → Atom. Next, we will install 2 packages; One that will make text easier to navigate/code and another package that allows you to display the server (the map) on your local host (in my case it is a new google chrome tab). To install, go to File → Settings → Install → Search up “emmet” (make sure packages is selected) → install emmet. For the other package, search up “atomlive-server” (make sure packages is selected) → install atom-live-server (by jas-chen).

Before running the current code, you will need to replace the API key with your own. With the API key from before, copy and paste that at the bottom of the code where it says “YOUR_KEY”:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=myMap"></script>

To run the current code, click “Packages” at the top → atom-live-server → Start server.

If done correctly, a new chrome tab should open that looks something like this:

Open

It is important to note that the warning message will pop up every 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.

To check that some of the functions are working, you can click any empty spot on the map to add a marker labelled with a new letter of the alphabet. You can also try clicking on an existing marker to reveal information about the location. At the top center of the map, you will see a button called “Find Current Location”. When clicked, you will be prompted to allow location services and the map will center to your current location. To go back, click “Return to UW” at the top left.

In the current code, attributes can be set to determine the center the map upon starting the server, the zoom level, and map type (hybrid/terrain/road). The center of the map can be identified using lat/long coordinates and in this case, it is set to the the middle of the University Shops Plaza. The zoom level is 17 (the higher the number, more zoomed the map is), and the map type is hybrid, which shows terrain as well as street/location names.

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.

Open

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.