Map

Use Map to place a map on a coach, set a static location, or use the user's location.

You can define the appearance and behavior of maps by setting configuration properties.

Configuration properties

Set or modify configuration properties for the Map control, such as appearance and behavior properties, in the Configuration properties tab.

Screen size: A configuration property that has the Screen Sizes icon beside the property name can have different values for each screen size. If you do not set a value, the screen size inherits the value of the next larger screen size as its default value. If you are using the Process Designer desktop editor (deprecated), you are setting the value for the large screen size. The other screen sizes inherit this value.

Theme definitions: Theme definitions specify the colors and styles for a control and determine the appearance of the control. You can preview the look and feel of controls in the theme editor. See Themes.

The appearance configuration properties for the Map control are listed in the following table:

Table 1. Appearance configuration properties for Map
Appearance configuration property	Description	Data type
Map type	The type of map.	`MapType`
Zoom level	The zoom level between `0`, which shows the whole world, and `20`, which shows details down to individual buildings when they exist.	`Integer`
Width	The width of the map, in pixels (px), percentage of the original map (%), or em units, for example 50 px, 20%, or 4 em. The default unit is the pixel.	`String`
Height	The height of the map, in pixels (px) or em units. For example 50 px or 4em. The default unit is the pixel.	`String`

The behavior configuration properties for the Map control are listed in the following table. By default, the behavior configuration properties are cleared.

Tip: To get a user's location, use a Geo Location control. See Geo Location.

Table 2. Behavior configuration properties for Map
Behavior configuration property	Description	Data type
Disable panning	Prevents users from panning the map, which results in fixing the map location.	`Boolean`
Hide zoom control	Prevents users from zooming in and out.	`Boolean`
Hide map type control	Prevents users from changing the map type.	`Boolean`
Hide scale control	Prevents users from scaling the map.	`Boolean`
Hide rotate control	Prevents users from rotating the map.	`Boolean`
Show marker	Shows or hides the marker. It requires the Latitude and Longitude configuration properties be set.	`Boolean`
Latitude	Specifies the latitude on which to center the map.	`Decimal`
Longitude	Specifies the longitude on which to center the map.	`Decimal`
Map source	Specifies the map provider: OpenStreetMap or Bing Maps.	`String`

Events

For the Map control, you can activate the following types of event handlers:

On load when the page loads, for example me.setWidth("100%")
On click when the map is clicked, for example ${Map}.addMarker(latLng)
On marker click when the marker is clicked, for example console.log(marker.lng, marker.lat)

Example

To set a map to a specific location, follow these steps.

Drag the OpenLayers API control onto the coach. For more information about this control, see OpenLayers API.
Drag the Map control onto the coach.
In the Behavior configuration properties, specify the latitude and longitude.
Set the map source to OpenStreetMap.
Tip: You can find the latitude and longitude of your location in one of the following ways:
- Run a search on the Google website.
- Use a specialized website, such as http://www.latlong.net/ .
- Use the Geo Location control as explained in Geo Location.
Set the Appearance properties. For example, select the Roadmap type and set the zoom level to 16.
OpenStreetMap provides only a roadmap view. Bing Maps also proposes satellite and hybrid views.

You now have a map set to a specific location. Image of a map set to a location.

Methods

For more information about the available methods, see the Map JavaScript API.

Additional resources

For information about how to create a coach, see Building coaches.
For information about standard properties (General, Configuration, Positioning, Visibility, and HTML Attributes), see Coach view properties.