Skip to Content

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.

To report this post you need to login first.

2 Comments

You must be Logged on to comment or reply to a post.

  1. 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.

    (0) 

Leave a Reply