How to control the map from a widget?

1300
2
Jump to solution
07-06-2021 02:36 PM
Labels (2)
RYANCARL
New Contributor III

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? 

0 Kudos
1 Solution

Accepted Solutions
RYANCARL
New Contributor III

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

View solution in original post

0 Kudos
2 Replies
RYANCARL
New Contributor III

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

0 Kudos
Grant-S-Carroll
Esri Contributor

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.