Integrate Esri in Neptune DXP - Open Edition

Esri is a company in geographic information system (GIS) software, location intelligence, and mapping. You can integrate Esri services in an application you create with the App Designer.

Prerequisites

  • You have created an app or opened an existing one in the App Designer. See the documentation for more information.

Procedure

  1. Open your app in the App Designer.

  2. On the preview toolbar, select Header to open the HTML5 Header document.

  3. In the header of your top-level HTML 5 Document component, enter the following:

    <link rel="stylesheet" href="https://js.arcgis.com/4.24/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.24/"></script>

  4. Add a oPage ressource.

  5. In the oPage, add a HBox component: OpenUI5 → sap.m → Layout → HBox.

  6. Define an explicit height and width for the HBox, for example, height = 700px and width = 100%.

  7. Add a onInit event: OpenUI5 → sap.ui.thirdparty → Events → onInit.

  8. In the onInit event, enter the following code:

    // Custom Init - Happens only once
sap.ui.getCore().attachInit(function(data) {
    setTimeout(function() {

        require([
            "esri/Map",
            "esri/views/MapView"
        ], function(Map, MapView) {

            var map = new Map({
                basemap: "topo-vector"
            });

            var view = new MapView({
                container: hbMap.getDomRef(),
                map: map
                center: [-118.71511, 24.09042], //longitude, latitude
                zoom: 11
            });
    }, 200);
});

Results

  • You have integrated Esri in an application in your Neptune DXP - Open Edition.

Related topics