Skip to Content
Technical Articles
Author's profile photo Sharad Sapre

SAP Fiori and Leaflet Integration

Recently I got opportunity work on above topic for Utility client.

Brief Requirement

Utility company’s team was using custom app on their device to collect information along with meter location (latitude, longitude), GIS IDs and other spatial information. Team after the work used to download data from device and upload the same in SAP ISU for further processing.

With Fiori Application was built for the same, requirement of showing and interacting with map in same application came along.

I would like to explain the below steps for how to integrate Fiori Application with the map layers using open source Leaflet JavaScript API library.

The focus of this article is more on Fiori side rather than Leaflet since anyone can visit the link given to know more about Leaflet and its JS APIs.

Step 1.

Leaflet.js is the library we need to include in our libs folder and reference it in your view controller.

Also include CSS file and Images Folder (will find on leaflet web site given above)


Libs folder and CSS


Reference in manifest and controller





Step 2

Place div tag for map to be displayed in application’s view.


DIV in View

Step 3

Load the map control and load the layers using Leaflet API.

onAfterRendering method needs to be used for this.


Map Control

Step 4

Call GIS API from backed SAP system (ISU in my case) and return the Geo JSON using OData service

(I have used OData services to call external APIs returning Geo JSON. This was to avoid CORS errors You can also call external APIs directly from browser using AJAX call if CORS is not an issue)

Below are two of the use cases along with facility such as building, meter plotted on map. Tooltip shows spatial data (masked) attached to it.




Map 2


What I learned from this exercise is:

  1. With its open architecture one can easily integrate external JavaScript libraries into Fiori application
  2. Any Map related APIs to be used needs to be referenced in onAfterRendering method of the code
  3. Geo JSON format is useful to exchange spatial and non spatial data
  4. CORS errors can be avoided by using OData services to call external rest based services

I am sure with information given above you will be interested to try this out yourself appropriately.

Please do like, follow and post any questions you have in Q&A of SAP FioriĀ or SAPUI5

Thank you. Please let me know your comments/questions. I will be happy to answer your questions.

Will post my other experiences in same space in future,

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Elmer Martinez
      Elmer Martinez

      Thank you very much!! this is a really useful post.

      Author's profile photo Gobinath Palanisamy
      Gobinath Palanisamy

      That was great approach we used the same approach with geoserver. Thanks for the detailed article..