ExpB Map Widget (JimuMapViews container), JimuMapTools 'Select' Widget (how to monitor for changes?)

[brundageb]

Customizing ExpB 1.14 experience with a custom Widget.

Hello ExpB Dev community. I don't know if my issue is conceptual (understanding how the technologies work) or syntactical (where I am holding my tongue while I type). 

Bare Bones Question:  How do I set up a eventlistener/ReactiveUtil/ to capture the ExpB Map Widget when toggling between the WebMaps that were loaded in the Map Widget Settings?

I can get the individual Web Maps:  

const mapView = viewManager.getJimuMapViewById(viewManager.getAllJimuMapViewIds()[0])
  const mapView2 = viewManager.getJimuMapViewById(viewManager.getAllJimuMapViewIds()[1])

I can query to see if mapView is active:  if (!mapView.isActive) {return}

But I need to set new parameters as soon as the WebMap toggle happens.

I cannot get a ReactiveUtils or Eventlistener to fire when: mapView.isActive changes.

Line 1 and Line 2 below works.  Line 3 does NOT work.  Does not error, just does nothing.

    reactiveUtils.when(() => mapView.view.interacting === true, () => alert("Interacting True")); 
    reactiveUtils.when(() => mapView.view.focused === false, () => alert("MapView:focused= false"));
    reactiveUtils.when(() => mapView.isActive === false, () => alert("MapView:isActive = false"));

Line 1 and line 2  fire from the mapView.view object (view has interacting, focused properties)

Line 3 JimuMapView has the isActive property, but does nothing.

mapView is a JimuMapView object that has a 'isActive' property.

Longer explanation of task at hand.

I am constructing an experience (with custom widget) where the end user is supported with two different web Maps (with layers of information relating to the same location).  The operational layers (polygon layers)  for each WebMap are different.  The background layers are also different for each WebMap.  But the area of interest is basically the same (but the Map extent for each WebMap in the AOI is different).

I have configured the ExpB Map widget with the two WebMaps of interest. This adds a toggle button down on the lower left of the Map. Upon each click the user can switch between WebMaps with the WebMaps Extent synced for each WebMap.

The above works just fine.

Within my Custom Widget I am wanting to capture/monitor/watch/addListener to the toggling of the loaded WebMap in order to set specific settings in the Application. An example of this is changing the Home-Button to set extent back to main AOI of whichever map is currently loaded.

Thanks for any thoughts and ideas.

BobinTN

[JeffreyThompson2 · Accepted solution]

Are you working with the JimuMapViewComponent ? The onActiveViewChange function should execute anytime the active mapView changes. You should be able to trigger your logic from within this function.

//This function should fire when changing mapViews.
const activeViewChangeHandler = (jmv: JimuMapView) => {
		if (jmv) {
			setJimuMapView(jmv)
		}
	}

    return (
		<div className='jimu-widget'
			{
				...
				props.useMapWidgetIds &&
				props.useMapWidgetIds.length === 1 && (
					<JimuMapViewComponent
						useMapWidgetId={props.useMapWidgetIds?.[0]}
						onActiveViewChange={activeViewChangeHandler}
					/>
				)
			}
		>
		</div>
    )

[brundageb]

I appreciate your support Mr. Thompson.  JimuMapViewComponent onActiveViewChange is firing when the Active MapView is changed. Thank you.

But, the code that I needed to execute on this event does not seem to be working 100%.

When the map is switched this code fires.  The map zooms to the previous saved extent(mv1Ext).  Then the JimuMaptool (jsapi Home widget) is found.  But the Home widget will not take the new home extent of mv1Ext (which was just used above).   The Home extent defaults to all features in layer.

 const activeViewChangeHandler = (jmv: JimuMapView) => {
    if (jmv) {
      alert(jmv.dataSourceId)
      if (mapView.isActive) {
        alert('mapView.isActive') 
        if (mv1Ext) {
          jmv.view.goTo(mv1Ext)
          let myViewpoint = new Viewpoint ({targetGeometry: mv1Ext})
          const MapTools:JimuMapTool[] = jmv.jimuMapTools
          MapTools.forEach( (element) => {
            if (element.name === "Home") {
              alert('found Home Widget')
              element.instance.viewpoint = new Viewpoint({targetGeometry: mv1Ext})
            }
          })
        }       
      }
    }
  }

The above code is used in the jimu component render event

See successfully executing code below:

    else if (myTitle.includes("Hot")) {
      if (!mapView.isActive) {return}
      mySQL = HZquery.where
      if (myTitle.includes("Hot")) {     
        DL_layer.definitionExpression = mySQL
          DL_layer.when(() => {
            return DL_layer.queryExtent()
          })
          .then((response) => {
            myExt = response.extent
            myExt.expand(1.25)
            mv1Ext = myExt
            mapView.view.goTo(myExt)
            const MapTools:JimuMapTool[] = mapView.jimuMapTools
            MapTools.forEach( (element) => {
              if (element.name === "Home") {
                element.instance.viewpoint = new Viewpoint({targetGeometry: mv1Ext})
              }
            })
          })
        }   
    }

 Note the same code getting the jsapi Home widget.  This code executes fine and sets the Home extent to the previously set mv1Ext.

Any ideas what is going on?