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.
