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="<div id="mapContainer"> </div>"></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.
wow, this is a nice API. Thanks for sharing
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.
Hi,
Can anybody layout the steps how to achieve this? It's my first time to get this requirement.
Thanks in advance.
Hi Markus,
This works great. However, it works in every browser but Internet Explorer. Can you suggest a fix for IE?
Thank you sir.
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.
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
Hello poornima,
I have the same problem. How did you solve it?
Hi Markus,
I'm getting the below error.
Thanks in advance.
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
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.
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.