ESRI ArcGIS Maps

[Ezslim]

Hello,
We have a need to open an ESRI ArcGIS map from a grid or UX component.
Once opened, we'd like to allow the user to show/hide map layers, move the map around, zoom in/out etc.
The application would be used by state and local government entities while they are performing certain inspections at various sites within their jurisdictions.
Have any of you done anything similar using Alpha? What are some shortcuts and/or roadblocks that would be helpful to know about?
Many thanks, Scott

[Simone]

Hi Scott,

The following provides an example for

Embedding an ESRI map into an Alpha Anywhere application

Create two components, one called app and one called map.

In the app component add a panel card. Then embed the map component in this panel.

In the app component go to properties->head section tags and enter:

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

This loads ESRI's ArcGIS Maps SDK for JavaScript. Documentation can be found here: https://developers.arcgis.com/javascript/latest/

In the map component add a panel card called PC_MAP.

In the JavaScript functions section of the map component add this function:

function requireCallAndMap() {

//...

}

In the onDialogInitialize event call this function by setting

e.javascript = "requireCallAndMap();"

Now copy and paste the require function from one of ESRI's samples into this function.

I used this sample: https://developers.arcgis.com/javasc...filter-slider/

Go to the sandbox and scroll down to where is says:

<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"esri/widgets/Legend",
"esri/widgets/Slider",
"esri/widgets/Expand"
], (Map, MapView, FeatureLayer, Legend, Slider, Expand
) => {

Copy the entire require function and paste it into your requireCallAndMap function.

Somewhere in all of that code is the following, which defines a map object and a map view:

const map = new Map({
basemap: {
portalItem: {
id: "8d91bd39e873417ea21673e0fee87604"
}
},
layers: [layer]
});
​
const view = new MapView({
container: "viewDiv",
map: map,
extent: {
spatialReference: {
latestWkid: 3857,
wkid: 102100
},
xmin: -42087672,
ymin: 4108613,
xmax: -36095009,
ymax: 8340167
}
});

Add the following before the view definition:

var viewDiv = {dialog.object}.panelGetId('PC_MAP','body');

and then in the view definition set the container not to "viewDiv" but to the id you just grabbed from the PC_MAP panel card body:

const view = new MapView({
container: viewDiv,
map: map,
...

The map will now be displayed in the PC_MAP panel card body.

That should be it. In a similar fashion you can add a div for the legend to your Alpha Anywhere application and adjust the sample code so that it puts the legend into that div.

The ArcGIS Maps SDK for JavaScript documentation will explain how to set up maps and interact with them.

I hope this helps.

With regards to roadblocks:

I ran into the following issue for which the Alpha team gave me a work around. I don't know if this is still an issue or if it has gotten resolved. I was using an older version of the ESRI API and also an older Alpha Anywhere build back then.

When using the ESRIJavaScript api and using a list with detail view in the application (I think this is true when there is any list in the application that uses a detail view) errors occur. They seem to occur if the ESRI api did not load before everything else.

Alpha looked into it and found the following:
We are using a library for EXIF data in certain circumstances (web apps capturing photos) which apparently has a conflict with the ESRI libraries. This only gets loaded when you have a detail view turned on.

When an app uses the ESRI JavaScript API, set:

tmpl.suppressLoadingHTML5JSLibrary = .t.

in the advanced property of every UX that uses a detail view.

[Ezslim]

Many, many thanks. We'll get a look at this right away.

[CharlesParker]

Thank you for sharing Simone! Amazing answer!