Geo Coder

The Geo Coder control will display a user's address based on their physical location, or a static location using latitude and longitude coordinates can be used as well. This control needs to be used with the Map, OpenLayers API, and Geo Location controls.

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).

Like the Geo Location control, this control adds another layer of information for a user by allowing them to see where they are on a map, and can be used to provide a point of reference.

When using this control, it is best practice to place the OpenLayers API control at the top of the page (or at the very least, before Map controls)

This control technically does reverse-geo coding (converting latitude and longitude to an address)

Location

Latitude Latitude of the default location

Longitude Longitude of the default location

Example

Use a OpenLayers API Key - See Map & OpenLayers API
Utilize the Geo Location & Geo Coder controls
Display physical address
Map Control and JavaScript Logic

Step 1: OpenLayers API

In order to use maps, you must use the OpenLayers API Control. Please see Map & OpenLayers API for more details.

Step 2: Geo Location & Geo Coder

The Geo Location control will allow the location of the user to be found and shown on the Map, and the Geo Coder will display a physical address on a text control of your choice (Note, Output Text, Text, etc.).

The structure of the address object can be found in the JSDocs.

Step 3: Displaying the physical address using an Output Text control

This step displays the user's physical address on an Output Text control

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.

//Setting the center of the map and adding a marker
map.setCenter(location.latitude, location.longitude);
map.addMarker();

//Get physical address of user

var geoCoder = page.ui.get("Geo_Coder1");
geoCoder.requestAddressLookup(location.latitude, 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 geoCoder = page.ui.get("Geo_Coder1") -- Finding the geo location, so we can communicate with it.
geoCoder.requestAddressLookup(location.latitude, location.longitude) -- Using the requestAddressLookup method to get address of user

This is the result...

Events

With the Geo Coder 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

You can use JavaScript logic to affect the effects of the control, depending on the event. More information on using these controls can be found in the Event Handling article.

Methods

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

Location

Events

Methods

Related Article(s)

Comments