Technical Articles
SAP Web/Mobile Map Adventures – Showcase
Hello #SapCommunity,
Welcome to my MAP adventures article, where i’m going to showcase to you some of the work that i’ve been creating and exploring, also with some feedbacks and pointers for you to accomplish the same.
So i’m summarizing here all the POCs, prototypes and videos of everything that i’ve been working on lately:
Giving a few technical references:
- Leaflet: I’ve used leaflet for most of my maps, because it’s an open-source JavaScript library
for mobile-friendly interactive maps (and a really good one, with lots of tutorials on the link). - Turf: I’ve used turf for map calculations and many other functions that you’ll see below, it’s also a very powerful JavaScript library.
- Kapsel/Cordova Apps: I’m still using them for full Offline mobile apps for both Android and IOS, also on a few demos below. I still like them, even knowing that they will be out of support from SAP soon.
- SAPUI5: Used UI5 on most of the Web Demos and Cordova apps, with some of them running in FIORI environments.
- MapBox and OpenStreetMap: They were some of the sources for the satellite images on the applications below, both very fast.
- MDK (Mobile Development Kit): It’s the “new” SAP approach for coding apps (using JavaScript) for both IOS and Android devices, coming to “take” Kapsel/Cordova’s place.
- SAP Mobile Services (BTPms): Used the standard SAP mobile services in some of the apps, specially for the MDK one.
- Leaflet Heat plugin: One of the many available leaflet plugins, this one is responsible for HeatMap display in maps (good one).
Agribusiness
I’ve been exploring/creating applications to help the agribusiness scenarios, such as harvest, machinery path, inspection and many others (below real data collected on the field with the app on the left):
The App below was created using Kapsel/Cordova & SAPUI5, to record the track and show interesting info on the screen (as the one above). This time, i’m testing in a bike ride, in full offline mode: 🚴🚴🚴
The application below was made to show a tractor’s path, for real time (or even later) monitoring requirements and analysis/calculations (with real data collected on the field):
As you can see, displays (red/green) if you’re inside that specific area (Geofence) and some other information (and a lot more is possible).
Example of the HeatMap plugin, with map showing real data collected on the field:
It’s important for scenarios like inspection and pest monitoring.
What would a real time monitoring/tracking application of the overall farm would look like in UI5/FIORI?
Live farm, you could track equipments, employees, and any other desired status or event. Se what’s happening on the farm in real time!
If you’re curious about the Drone, we could even take a Drone Ride:
And what if we wanted a full automated process of machinery repair, using SAP tech (FIORI, S/4, etc):
KPI’s are also very important on the field, what would them be like in these applications?
Calculations (specially for area covered) are also important and key for real time applications:
Tracking
After the Agri demos, created other applications (UI5/FIORI) for the overall tracking requirements, like monitoring a vehicle on the city for example:
Or for even a App like Waze, using SAPUI5 and Leaflet:
And to demonstrate how interactive the applications/maps can be, created a “gamification” demo app, the “zombie attack”.
ABAP integration
For customers that don’t use or want Mobile/Web applications (even FIORI), i created a demo on how to integrate with regular ABAP screens (Module Pool, etc), to be used with SAPGUI (even in S/4) or WebGUI:
This opens a lot of doors as well, for SAP based applications.
And if you’re wondering, all of the maps above are using Leaflet.
MDK
After creating track applications using Cordova/Kapsel, following up with SAP’s mobile strategy, created the same type of application using MDK (also running in full offline mode), but this time tested on a scooter ride 😀:
That you can see on IOS:
And Android:
Both going on the same path.
MDK location plugins worked pretty good on offline mode compared (but not as good) to the Kapsel/Cordova ones (that i got almost 2/m precision), but the app overall perfomance was similar (even MDK using NativeScript framework).
Edit: Please check out the full #MDKFriend app here.
And that’s it! You can now use the reference links to explore tutorials and documentations to create your own map applications/mobile apps, with the ones above serving as a base or model.
Let me know if you got any questions.
Best regards.
Great blog post! It is an inspiration for developers! Soon I want to work on this too!