SAP Fiori and Leaflet Integration
Recently I got opportunity work on above topic for Utility client.
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.
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.
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)
Reference in manifest and controller
Place div tag for map to be displayed in application’s view.
Load the map control and load the layers using Leaflet API.
onAfterRendering method needs to be used for this.
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.
What I learned from this exercise is:
- Any Map related APIs to be used needs to be referenced in onAfterRendering method of the code
- Geo JSON format is useful to exchange spatial and non spatial data
- 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,
Thank you very much!! this is a really useful post.
That was great approach we used the same approach with geoserver. Thanks for the detailed article..