Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
Showing results for 
Search instead for 
Did you mean: 
Product and Topic Expert
Product and Topic Expert


In this short blog i want to cover how we can display a route in SAP Application Enablement.

Please check also the other blogs in this litte series:

Creating the Application in SAP Web IDE Full Stack

In contrast to the this blog we start now to create an Freestyle IoT Application by selecting the  corresponding template:

Basic Information of our Application

Project Name: scp_iot_ae_route
Namespace: route
Title: scp_iot_ae_route


Data Source

Property Sets: <your iot ae id>


Page Layout


Now we´re ready an can complete the wizard.

As result we can now see our newly created empty application which (opened in layout editor):


To display our route wen need first an "Map Control", for this open the "IoT" controls and drag and drop the "Map" element to the view:

If we now run our app we can only see an empty map, so it´s time to enhace our application.


Some adjustements

We need now to add a new function to our "model.js":
getTripsModel: function()

In this function we implement the details about our route, e.g. the coordinates from our route.

I´am choosing here the route from my employer to SAP WDF 21 ,o)

], function(JSONModel, Device) {
"use strict";

return {

createDeviceModel: function() {
var oModel = new JSONModel(Device);
return oModel;
getTripsModel: function() {
var oModel = new JSONModel();
var oData = [{
type: "by Car",
tooltip: "Göttingen to SAP WDF 21",
color: "rgb(139, 243, 87)",
startIcon: "sap-icon://shipping-status",
endIcon: "sap-icon://car-rental",
startMarkerAlignment: "5",
endMarkerAlignment: "1",
position: [{
lng: "9.928290000000061",
lat: "51.53708"
}, {
lng: "9.929671883583069",
lat: "51.53778065648096"

.....some more coordinates......

lng: "8.636890053749084",
lat: "49.2953241210286"



Now adapt the "IoTMap" control in the view.

 <iot:IoTMap centerPosition="8.8;50.09;0.0" id="__tmap0" routes="{routesModel>/routes}" enableClustering="false" zoomlevel="6">
<iotele:IoTMapRouteElement showMarkers="true" startMarkerImage="{routesModel>startMarkerImage}"
endMarkerImage="{routesModel>endMarkerImage}" startMarkerAlignment="
{routesModel>startMarkerAlignment}" endMarkerAlignment="{routesModel>endMarkerAlignment}"
showDots="true" showDirection="true" tooltip="{routesModel>tooltip}" position="
{path:'routesModel>position',templateShareable:'false'}" routeColor="{routesModel>color}">
<iotele:IoTMapRoutePositionElement latitude="{routesModel>lat}" longitude="{routesModel>lng}"/>

And finally define in the controller the "onInit" Method.

], function(Controller, Model) {
"use strict";
return Controller.extend("route.controller.Main", {

onInit: function() {
//getting the data from Model.js
var routesModel = Model.getTripsModel();
//setting routesModel to the view
this.getView().setModel(routesModel, "routesModel");



The complete project canbe found here:

Run the application

If we start our application we can see our route which we´ve defined in our simple iot application:

Add a Thing on your Route

Of course what´s missing at this point is to display out IoT related data

Let´s do it now, just display now our "Thing" at our starting point.

<iot:IoTMap 	things="{path:'/Things',parameters:{expand:' DYN_ENT_iotae_sycor_syc_sap_blogs_notebooks__Image, HierarchyElements, DYN_ENT_iotae_sycor_syc_sap_blogs_notebooks__CPU, DYN_ENT_com_sap_appiot_eventtypes__StandardEventType '}}" centerPosition="8.8;50.09;0.0" id="__tmap0" routes="{routesModel>/routes}" enableClustering="false" zoomlevel="6">
<iotele:IoTMapElement latitude="{Latitude}" longitude="{Longitude}" thingid="{ThingId}">
<iotele:IoTStatusElement id="__element0" highSeverity="{DYN_ENT_com_sap_appiot_eventtypes__StandardEventType/High}"
<iotele:IoTThingCardElement thingCardImage="{ThingId}" MultiThingCardHeaderPosition1="{ThingName}"
MultiThingCardHeaderPosition2="{ThingExternalId}" SingleThingCardContactInfo1="{BusinessPartnerName}"
SingleThingCardContactInfo2="{BPMobilePhoneNumber}" SingleThingCardContactInfo3="{BPLandlinePhoneNumber}"
SingleThingCardContactsVisible="true" SingleThingCardEventsVisible="true" SingleThingCardHeaderPosition1="{ThingName}"
SingleThingCardHeaderPosition2="{BusinessPartnerName}" SingleThingCardHeaderPosition3="{ThingId}" SingleThingCardSecondSectionTitle="Events"
SingleThingCardFooterVisible="true" MultiThingCardFooterVisible="true" SingleThingCardThirdSectionTitle="Contact Info"
singleThingCardFooterText="Analysis Page" multiThingCardFooterText="Thing List" singleThingCardTitle="Thing Detail"
multiThingCardTitle="Thing Overview" multiThingCardRowSelect="oMultiRowSelect" multiThingCardFooterSelect="oMultiFooterSelect"
singleThingCardHeaderSelect="oSingleHeaderSelect" singleThingCardFooterSelect="oSingleFooterSelect"/>
<iotele:IoTMapRouteElement showMarkers="true" startMarkerImage="{routesModel>startMarkerImage}" endMarkerImage="{routesModel>endMarkerImage}" startMarkerAlignment="{routesModel>startMarkerAlignment}" endMarkerAlignment="{routesModel>endMarkerAlignment}" showDots="true" showDirection="true" tooltip="{routesModel>tooltip}" position="{path:'routesModel>position',templateShareable:'false'}" routeColor="{routesModel>color}">
<iotele:IoTMapRoutePositionElement latitude="{routesModel>lat}" longitude="{routesModel>lng}"/>

Lets see what happening now on our application.......yeeeees we got our Thing  at the map as expected:




In this blog we´ve build a tiny "IoT Freestyle Application" on top of SAP Cloud Platform IoT Application Enablement. I think this work´s as aspected and it´s a really nice approach how we can visualize e.g. a fleet or vehicle data.


Helpful links

Example app of this blog

SAP Cloud Platform IoT Application Enablement

SAP CP IoT AE Reuse Controls and Templates - Developer Guide

SAP CP IoT AE Reuse Controls and Templates - Developer Guide - Code Sample

SAP IoT Application Enablement Reuse Controls and Templates







Labels in this area