topic Re: How to control the map from a widget? in ArcGIS Experience Builder Questions

How to control the map from a widget?

RYANCARL — Tue, 06 Jul 2021 21:36:48 GMT

I am trying to create a custom search widget in experience builder and I am getting stuck accessing the map.

I would like to call map.goTo({center: [-199, 33], zoom: 12}) on the map view but I am having some trouble getting access to the JimuMapView to make this logic work.

Does anyone have any suggestions on how to get access to the map to call this type of logic?

Re: How to control the map from a widget?

RYANCARL — Tue, 06 Jul 2021 22:11:32 GMT

Looks like I got it.

We can set the state of the widget with the JMV with the "activeViewChangeHandler"

Something like this:

  const [jimuMapView, setJimuMapView] = useState<JimuMapView | null>(null)

const testingMapGoTo = () => {
      jimuMapView.view.goTo({
        center: [-119, 33],
        zoom: 13
      })
  }

const activeViewChangeHandler = (jmv: JimuMapView) => {
    if (jmv) {
      setJimuMapView(jmv);
     }
}

I would be super interested if someone has implemented this in any other way

Re: How to control the map from a widget?

Grant-S-Carroll — Tue, 06 Jul 2021 23:21:29 GMT

I have a widget that needs to interact with two different maps in the application at the same time (a current and future view). The settings (from what I can see) only allow assigning a single map to a widget, so I have handled it as follows.

static mapExtraStateProps(state: IMState) { let currentId = ""; let futureId = ""; Object.keys(state.appConfig.widgets).forEach(key => { if (state.appConfig.widgets[key].uri === "widgets/arcgis/arcgis-map/" && state.appConfig.widgets[key].label === "Create") { currentId = key; } if (state.appConfig.widgets[key].uri === "widgets/arcgis/arcgis-map/" && state.appConfig.widgets[key].label === "Future") { futureId = key; } }); let currentMap = MapViewManager.getInstance().getJimuMapViewById(currentId + "-dataSource_1"); let futureMap = MapViewManager.getInstance().getJimuMapViewById(futureId + "-dataSource_1"); return { currentMap: currentMap, futureMap: futureMap } }

Then the future map and current map are available on the props. I havent bothered to'config out the names of the maps yet. But that would be a future enhancement.