Skip to Content
Author's profile photo Markus Kurz

Using the ArcGIS Javascript API in SAPUI5 applications

The ArcGIS API for JavaScript from ESRI is a flexible library for building map-based web applications. We, at the SAP HANA Spatial team, use this API to create demos and applications to visualize and explore geospatial data. More information and detailed documentation of the API can be found at https://developers.arcgis.com/javascript/.

In order to use the ArcGIS JavaScript API, or actually any 3rd party JavaScript API, within a SAPUI5 application you first have to load it.

In this post I illustrate how to load the ArcGIS API, while simultaneously wrapping it into a UI5 module. This has the advantage of keeping the global namespace clean, thus avoiding potential collisions of function definitions which can occur if you were to simply include the library via a script tag in the index.html. Additionally, the wrapper module also encapsulates all interactions with the API and allows it to be loaded by other modules using the dependency resolution of sap.ui.define().

Let us start by creating a new file called util/ArcGis.js with the following content:

jQuery.sap.registerModulePath('arcgis_server', 'https://js.arcgis.com');

sap.ui.define([
  'arcgis_server/4.6/init',
], function() {
  return {
    require: require
  };
});

We first register https://js/arcgis.com as a module path with the prefix arcgis_server. This allows us to request the init.js file of the API as a dependency of our util/ArcGis.js wrapper module. All functions of the API are then available within the scope of the module. The return value of the module simply consists of the require method, which handles all interactions with the ArcGIS API.

We can now load the ArcGIS wrapper module within other modules of our application, for example in a controller (controller/App.controller.js):

sap.ui.define([
  'sap/ui/core/mvc/Controller',
  'myapp/util/ArcGis'
], function(Controller, ArcGis) {
  Controller.extend('myapp.controller.App', {
    initializeMap(baseMapName, mapDivId, centerPoint, zoomLevel) {
      ArcGis.require([
        'esri/Map',
        'esri/views/MapView',
        'dojo/domReady!'
      ], function(Map, MapView) {
        MapView({
          map: Map({
            basemap: baseMapName,
          }),
          container: mapDivId,
          center: centerPoint,
          zoom: zoomLevel
        });
      });
    },

    onInit() {
      this.initializeMap('streets', 'mapContainer', [8.641874, 49.293589], 8);
    }
  });
});

As you see, we load our util/ArcGis.js module as a dependency of the controller. We then initialize the map by calling its require function in the initializeMap method.

Now we only need 2 more pieces for a fully working application. First is the index.html:

<!DOCTYPE html>
<html>
   <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <title>JavaScript Map Application</title>
        <style>
          #mapContainer {
              position: absolute;
              height: 100%;
              width: 100%;
            }
        </style>
        <script
            src="https://sapui5.hana.ondemand.com/1.44.31/resources/sap-ui-core.js"
            id="sap-ui-bootstrap"
            data-sap-ui-libs="sap.m"
            data-sap-ui-theme="sap_bluecrystal"
            data-sap-ui-bindingSyntax="complex"
            data-sap-ui-compatVersion="edge"
            data-sap-ui-preload="async"
            data-sap-ui-resourceroots='{
              "myapp": "./"
            }'>
        </script>
        <script>
          sap.ui.getCore().attachInit(function () {
            sap.ui.xmlview({
              viewName: "myapp.view.App"
            }).placeAt("content");
          });
        </script>
   </head>
   <body class="sapUiBody" id="content">
   </body>
</html>

Note that we use CSS to scale the div element which contains the map to the full extend of the browser window.

Lastly, we define a XML view (view/App.view.xml) which contains the #mapContainer div element:

<mvc:View
  controllerName="myapp.controller.App"
  xmlns="sap.m"
  xmlns:mvc="sap.ui.core.mvc"
  xmlns:core="sap.ui.core"
  xmlns:xs="http://www.w3.org/2001/XMLSchema"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  height="100%">
    <core:HTML content="&lt;div id=&quot;mapContainer&quot;&gt; &lt;/div&gt;"></core:HTML>
</mvc:View>

With this we have a fully working UI5 application with an interactive map. Feel free to copy and paste the above source code and try it out yourself.

Assigned Tags

      12 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Sergio Guerrero
      Sergio Guerrero

      wow, this is a nice API. Thanks for sharing

      Author's profile photo Former Member
      Former Member

      Thanks Markus, this works great.  I ran into problems with my graphics layer and points.  I had to import the arcgis css as well to get it to work.

      Author's profile photo Nazarene Madriaga
      Nazarene Madriaga

      Hi,

      Can anybody layout the steps how to achieve this? It's my first time to get this requirement.

       

      Thanks in advance.

       

      Author's profile photo Ray Duke
      Ray Duke

      Hi Markus,

      This works great.  However, it works in every browser but Internet Explorer.  Can you suggest a fix for IE?

      Thank you sir.

      Author's profile photo Angel Gutierrez Bellido
      Angel Gutierrez Bellido

      I have deployed my app in Portal Fiori Launchpad. It has function well, but i force clean cache in Portal then I open my app in fiori portal. The map function badly.

      Author's profile photo poornima j
      poornima j

      Hi All,

      I am facing the problem while working with the ArcGis and viz charts. I referred few blogs but din't got the solution. Some libraries are getting conflicted. Do anyone know how to solve that?

       

       

      Thank you,

      poornima

      Author's profile photo Developer1 Developer 1
      Developer1 Developer 1

      Hello poornima,

       

      I have the same problem. How did you solve it?

      Author's profile photo Anguraj A
      Anguraj A

      Hi Markus,

      I'm getting the below error.

      Kindly suggest.

      Thanks in advance.

       

      Author's profile photo Nagaraj J
      Nagaraj J

      Hi Markus Kurz,

       

      Thanks for the detailed information which is really helpful.

      I am able to implement ARCGIS Map using the above details provided, but i have requirement to place marker in the Map. could you please put some light on this marker placement.

       

      Thanks in Advance,

      Nagaraj J

      Author's profile photo Yorick van Boheemen
      Yorick van Boheemen

      Hi,

       

      Great article, exactly what I was looking for.

       

      I am trying this with the latest version of ArcGis, 4.21, and I ran into a problem, since dojo is no longer shipped with ArcGis, so the dojo/domReady! import does not work. I do not want to import dojo only for this purpose, so do you have a better way of doing this?

       

      Thanks in advance.

      Author's profile photo Tarak Kar
      Tarak Kar

      Hi Markus

      This works fine with version 4.6 but I am getting the following error while upgrading to version 4.22.

      Can you please give some hints?

      Thanks in advance.

      Author's profile photo J. de Voijs
      J. de Voijs

      Hi Tarak,

      did you solve your issue? I had the same error with 4.26.

      Changing the init file solved the problem.

       

      Kr

      Vo