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
Example
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, http://www.latlong.net/ 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)
Events
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.
Methods
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
Comments