Skip to Content
Author's profile photo Christoph Aussem

Using Geo Maps with SAP UI5

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>





Assigned Tags

      7 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Christoph Aussem
      Christoph Aussem
      Blog Post Author

      Hi Stephane,

      thanks for your feedback! That´s actually only a restriction in my underlying AkuaJS library. See here( https://github.com/Qrist0ph/AkuaJs/blob/master/src/AkuaLeaflet.js#L50 )

      Ill probably fix that over the weekend, if you need it faster feel free to remove the maxZoom parameter on your own.

      Best regards

      Christoph

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Christoph Aussem
      Christoph Aussem
      Blog Post Author

      Hi Stephane,

      please check, I released a new version with unlimited zoom. If you like  the library I would be happy if you spread the word!

      Author's profile photo Former Member
      Former Member

      Hi Christoph,

      Many thanks! I did a quick check, but probably I am pointing to the wrong source. I am using the "Map" functionality that should be contained in:

      https://cdn.rawgit.com/Qrist0ph/AkuaJs-UI5/latest/build/AkuaJs

      Am I missing something here?

      --> I will spread the word, you can be sure of that!

      Author's profile photo Chandran Bala
      Chandran Bala

      Hi Christoph,

      Really good document. 🙂

      Thanks,

      Chandran.

      Author's profile photo Former Member
      Former Member

       

      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