Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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.

...

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.