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 the Google developer documentation on Obtaining an API Key.
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.
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 pop-up with location details. Pop-up 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 pop-up is generated based on data from one of the four "Markers Source" types: Property, Data page, Clipboard page, and Report definition. Pop-up 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 pop-up.
A keystore is a file that contains keys and certificates that you use for encryption, authentication, and serving content over HTTPS. In Pega Platform, you create a keystore data instance that points to a keystore file.
Organize the content and structure of a portal by defining harnesses. By populating harnesses with sections, you can build a modular interface that promotes reuse and maintainability.
Use sections in conjunction with harnesses to define the appearance of user forms, rule forms, or composite portals.
- Adding an Address Map control
You can add the pxAddressMap control to a cell, enabling users to view and interact with location points in Google Maps from within a desktop or mobile app. This control is responsive when added to a dynamic layout, and you can configure events on the control, such as displaying location details. It can also be added to a smart layout or to a sect
- Displaying location as static map image
Harness and Section forms - displaying location as a static map image