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

Manifest

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.

Map1

Map 2

Summary

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,