Skip to Content

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





To report this post you need to login first.

6 Comments

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,

    Stephane

    (0) 
      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,

        Stephane

        (0) 

Leave a Reply