Using Geo Heatmaps with SAP UI5

Lately I wrote this article about maps in UI5  Using Geo Maps with SAP UI5  .In here I focused on how we can visualize data by coloring certain areas like districts or countries. Sometimes however you might not either have a shape file at hand or your data is referring to GPS coordinates (instead of areas) . In this case using a Heatmap is more approriate. I have recently added such a control into my charting library and will show how it can be used in an UI5 app here. The control is based on Google Maps and this heatmap library here. Lets start by creating a simple UI5 App and by adding the required dependencies for the heatmap and the AkuaJs charting library.

Next we will just define some quantitative data, add the map control to the app and hook it up to our data. The AkuaJs library is based on a multidimensional  data model so every data point has the form E(D(“coordinates”), { lat: 51.76, lng: -1.55 }) where the D() function defines the dimension and the E() function defines an element of the corresponding dimension. A value is assigned by creating a Tuple with the T() function: T([E(D(“coordinates”), { lat: 51.76, lng: -1.55 }), E(D(“text”), “Point 1”)], 16) . The assignment of a quantitative value to  a corresponding coordinate  is based on the longitude / latitude coordinates passed in the first E() function, the corresponding label is passed in the second E() function of a tuple. A more detailed documentation of the AkuaJs API can be found here.

The Map control is added like shown in the listing below and has the following properties that need / can be configured:

 

• axis0: here we pass the list of long / lat coordinates
• connection: here we pass the quantitive data that needs to be visualized
• numberFormats: the number format in D3 notation
• center: the Longitude / Latitude coordinates of the map
• zoom: the initial zoom factor
• showMarkers: set to true if Google Maps markers shall also be displayed in the map
• click: a function to listen to click events whenever a marker is clicked