Map & OpenLayers API

The Map and OpenLayers API controls will allow the use of a map to be placed on a Coach, a static location can be set or the user's location can be used.  To get a user's location, a Geo Location control must be used.

These controls come with many easy to configure options, and will definitely add a distinctive touch to Coaches.

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


OpenLayers API Configuration

API Key The API key is needed when using Bing Maps as the map source.

Map Behavior

Use Location Sensor Location sensor locates the user's location

Disable Panning Disables the ability to pan the map, fixing the map location

Hide Zoom Control Hides the zoom control, preventing zooming in and out

Hide Map Type Control Prevents the user from changing map type

Hide Scale Control Hides the scale from view

Hide Rotate Control Prevent users from rotating the map

Show Marker This is to indicate whether to show the marker or not (note: must set longitude and latitude within control)

Latitude Latitude to center the map on

Longitude Longitude to center map on

Map Source Sets the map provider for the map (OpenSteet Map, Map Quest, or Bing Maps)

Map Appearance

Map Type Roadmap, Satellite, Hybrid, Terrain

Zoom Level 0 - 20 (Lowest zoom is 0 [whole world], highest is 20 [includes individual buildings when available])

Width Width in px, %, em; for example: 50px, 20%, 4em, if no unit is specified, px is assumed

Height Height in px, %, em; for example: 50px, 20%, 4em, if no unit is specified, px is assumed


This example will show you how to set a map to a specific location.

1) Drag the OpenLayers API Control onto the Coach.

2) Drag the Map Control onto the Coach and input the desired Latitude and Longitude under the behavior configuration. Set the Map Source to OpenStreetMap

Note: To find the latitude and longitude of your location, you can google it or there are websites that provide this service such as, or use the Geo Location control

3) Adjust the Appearance to your preferences. OpenStreet Map only provides a roadmap view, unlike Map Quest and Bing Maps, which have Satellite and Hybrid views.

 4) You now have a map set to a specific location (in this example the location is set to the office of Salient Process)


With the Map control, there are 3 types of event handlers:

  • On Load When the page loads
  • On Click When the map is clicked
  • On Marker Click When the marker is clicked

With the OpenLayers API controls, there are 2 types of event handlers:

  • On Load When the page loads
  • On API Load When the API loads

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.


For detailed information on the available methods for these controls, access the JS Doc file for the Map control or access the JS Doc file for the OpenLayers API control.

Related Article(s)


    • Authors: Lisa Leung, Courtney Silva, Erick Quintanilla
    • Date Created: June 2, 2015
    • Date Modified: June 13, 2016
Was this article helpful?
0 out of 0 found this helpful