Map Element

The Map Element allows you to embed interactive Microsoft Bing Maps, Google Maps and Open Street Map controls in your eForm.

At runtime, the controls will display interactive maps which can be used by the user in the same way as if they were accessing Bing Maps, Google Maps or Open Street Map directly.

For Bing Maps, they can zoom in and out, access different views (such as Aerial or Streetside), and drop a pin on the map to indicate a location.

For Google Maps, they can likewise zoom in and out, and access different views (such as Satellite or Street View) and drop a pin on the map to indicate a location.

As the developer, you can configure the map's startup properties to display the relevant location when the page loads, set the initial zoom level, select the view (Road, Aerial, Roadmap and Satellite etc.), and indicate directions.

In order to use the Bing Map control, you will need to join the Bing Maps Dev Center and obtain a Bing Maps Key. Microsoft do not charge for a key. You can sign up and obtain a key, if you don't already have one, at: http://www.bingmapsportal.com You will need to enter this key in the API Key property described below.

For the Google Map control, you will need to obtain an API Key from the Google API Console. There may be a charge to obtain a key, depending upon the usage of your form or the type of plan you have with Google. For details and to obtain a key see: http://developers.google.com/maps/documentation/javascript/get-api-key#key You will need to enter this key in the API Key property described below.

For the Open Street Map control, this is free-to-use and requires no API Key. You may wish to create an account, however, if you plan on fixing or updating Open Street Map in the future.

At runtime, the Map Element connects to whichever control has been selected and will require an internet connection.

  • When creating a form, if you add one of the map controls to it, the control will display as an empty blue rectangle with rounded corners. For Google Maps and Bing Maps, only when a suitable API Key has been selected will the interactive maps, described above, appear.

During development, if you want to operate the map, you will need to turn Design Mode off and view your form in Preview mode. You may also need to Reload the page to refresh it once you have configured or edited the relevant properties.

Once you have placed a Map Element on a page, you can edit the Element's properties to configure the Element for your requirements. Select the Element on the page to display its properties in the Properties Pane.

The following properties are available:

Name and Code Name

Visible and Disabled Properties

 

Height

Specify the height of the map (in pixels) as you want it to appear on your form.

The properties in this category allow you to specify data mappings for this Element and to pre-configure the data properties, if required. For example, you can specify the area you want to be displayed within the map when the form loads. You can read values in for the Data properties from a Datasource or you can pre-configure the properties when developing your form. If you map a data item to a Datasource, you cannot enter your own value as well.

If you specify input mappings, at runtime, values can be read-in from your specified Datasource and used to configure the display of the map. If you pre-configure the values instead, these values will be used to configure the display of the map when the page loads. If you specify output mappings for the Data properties, you can write values specified by a user at runtime to the Datasource specified, e.g. if a user drops a pin on the map to indicate a location , you can retrieve and save that location's coordinates to the Datasource.

The list below describes the meanings of the Data properties. For information about configuring data mappings for these properties refer to the separate topic: Map Data to Elements.

Map Provider

Specifies the map provider to be used to display the map (i.e., Bing Maps, Google Maps or Open Street Maps).

 

Zoom

Specifies the zoom level. The lower the number the greater the area shown within the boundaries of the Element and the less detail will be visible to the user. You will need to experiment with the value you enter here in order to work out the correct value for the required level of zoom.

 

Bing Map Type

Only applies where Bing Maps has been selected. Determines how the Bing Maps control will be rendered. The options available are: streetside, aerial, canvasDark, canvasLight, grayscale, ordnanceSurvey and road.

 

Latitude

Sets the Latitude co-ordinates which the map will be centred on.

 

Longitude

Sets the Longitude co-ordinates which the map will be centred on.

Behaviour Category

Drop Pin in Centre

If this property is selected, a pin will be displayed in the centre of the map when the page loads. Deselect the option if you don't want the pin to be displayed.

 

Configuration Category

API Key (Required for Bing Maps and Google Maps)

Enter your Bing Maps or Google Maps API Key. Without a valid key, the Bing Map and Google Maps controls will not work. You will need to reload the form after entering your Key, to make the Key take effect.

 

Geographic Data Structure

Shape Data

Requires a GeoJSON file to be mapped which contains geographical shape information. The map shapes are rendered using this data.

 

Data Source

Requires a GeoJSON file to be mapped. Used to colour the map and to display labels, tooltips and other map components.

 

Shape Property Path

Used to refer to the specific column name in the configured Shape Data file. Where the column name used for this property matches the column name used for the Shape Data Path property, below, the associated object from the Data Source is bound to the corresponding shape, enabling the map to be rendered correctly.

 

Shape Data Path

Used to refer to the specific column in the configured Data Source file. Where the column name used for this property matches the column name used for the Shape Property Path property, above, the associated object from the Data Source is bound to the corresponding shape, enabling the map to be rendered correctly.

 

Colour Value Path

Sets the colour, using the Data Source, which will be applied to the map shapes.

 

Autofill Colour

If selected, enables automatic filling of shapes with colours if Shape Data and Data Source files haven't been configured.

 

Styles Category

Map

Allows you to assign a style to the map Element, e.g. to set a border around the Element.