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.

2016-01-07 13_43_58-Bundestagswahl 2009.png

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=""></script>
<script data-main="" src=""></script>
<link rel="stylesheet" href="" type="text/css" />
 <link rel="stylesheet" href="">
<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>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv='Content-Type' content='text/html;charset=UTF-8' />
    <script src=""></script>
    <script data-main="" src=""></script>
    <link rel="stylesheet" href="" type="text/css" />
    <link rel="stylesheet" href="">
    <script src="berliner-bezirke.geojson"></script>
    <script src=""
    <script>'AkuaJs', '');"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); }
<body class="sapUiBody" role="application">
    <div id="content"></div>

To report this post you need to login first.


You must be Logged on to comment or reply to a post.

  1. Stephane Deboudt

    Hi Christoph,

    Great job! After having read this post, I have started to experiment with the library. I have one question though: It appears that the zoom level of the maps can not go beyond level 12. Is this limitation imposed by the underlying Leaflet/OSM libraries? That woud be a pity!!

    Could you check this out please? I definitely need to get “closer to sea level” 😉

    Best regards,


      1. Stephane Deboudt

        Hi Christoph,

        Thanks a lot for your quick response. Well, if you could remove this restriction then your library will make more people happy 😉

        For my purposes, I am geofencing some areas which are definitely smaller than city districts. If you don’t mind I will continue to build using your excellent work. If you need credits somewhere, let me know.

        Best regards,



Leave a Reply