Map Integration with ESRI on Hana Cloud Platform

[apoorv_bhargava2]

In enterprise software world, there are many cases where business relevant objects need to Geo-enabled. I mean objects need to have attributes to represent the geo location (longitude and latitude) of the object so that they can be visualized on Map. Apart from just visualizing the object on map there are many powerful features with map integration which can add tremendous business value. ESRI is one of the providers of Geographic information system. Many products of SAP are already utilizing the capabilities of ESRI.

Motivation for this blog is to share my experience and knowledge about integrating ESRI (Online) with one of XS application which is developed and running on Hana Cloud Platform.(Will publish the name of the application once it is released

So Let’s Start.

Here we assume that you are ready with your basic XS application which is developed and running on Hana Cloud Platform

Registration of App on ESRI server

Very first step before start using the ESRI services will be to register you app on ESRI web site. http://<organization name>.maps.arcgis.com/

1.    Verify that you are signed in with an organizational account and have privileges to create content.

2.    Click My Content and click the title of the app you want to register to view its item details.

3.    Scroll down to the App Registration section and click Register.

If you've added a generic type of app, the app is automatically registered and you see the Registered Info button instead of the Register button. You can view and update the registration information.

4.    Select the type of app: browser, native, server, or multiple.

5.    For each redirect URI, enter the address in the format http://<server>[:port] and click Add.

6.    Redirect URIs are valid addresses that users of your app can be redirected to after they successfully log in.

7.    To remove a URI you previously added, select it, click Delete, and click Register.

ESRI service with OAuth

ESRI service uses OAuth for authentication. So we need to get OAuth token from taken generation service and use the token for calling ESRI services.

Below picture shows one of  the recommended ways of calling ESRI service using OAuth authentication

In our  application scenario we  have used a bit different design as shown in this diagram

We have getToken service running on XS server which contacts ESRI server/ DB to get the latest token. This token is passed to browser application which calls ESRI services directly using the token

Http Destination and SSL configuration

As you might know that to call any http service from Hana xs server we need to configure http destination and SSL (if required) Here is the step by step guide to achieve this

1.  Create a http destination file with this content

host = "arcgis.com";

port = 443;

pathPrefix =   "/sharing/oauth2/token";

useProxy = true;

proxyHost = "proxy";

proxyPort = 8080;

authType = none;

useSSL = true;

timeout = 30000;

2.  Download certificate from browser after launching www.arcgis.com

Upload the certificate on Trust store using Trust      Manager

Configure http destination file to use trust      store where certificate was uploaded

getToken Service

Implement getToken service passing required headers and parameters

var
  destination_package = "<package>";

var destination_name =  "<http  destination name>";

try {

var dest =  $.net.http.readDestination(destination_package, destination_name);

var client = new $.net.http.Client()

var req = new
  $.web.WebRequest($.net.http.POST, "");

req.parameters.set("client_id", "<client_id>");

req.parameters.set("grant_type", "client_credentials");

req.parameters.set("client_secret", "<client_secret>");

req.parameters.set("f", "pjson");

req.headers.set("Content-Type", "application/json");

req.headers.set("Accept", "*/*");

client.request(req, dest);

var response =   client.getResponse(); 

var responseStatus =  response.status;

$.response.contentType = "application/json";

$.response.setBody(response.body.asString())

$.response.status = responseStatus;

} catch (e) {

$.response.contentType = "text/plain";

$.response.setBody(e.message);}

Java script consumer

Call your  xsjs service to get the token .This is the response from the service

{  "access_token": "rjsFurHYt2_iBKg0jFbicqiLoi0E0do947cnTyRjvo5rqWKuMiN6ua7uF-gGkVprAbIQ6bE_lBokjZ-232323232323-WtoLpuUucAWnHCl_NxJTePx7Mb6g..","expires_in":
  7200}

Use this token to call Arc GIS Service from your java script code

Sample call:

http://route.arcgis.com/arcgis/rest/services/World/Route/NAServer/Route_World/solve?token=<your token>&stops=-122.4079,37.78356;-122.404,37.782&f=json