topic Resize Map/Collapsible Widgets in ArcGIS Viewer for Flex Questions

Resize Map/Collapsible Widgets

TomAuer — Sat, 11 Dec 2021 20:37:22 GMT

I've looked hard in the FlexViewer forums for any advice on how to dynamically resize the map based on widget collapse or resize, but I can't find much.

Does anyone know how to resize the map layout during runtime, based on a widget's resizing or collapse?

I have three widgets, fixed to the left, bottom, and right of the window. I'd like to have these collapse or resize, but I can't figure out how to get the map container to resize this when I do. I've dug deep into the core library of the FlexViewer and none of the events that seem like they'd resize the map do the job.

Here's how my map tag in the config file starts:

<map wraparound180="true" esrilogovisible="false" top="35" bottom="175" left="200" right="165"
     initialextent="-16677000 2009000 -4819000 8330000" fullextent="-16677000 2009000 -4819000 8330000" >

Basically, I'd like to change the bottom, left, and right properties dynamically based on widget resize events.

One example that accomplishes this is Texas Wildfire Risk, but their code is not open and what digging I did turned up an extended proprietary codeset. The functionality is the Hide Tools button.

Thanks!

Re: Resize Map/Collapsible Widgets

JonettaNg — Fri, 09 Mar 2012 10:08:56 GMT

I've had this problem too. You can manage this through:

ViewerContainer.getInstance().mapManager.bottom

or left, top, or right.

I thought to use the bindable mapBottom, mapLeft, mapRight, mapTop, but those don't work.

Re: Resize Map/Collapsible Widgets

ChrisAult — Sat, 11 Dec 2021 20:37:25 GMT

I recently did something similar. It's not perfect, but here is how I approached it:

Make the initial map lined up with the widget in config.xml. for example, if you want a left-hand-side widget that collapses, set its left=0 and then set the map's left to the widget's width:

<map initialextent="-14225000 1864000 -6525000 6658000" left="350" top="0" zoomslidervisible="false">

<widget left="0"  top="0" width="350" config="widgets/MyCollapsibleWidget/MyCollapsibleWidget.xml" url="widgets/MyCollapsibleWidget/MyCollapsibleWidget.swf"/>

This will cause the map and widget to be lined up right next to each other.

In your widget's MXML code, when you transition between your "open" and "closed" states, update the map's left also:

<s:states>
 <s:State name="normal" />
 <s:State name="collapsed" />
</s:states>

<s:transitions>
 <s:Transition fromState="normal" toState="collapsed">
  <s:Resize target="{mainPartOfYourCollapsibleWidget}" duration="450"  effectUpdate="moveTheMap(event)" />     
 </s:Transition>
 <s:Transition fromState="collapsed" toState="normal"> 
  <s:Resize target="{mainPartOfYourCollapsibleWidget}" duration="450"  effectUpdate="moveTheMap(event)" />     
 </s:Transition>
 </s:transitions>

This effectUpdate handler function gets called repeatedly during the resize animation, and will make the map grow as the collapsible widget shrinks:

private function moveTheMap(evt:EffectEvent):void{    
 ViewerContainer.getInstance().mapManager.left = mainContainer.width
}

The nice thing about that is that you don't need separate handlers for each state, the map will just follow the width of the widget.

This isn't perfect, it runs a little slowly and the map tends to re-center as it resizes. I think this may be solvable by watching for an extent change or similar event and re-positioning, but I need to explore it more.