Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
Showing results for 
Search instead for 
Did you mean: 

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=""></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>

Labels in this area