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.
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script src="https://cdn.rawgit.com/Qrist0ph/AkuaJs/latest/dist/plain/libs/heatmap/heatmap.min.js"></script>
<script src="https://cdn.rawgit.com/Qrist0ph/AkuaJs/latest/dist/plain/libs/heatmap/gmaps-heatmap.js"></script>
<script data-main="https://cdn.rawgit.com/Qrist0ph/AkuaJs/latest/dist/plain/main.js" src="https://cdn.rawgit.com/Qrist0ph/AkuaJs/latest/dist/plain/libs/require.js"></script>
<script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_bluecrystal">
</script>
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
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Geo Heatmap Sample</title>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script src="https://cdn.rawgit.com/Qrist0ph/AkuaJs/latest/dist/plain/libs/heatmap/heatmap.min.js"></script>
<script src="https://cdn.rawgit.com/Qrist0ph/AkuaJs/latest/dist/plain/libs/heatmap/gmaps-heatmap.js"></script>
<script src="https://cdn.rawgit.com/Qrist0ph/AkuaJs/latest/dist/plain/libs/D3/d3.min.js"></script>
<script data-main="https://cdn.rawgit.com/Qrist0ph/AkuaJs/latest/dist/plain/main.js" src="https://cdn.rawgit.com/Qrist0ph/AkuaJs/latest/dist/plain/libs/require.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/Qrist0ph/AkuaJs/latest/dist/plain/libs/nvd3/nv.d3.min.css" type="text/css" />
<script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_bluecrystal">
</script>
<script type="text/javascript">
jQuery.sap.registerModulePath('AkuaJs', 'https://cdn.rawgit.com/Qrist0ph/AkuaJs-UI5/latest/build/AkuaJs');
jQuery.sap.require("AkuaJs.GeoHeatmap");
var tuples = [
T([E(D("coordinates"), { lat: 51.76, lng: -1.55 }), E(D("text"), "Point 1")], 16),
T([E(D("coordinates"), { lat: 50.75, lng: -1.55 }), E(D("text"), "Point 2")], 22),
T([E(D("coordinates"), { lat: 48.15, lng: 9.4667 }), E(D("text"), "Point 3")], 30),
T([E(D("coordinates"), { lat: 52.35, lng: 4.9167 }), E(D("text"), "Point 4")], 28),
]
new AkuaJs.GeoHeatmap({
axis0: A({
crosslists: [TCL(tuples)]
}),
connection: tuples,
numberFormat: ',.2',
showMarkers: true,
center: { lat: 52.35, lng: 4.9167 },
zoom: 6
})
.placeAt('center');
</script>
</head>
<body>
<div id="center"></div>
</body>
</html>
Dear Sir,
I have a Problem, cause of the radius of the Heatmap. My Target is to show a building of a store, instead of the whole Map.
I created a new Tuple with the correct coordinates of the building and than i centered the position.
I tried to change the defaultRadius of heatmap.min.js but nothing changes.
My Question is: Where is the used radius defined and initialized?
How much can i influence the radius?
I am getting an error saying Hashtable is not defined from the js file
How to implemented Heatmaps with XML view and controller
This might help you
https://sapui5.hana.ondemand.com/#/entity/sap.viz.ui5.controls.VizFrame/sample/sap.viz.sample.Heatmap/code