Changing WebMap in Map widget programmatically

S3TmGIS

Hi all,

I’m working in Experience Builder (Developer Edition) and I use two official widgets in my app:

• Map widget – initially empty (no default web map configured)
• Map Layers widget – connected to the Map widget

At runtime, I programmatically swap the web map like this: 

this.jimuMapView.view.map = webMap;

It works great, Map widget re-renders with the new web map, Map Layers widget shows the correct layers and most functionality works as expected.

The problem
In the Map Layers widget config, there’s an option Enable layer batch options (turn on/off all layers, expand/collapse all layers).

After swapping the web map programmatically: expand/collapse all layers works fine, but turn on/off all layers does nothing and opening the layer menu throws:

DataSource create error: TypeError: Cannot read properties of null (reading 'createDataSourceByLayer')

Despite the error, individual layer controls (turning single layers on/off, toggling visibility, etc.) still work. It’s only the batch toggle that fails.

It seems the batch toggle fails because the web map, when created and added programmatically, doesn’t have a corresponding DataSource registered in Experience Builder’s framework.
I attempted to create and register a new DataSource for the web map, and update appConfig:

const dsManager = DataSourceManager.getInstance();

const dsJson: DataSourceJson = {
  id: `ds_webmap_${webMap.portalItem.id}`,
  type: DataSourceTypes.WebMap,
  portalUrl: webMap.portalItem.portal.url,
  itemId: webMap.portalItem.id
};

const newDs = await dsManager.createDataSource(dsJson);
await (newDs as MapDataSource).childDataSourcesReady();

const appConfig = getAppStore().getState().appConfig;
let updatedConfig = appConfig.setIn(
  ['dataSources', dsJson.id],
  dsJson
);

updatedConfig = updatedConfig.setIn(
  ['widgets', this.jimuMapView.mapWidgetId, 'useDataSources'],
  [
    {
      dataSourceId: dsJson.id,
      mainDataSourceId: dsJson.id
    }
  ]
);

getAppStore().dispatch(appActions.appConfigChanged(updatedConfig));

But when I do this - the Map widget goes into endless loading and onActiveJimuMapViewChange is called with jimuMapView as null in widgets connected to the map.

Is there a way to programmatically change the Map widget’s web map and have the Map Layers widget (including “Enable layer batch options”) fully work?

Any tips, examples, or documentation links on the correct way to handle this would be greatly appreciated.
Thanks in advance!

 

 

Jeff.Thompson@arlingtontx.gov_arlingtontx

You can use multiple Map Widgets. Place them inside a Section Widget and use Buttons or a View Navigation Widget to switch between them.