Use Map widget in widget

Many widgets in ArcGIS Experience Builder need to interact with the Map widget. For example, the Draw widget needs to draw graphics on the map, the Bookmark widget needs to connect to the map to work, etc. This document describes how to use the Map widget in a widget.

Select a map widget in the widget setting

To use the Map widget in the widget settings panel, you should use the MapWidgetSelector component.

1
2
3
import { MapWidgetSelector } from 'jimu-ui/advanced/setting-components'

<MapWidgetSelector onSelect={onMapWidgetSelected} useMapWidgetIds={useMapWidgetIds} />

The useMapWidgetIds property is an array of the map widget IDs that your widget is using. In the onMapWidgetSelected callback function, you can get the selected map widget IDs. This component will select the map widget in the same page automatically if there is only one map widget in the page.

After selecting the map widget, if you need to select layers from the map widget, you can use the JimuLayerViewSelector component.

1
2
3
4
5
6
import { JimuLayerViewSelector } from 'jimu-ui/advanced/setting-components'
<JimuLayerViewSelector
   jimuMapViewId={mapViewId}
   onChange={onCustomizeLayerChange}
   selectedValues={selectedValues}
   ></JimuLayerViewSelector>

If the widget setting needs to use the modules from the ArcGIS Maps SDK for JavaScript, you must add "settingDependency": ["jimu-arcgis"] in the widget's manifest.json file. After that is added, you can import the modules like this: import FeatureLayer from 'esri/layers/FeatureLayer'. If you don't add the dependency, you must use loadArcGISJSAPIModule() to load the modules from the ArcGIS Maps SDK for JavaScript dynamically.

Get the JimuMapView instance in the widget

The JimuMapView is a wrapper class of the ArcGIS Maps SDK for JavaScript View. A Map widget can use multiple web maps or web scenes, so it can have multiple JimuMapView instances, and users can switch between them. To get the active JimuMapView instance, you can use the JimuMapViewComponent.

1
<JimuMapViewComponent useMapWidgetId={useMapWidgetId} onViewsCreate={onViewsCreate} onActiveViewChange={setJimuMapView} />

You can use jimuMapView.view to get the MapView or SceneView instance.

If the widget needs to use the modules from the ArcGIS Maps SDK for JavaScript, you must add "dependency": ["jimu-arcgis"] in the widget's manifest.json file. After that is added, you can import the modules like this: import FeatureLayer from 'esri/layers/FeatureLayer'. If you don't add the dependency, you must use loadArcGISJSAPIModule() to load the modules from the ArcGIS Maps SDK for JavaScript dynamically.

Get the JimuLayerViews instances

To read the layers from the map widget, you can use the jimuMapView.jimuLayerViews property. JimuLayerView is the wrapper class for ArcGIS Maps SDK for JavaScript Layer and LayerView. You can use the jimuLayerView.layer and jimuLayerView.view properties to get the Layer and LayerView instances. Please note the jimuLayerView.layer may be a Layer or a SubLayer, and the jimuLayerView.view may be null.

You can use the jimuLayerView.layerDataSourceId to get the data source id of the layer, use the jimuLayerView.getLayerDataSource() to get the data source instance of the layer, and use the jimuLayerView.createLayerDataSource() to create the data source if the data source is not created. However, please note not all layers are supported by data sources. If the layer has a data source instance, the JimuLayerView will manage the synchronization between the layer and the data source, such as the selection, the filter, etc. The selection synchronization is bidirectional, which means if you select a feature in the map, the selection will be synced to the data source, and if you select a record in the data source, the feature in the map will be highlighted. However, the filter synchronization is unidirectional, the filter in the data source will be synced to the layer, but the filter in the layer will not be synced to the data source.

1
2
3
4
5
6
7
8
// If you have a layer instance, use the below code to get the jimuLayerView instance
const jimuLayerView = jimuMapView.getJimuLayerViewByAPILayer(layerOrSubLayer);

// If you have a jimulayerViewId, use the below code to get the jimuLayerView instance
const jimuLayerView = jimuMapView.jimuLayerViews[jimuLayerViewId];

// If you need to get the data source instance of the layer
const dataSource = jimuLayerView.getLayerDataSource() || await jimuLayerView.createLayerDataSource();