Pega - CSA and CSSA

How to pass Multiple Latitude and Longitude using a Data Page in HTML

April 1, 2021
Admin
Share with Love

If you need to pass multiple latitude and longitude coordinates to display multiple markers on the map in Pega, you can achieve this by using a Data Page or any other appropriate method for data storage and retrieval within the Pega platform.

Here’s a general outline of how you could approach this:

  1. Define a Data Page: In Pega, a Data Page is a way to store and manage data that can be used across multiple parts of an application. You can create a Data Page that holds a list of latitude and longitude coordinates.
  2. Populate the Data Page: Depending on your use case, you can populate the Data Page using various methods. For example, you can use an Activity, Data Transform, or Report Definition to fetch the latitude and longitude data from a data source (e.g., a database or an external API) and store it in the Data Page.
  3. Customize the HTML/JavaScript: You can customize the HTML/JavaScript in Pega to iterate over the list of latitude and longitude coordinates stored in the Data Page and display markers for each coordinate on the map.

Here’s a simplified example using a JavaScript function to add multiple markers to the map:

Assuming you have a Data Page called “LatLngDataPage” with the structure containing a list of latitude and longitude pairs:

json code
{
“latitudeLongitudeList”: [
{ “lat”: 40.7128, “lng”: -74.0060 },
{ “lat”: 34.0522, “lng”: -118.2437 },
{ “lat”: 51.5074, “lng”: -0.1278 }
// Add more latitude and longitude coordinates here
]
}

And your HTML/JavaScript code could be like this:

<!DOCTYPE html>
<html>
<head>
<title>Map Example</title>
<script src=“https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap” async defer></script>
<script> function initMap()
{ var mapCenter = { lat: 40.7128, lng: –74.0060 };
var map = new google.maps.Map(document.getElementById(‘map-container’),
{ center: mapCenter, zoom: 4 });
// Get the Data Page containing the latitude and longitude list
var latitudeLongitudeList = yourDataPage.pyData.latitudeLongitudeList;
// Loop through the list and add markers to the map
for (var i = 0; i < latitudeLongitudeList.length; i++) {
var coordinates = latitudeLongitudeList[i];
var marker = new google.maps.Marker({
position: { lat: coordinates.lat, lng: coordinates.lng },
map: map
});
}
}
</script>
</head>
<body>
<div id=“map-container” style=“height: 600px;”></div>
</body>
</html>

Make sure to replace YOUR_API_KEY with your actual Google Maps API key, and adjust the Data Page and property names according to your Pega application’s configuration.

Please note that the code provided is just a basic example and might need to be adapted based on the specifics of your Pega implementation and the way data is stored and accessed within your application.