Places

The Places control will display desired places based on location coordinates, location type, and radius.

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

This control adds convenience with using maps, since it can easily provide relevant places of interest for a user.

Example

Use a OpenLayers API Key - See Map & OpenLayers API
Utilize the Geo Location & Places controls
Displaying Places
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 & Places controls

The Geo Location control will allow the location of the user to be found and shown on the Map, and the Places will display the desired places and their locations.

Step 3: Displaying Places

This step displays the gas stations list (these are the places we want to list) using a Multi Select 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 and places we want to see.

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

//places

var placesSearch = page.ui.get("Places1");

        placesSearch.requestNearbySearch(
           location.latitude,
           location.longitude,
           {
               radius: 10000,
               types: ["fuel"],
           }
           );
   }

</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 placesSearch = page.ui.get("Places1") -- Finding fuel places nearby user's location using the requestNearbySearch method.

This is the result...

Events

With the Places 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.

Events

Methods

Related Article(s)

Comments