You are here: User interface > User interface rules > Harness and section forms > Harness and Section forms - Using an Address Map control

Harness and Section forms
Using an Address Map control

This article describes the behavior of the Address Map control in the app. See Adding an Address Map control to learn how configure this control. You can also make use of a static Google map as an image in the app, see Displaying location as a static map image. Make sure to obtain a unique Google API key. To learn more, see Google Developer documentation - Obtaining an API Key.

Note: If you experience issues using the Geolocation functionality see Troubleshooting Show User Location feature in browsers.

Displaying locations on the map

To display locations correctly on a map, geolocation must be active for your web browser or mobile device. Furthermore, the Show User Location check box must have been selected during design-time in the control's Cell Properties window.

When viewing a map at runtime, locations on a map are indicated by either a blue or red marker pins. The user's current geographical location is depicted by a blue marker pin on the map and cannot be changed manually. Its location on the map only changes when the user physically moves. Address locations are displayed on a map with red marker pins. The default icons representing the address, current location and reset marker pins can be customized on individual instances of the address map or globally - see Adding an Address Map control for details.

Offline support

When a mobile app goes offline, a predefined map image displays to the user instead of the real Google map location. When the app goes back online, the image switches back to the Google map displaying pins and a user physical location.

For data sources, only property reference, literal values and data pages are supported for maps configured in offline-enabled apps. Other modes, such as report definition and clipboard pages, will not work. Marker editing is also not supported in offline mode.

Enhancing user interaction via Address Map

A user can move a red address marker pin to a new location by dragging and dropping it anywhere in the map. This capability is enabled at design time and can also be set up to either update the single value bound to the Address property field or the value in the optional latitude longitude coordinates field. The Address Map control is configured during design time allowing a user to manually type in an address forcing the map to automatically update to the new location by repositioning the red marker pin. It can additionally be set up to display an error message if an entered address was not found. By default, all of these settings are disabled.

If a user navigates to an unknown location on the map, the user can also center the map back to their current location (as denoted by the blue marker pin) by clicking the reset icon at the bottom corner of the screen located next to the zoom control. The address red marker pins displayed on the map are not reset.

Customizing marker pin information

You can click or tap a location shown as a red marker pin on the map, to display a popup with location details. Popup height/width can be customized using Dynamic Layouts. The width depends on the content length and on the dynamic layout’s max-width setting.

The information that displays in a popup is generated based on data from one of the four "Markers Source" types: Property, Data page, Clipboard page, and Report definition. Popup information section runs in the location pin’s context.

For example, the following data page has two records to map:

D_MyFriends (Code-Pega-List)
   pxResults
      pxResults(1) (Test-Work-MyFriends)
         Name: John
         Address: Cambridge
      pxResults(2) (Test-Work-MyFriends)
         Name: George
         Address: Boston

If the Marker Information section field is configured to show the "Name" property, when the pin located on the Boston address is clicked or tapped, "George" is shown in the popup.