Lately I had to visualize geographical data in a SAPUI5 app. As I had already built a set of SAPUI5 charting controls (see here ) I decided to incorporate a Leaflet Maps control into my collection. In this post I will describe how you can use Leaflet maps in your own SAPUI5 application.
Before we begin we will need a geojson file that contains the shapes of the geographical data we would like to plot. Basically such a file is a normal json file and looks like this:
{
"type": "FeatureCollection",
"features": [
{ "type": "Feature",
"id": 0,
"properties": { "Name": "Mitte", },
"geometry": { "type": "Polygon", "coordinates": [ [ [ 13.40352847102303, 52.54021229004892, 0.0 ]
]]}}]}
In this example I will be using a geojson file of Berlin´s districts.
Lets start by creating a simple UI5 App and by adding the required dependencies for D3 and the AkuaJs charting library. The geojson file will be included like any other script file in a <script> tag so we can make sure it is loaded before we start drawing the map. Additionally we will include a Leaflet CSS file.
<script src="https://rawgit.com/Qrist0ph/AkuaJs/latest/dist/plain/libs/D3/d3.min.js"></script>
<script data-main="https://rawgit.com/Qrist0ph/AkuaJs/latest/dist/plain/main.js" src="https://rawgit.com/Qrist0ph/AkuaJs/latest/dist/plain/libs/require.js"></script>
<link rel="stylesheet" href="https://rawgit.com/Qrist0ph/AkuaJs/latest/dist/plain/libs/nvd3/nv.d3.min.css" type="text/css" />
<link rel="stylesheet" href="https://rawgit.com/Qrist0ph/AkuaJs/latest/dist/plain/libs/leaflet/leaflet.css">
<script src="berliner-bezirke.geojson"></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("Bezirk"), "Mitte") 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("Bezirk"), "Mitte")], 88) . The assignment of a quantitative value to a corresponding shape in the geojson file is based on the value passed in the E() function and the "Name" property in geosjon file. 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 districts that corresponds to the shape names in the geojson file
- connection: here we pass the quantitive data that needs to be visualized
- color: the color of the shape
- numberFormats: the number format in D3 notation
- mapCenter: the Longitude / Latitude coordinates of the map
- zoom: the initial zoom factor
- geoJson: the variable containing the geoJson object
- click: a function to listen to click events
The geojson file used in this example can be found here.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8' />
<script src="https://rawgit.com/Qrist0ph/AkuaJs/latest/dist/plain/libs/D3/d3.min.js"></script>
<script data-main="https://rawgit.com/Qrist0ph/AkuaJs/latest/dist/plain/main.js" src="https://rawgit.com/Qrist0ph/AkuaJs/latest/dist/plain/libs/require.js"></script>
<link rel="stylesheet" href="https://rawgit.com/Qrist0ph/AkuaJs/latest/dist/plain/libs/nvd3/nv.d3.min.css" type="text/css" />
<link rel="stylesheet" href="https://rawgit.com/Qrist0ph/AkuaJs/latest/dist/plain/libs/leaflet/leaflet.css">
<script src="berliner-bezirke.geojson"></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>
<script>
jQuery.sap.registerModulePath('AkuaJs', 'https://rawgit.com/Qrist0ph/AkuaJs-UI5/latest/build/AkuaJs');
jQuery.sap.require("AkuaJs.Map");
eBezirkMitte = E(D("Bezirk"), "Mitte");
eBezirkPankow = E(D("Bezirk"), "Pankow");
eBezirkFriedrichshain = E(D("Bezirk"), "Friedrichshain");
new AkuaJs.Map({
axis0: A({
crosslists: [TCL([T([eBezirkMitte]), T([eBezirkPankow])])]
}),
connection: [
T([eBezirkMitte], 88),
T([eBezirkPankow], 33),
T([eBezirkFriedrichshain], 55)],
color: "#FFD7AA",
numberFormat: ",.2",
mapCenter: [52.50, 13.2],
zoom: 10,
geoJson: geojson,
click: function (t, v) { alert(t); }
})
.placeAt('content')
;
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
- SAP Managed Tags:
7 Comments
