locations/index.vue
This page displays the location overview page with all runs of KLH3 on Google Maps with links to the individual location page and links to all runs per location. Also implements the location check feature, where a user can input GPS coordinates to check if there is a KLH3 runsite already close by. Last but not least it implements an info window how to check a custom location for close by runsites.
Info: This page is not linked to the nav-bar and can only be reached by the On a Map button on the /runs page
Used Components
- 1️⃣
Map
Functions
gpsCoordinateRule
A Vuetify rule function to validate GPS coordinates in the format: lat,long. Considers the numerical bindings for latitude and longitude.
Parameters:
value: - The value to validate
resetMapToDefault
Resets the map to its default center and zoom and clears the user location marker. The default center is currently set to a point somewhere in the center of Kuala Lumpur. This function is called whenever the user resets the page after a location check.
validateAndSetUserLocation
Validates the user's input in the format "lat,lng" and sets the userLocationMarker and mapCenter accordingly. This implements the location check feature. If the input is invalid, an alert box is shown.
Parameters:
userLocationInput: - The user's input in the format "lat,lng"
resetPage
Resets the page by reloading the current window location. This is a simple way to clear all input fields and reset the map to its default state.
convertToGoogleMarkers
Converts an array of location data to an array of Google Maps markers. Each location is expected to have a latitude, longitude, and runsite_name. The function also generates a list of run summaries for each location with links to the individual run pages which are displayed in the description.
Parameters:
data: - An array of location data
Reactivity
isGpsInputValid (computed)
Watch for changes in the userLocationMarker and validates the geo-coordinates input
(anonymous) (watch)
Watch for changes in the userLocationInput and reset the map if the input is empty. Used to clear the map when the user resets the page after a location check
(anonymous) (watchEffect)
Watches for the result of the data fetch and converts the data to location markers. Adds the converted data to the locations array