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.

7 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) 
  2. umesh kadlag

     

    Hi Christoph,

    Good Document.

    Is there any demo application available in sap ui5 so i can start i want to plot different state in same country and also show the data in colour bar.

     

    Thanks,

    Umesh

     

    (0) 

Leave a Reply