Geo Location (User's Location)

The Geo Location control is used when wanting to use the user's location on a map instead of a static location. This control can be used with the Map and OpenLayers API controls, however, this control does not require the OpenLayers API, it is dependent on the device used.

The content of the location object and precision of these metrics depends on the device that the ui is running on. There should always be a latitude an longitude available through this object, no matter the device. Worth noting that location is a context variable, available within the On Location Resolved event of this control.

In order for this control to work, it must be connected to some sort of data network (whether mobile, wifi, Ethernet, etc. If no connections, this control will not function). The page will request permission to access the user's location information. This is a browser built in security function.

Like almost all SPARK controls, you can trigger events that are fired when the user interacts with the control (see the Event and Methods sections below and the Event Handling article for more information).

Geo Location Configuration

Monitoring Mode Once on Load, Continuous, Initially Stopped

High Accuracy Enable high accuracy location detection. Note: This option can impact battery life

Timeout When selected, specifies the timeout interval in milliseconds; the default is 6000, i.e. 6 seconds

Max Age of Data Specifies the maximum age of the geo location data; default is 0 milliseconds

Example

Use a OpenLayers API Key - See Map & OpenLayers API
Utilize the Geo Location control
Displaying the Coordinates <optional>
Map Control and JavaScript Logic

Step 1: OpenLayers API

Please see Map & OpenLayers API for more details.

Step 2: Geo Location

The Geo Location control will allow the location of the user to be found and shown on the Map

Within the Geo Location control, you will need to call a function that handles the user location. In this case, the function updateLocation is called @updateLocation.

Step 3: Displaying the Coordinates <optional>

This step displays the coordinates in a text field, and is optional.

Step 4: Map Control and JavaScript Logic

Add the Map Control to the Coach, you may adjust the appearance configuration to your preferences.

Then, you will need to add a Custom HTML Control. This will communicate with the Map Control to tell the map what coordinates we want to use.

location.longitude );

}
</script>

Notes:

function updateLocation(me, location) -- As noted above, this function was called by the Geo Location control; me references Geo_Location1 and it is passing in information of location
var map = page.ui.get("Map1") -- Finding the map, so we can communicate with it.
map.setCenter(location.latitude, location.longitude) -- Using the location information that was passed in, we want to set the center of the map using location.latitude and location.longitude.
map.addMarker() - Adding a marker to the centered location.
var coordinates= page.ui.get("Coordinates") - This grabs the text field Coordinates.
coordinates.setText("Latitude: " + location.latitude +" "+"Longitude: "+ location.longitude ) - This sets the text field to the coordinates found.

This is the result...

The Geo Location is using my current location and this is the result of what we have put together so far.

Events

With the Geo Location control, there are 4 types of event handlers:

On Load When the page loads
On Location Requested When the location is requested
On Location Resolved When the location is resolved
On Location Error When there is a location error

Methods

For detailed information on the available methods for this control, access the JS Doc file.

Geo Location Configuration

Events

Methods

Related Article(s)

Comments