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>