Skip to Content

How to display a route in a SAP Cloud Platform Application Enablement IoT Application


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








You must be Logged on to comment or reply to a post.
  • Thanks, Fabian, this is beneficial information to me.
    I am also interested in displaying a route which data comes from Application Enablement because the location data usually comes from sensors automatically, so I would like to connect the sensor data with the IoT application.
    Is it possible to change data sources to Application Enablement?