topic Re: Setting map extent does not alter yMin and yMax of the extent in ArcGIS API for Flex Questions

Setting map extent does not alter yMin and yMax of the extent

DanJensen — Fri, 01 Oct 2010 19:08:11 GMT

All,

When I use the sample code for zooming to the extent of the graphics layer, I find that it does not work for features aligned vertically with the Y axis. By setting up an alert, I found that the xMin and xMax values change but the yMin and yMax values do not causing it to work for horizontally aligned features, but not vertically aligned features.

private function zoomToGraphics():void            
{                
     var graphicProvider:ArrayCollection = gLayer.graphicProvider as ArrayCollection;
     var graphicsExtent:Extent = GraphicUtil.getGraphicsExtent(graphicProvider.toArray());
 if (graphicsExtent){
      Map.extent = graphicsExtent;
      Alert.show("Mheight: " + Map.extent.height + "\n Gheight: " + graphicsExtent.height      
                   + "\n " + "\n Mwidth: " + Map.extent.width + "\n Gwidth: " + graphicsExtent.width);
 }
}

Thanks,
-Dan

Re: Setting map extent does not alter yMin and yMax of the extent

DasaPaddock — Sun, 12 Dec 2021 04:08:53 GMT

I'm not able to reproduce this using the code below. What version of the API are you trying? Is it not zooming in for you? Are you using a dynamic or tiled base layer?

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx"
               xmlns:esri="http://www.esri.com/2008/ags">
    <fx:Script>
        <![CDATA[
            import com.esri.ags.events.MapMouseEvent;
            import com.esri.ags.geometry.Extent;
            import com.esri.ags.utils.GraphicUtil;
            
            import mx.collections.ArrayCollection;

            protected function map_mapClickHandler(event:MapMouseEvent):void
            {
                var graphicProvider:ArrayCollection = gLayer.graphicProvider as ArrayCollection;
                var graphicsExtent:Extent = GraphicUtil.getGraphicsExtent(graphicProvider.toArray());
                trace(graphicsExtent, graphicsExtent.width, graphicsExtent.height);
                map.extent = graphicsExtent;
                trace(map.extent, map.extent.width, map.extent.height)
            }
        ]]>
    </fx:Script>

    <esri:Map id="map" mapClick="map_mapClickHandler(event)">
        <esri:ArcGISTiledMapServiceLayer url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"/>
        <esri:GraphicsLayer id="gLayer">
            <esri:Graphic>
                <esri:WebMercatorMapPoint lon="10" lat="10"/>
            </esri:Graphic>
            <esri:Graphic>
                <esri:WebMercatorMapPoint lon="10" lat="50"/>
            </esri:Graphic>
        </esri:GraphicsLayer>
    </esri:Map>

</s:Application>

Re: Setting map extent does not alter yMin and yMax of the extent

DanJensen — Mon, 04 Oct 2010 13:54:55 GMT

Dasa,

I was afraid that I might be the only one having this problem. I have had it with flex API 1.3, 2.0 and 2.1 with ArcGIS Server 9.3.1. The zoom functionality works but does not show the entire feature (zooms in too far) when that feature is tall and thin (vertically aligned). It works for horizontally aligned features. I can say it did not work at version 1.3 then began to work with version 2.0, but for some reason no longer works, even with 2.1. There must be something deeper than the code I posted that affects the ability of Map.extent to be updated properly. I have studied my code, but have not found anything yet. I am using a dynamic map service and flash builder 4.

One difference between my code and yours is that I am doing a spatial query from the map click. I don't see how that makes a difference, but it is a difference.

Thanks,
-Dan

Re: Setting map extent does not alter yMin and yMax of the extent

DanJensen — Sun, 12 Dec 2021 04:08:55 GMT

All,

Try this code, it suffers from the same problem and leads me to believe it may not be my code.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
      xmlns:s="library://ns.adobe.com/flex/spark"
      xmlns:esri="http://www.esri.com/2008/ags"
      xmlns:mx="library://ns.adobe.com/flex/mx">
 
 <fx:Script>
  <![CDATA[
   import com.esri.ags.Graphic;
   import com.esri.ags.events.MapMouseEvent;
   import com.esri.ags.geometry.MapPoint;
   import com.esri.ags.geometry.Polygon;
   import com.esri.ags.utils.GraphicUtil;
   import com.esri.ags.geometry.Extent;
   
   import mx.controls.Alert;
   import mx.collections.ArrayCollection;
   
   protected function Map_mapClickHandler(event:MapMouseEvent):void
   {
    //allow user to enter size of poly desired
    if(tInput1.text == ""){
     Alert.show("Please enter a number in the text input before clicking the map.");
    }else{
     
     var size:int = Number(tInput1.text);
     var halfSize:Number = size/2;
     
     var center:MapPoint=Map.toMapFromStage(event.stageX, event.stageY);
     
     var botLeft:MapPoint = new MapPoint;
     //new mapPoint is assigned the same coor sys as the map
     botLeft.spatialReference=Map.spatialReference;
     //units defined by the spatial reference
     botLeft.x=center.x-halfSize;
     botLeft.y=center.y-halfSize*20;
     
     var botRight:MapPoint = new MapPoint;
     botRight.spatialReference=Map.spatialReference;
     botRight.x=center.x+halfSize;
     botRight.y=center.y-halfSize*20;
     
     var topRight:MapPoint = new MapPoint;
     topRight.spatialReference=Map.spatialReference;
     topRight.x=center.x+halfSize;
     topRight.y=center.y+halfSize*20;
     
     var topLeft:MapPoint = new MapPoint;
     topLeft.spatialReference=Map.spatialReference;
     topLeft.x=center.x-halfSize;
     topLeft.y=center.y+halfSize*20;
     
     var newPolygon:Polygon = new Polygon;
     newPolygon.spatialReference=Map.spatialReference;
     newPolygon.rings=[[botLeft, botRight, topRight, topLeft, botLeft]];
     
     var newGraphic:Graphic = new Graphic;
     newGraphic.geometry=newPolygon;
     newGraphic.symbol=symbol1;
     
     gLayer.add(newGraphic);
     zoomToGraphics();
    }
   }
   
   private function zoomToGraphics():void            
   {                
    var graphicProvider:ArrayCollection = ArrayCollection(gLayer.graphicProvider);
    var graphicsExtent:Extent = GraphicUtil.getGraphicsExtent(graphicProvider.toArray());
    //graphicsExtent.spatialReference = Map.spatialReference;
    
    Map.extent = graphicsExtent;

    Alert.show("Map height: " + Map.extent.height + "\n gE height: " + graphicsExtent.height + "\n " + 
     "\n Map width: " + Map.extent.width + "\n gE width: " + graphicsExtent.width);
   }
   
   protected function clearGraphics_clickHandler(event:MouseEvent):void
   {
    gLayer.clear();
   }
   
  ]]>
 </fx:Script>
 
 <fx:Declarations>
  <esri:SimpleFillSymbol id="symbol1"
   style="solid"
   color="0xFF0000"
   alpha="0.3">
   <esri:outline>
    <esri:SimpleLineSymbol style="solid" color="0x000000" width="1" />
   </esri:outline>
  </esri:SimpleFillSymbol>
 </fx:Declarations>
 
 <s:BorderContainer id="mainBC"
     width="550" height="730"
     borderVisible="true"
     borderAlpha="1" borderColor="#FF0000" 
     borderStyle="solid" borderWeight="3">
  <s:layout>
   <s:VerticalLayout horizontalAlign="center" verticalAlign="middle" paddingTop="5"/>
  </s:layout>
  <s:Label text="Click the map to add a graphic" fontSize="15"/>
  <esri:Map id="Map" logoVisible="false" mapClick="Map_mapClickHandler(event)">
   
   <esri:ArcGISTiledMapServiceLayer id="mapSvc" url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"/>
   <esri:GraphicsLayer id="gLayer"/>
  </esri:Map> 
  <s:TextInput id="tInput1" text="10000"/>
  <s:Button id="clearGraphics" label="Clear Graphics" click="clearGraphics_clickHandler(event)"/>
 </s:BorderContainer>

</s:Application>

Thanks,
-Dan

Re: Setting map extent does not alter yMin and yMax of the extent

KenBuja — Sun, 12 Dec 2021 04:08:58 GMT

Hi Dan,

I was able to replicate your problem, but then I changed the size of the BorderContainer to 550x500 and it acted normally. I even put in another input box to make the graphic even thinner and taller and it didn't make a difference.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:esri="http://www.esri.com/2008/ags"
               xmlns:mx="library://ns.adobe.com/flex/mx">
    
    <fx:Script>
        <![CDATA[
            import com.esri.ags.Graphic;
            import com.esri.ags.events.MapMouseEvent;
            import com.esri.ags.geometry.MapPoint;
            import com.esri.ags.geometry.Polygon;
            import com.esri.ags.utils.GraphicUtil;
            import com.esri.ags.geometry.Extent;
            
            import mx.controls.Alert;
            import mx.collections.ArrayCollection;
            
            protected function Map_mapClickHandler(event:MapMouseEvent):void
            {
                //allow user to enter size of poly desired
                if(tInput1.text == ""){
                    Alert.show("Please enter a number in the text input before clicking the map.");
                }else{
                    
                    var size:int = Number(tInput1.text);
                    var halfSize:Number = size/2;
                    
                    var center:MapPoint=Map.toMapFromStage(event.stageX, event.stageY);
                    
                    var botLeft:MapPoint = new MapPoint;
                    //new mapPoint is assigned the same coor sys as the map
                    botLeft.spatialReference=Map.spatialReference;
                    //units defined by the spatial reference
                    botLeft.x=center.x-halfSize;
                    botLeft.y=center.y-halfSize*Number(tInput2.text);
                    
                    var botRight:MapPoint = new MapPoint;
                    botRight.spatialReference=Map.spatialReference;
                    botRight.x=center.x+halfSize;
                    botRight.y=center.y-halfSize*Number(tInput2.text);
                    
                    var topRight:MapPoint = new MapPoint;
                    topRight.spatialReference=Map.spatialReference;
                    topRight.x=center.x+halfSize;
                    topRight.y=center.y+halfSize*Number(tInput2.text);
                    
                    var topLeft:MapPoint = new MapPoint;
                    topLeft.spatialReference=Map.spatialReference;
                    topLeft.x=center.x-halfSize;
                    topLeft.y=center.y+halfSize*Number(tInput2.text);
                    
                    var newPolygon:Polygon = new Polygon;
                    newPolygon.spatialReference=Map.spatialReference;
                    newPolygon.rings=[[botLeft, botRight, topRight, topLeft, botLeft]];
                    
                    var newGraphic:Graphic = new Graphic;
                    newGraphic.geometry=newPolygon;
                    newGraphic.symbol=symbol1;
                    
                    gLayer.add(newGraphic);
                    zoomToGraphics();
                }
            }
            
            private function zoomToGraphics():void            
            {                
                var graphicProvider:ArrayCollection = ArrayCollection(gLayer.graphicProvider);
                var graphicsExtent:Extent = GraphicUtil.getGraphicsExtent(graphicProvider.toArray());
                //graphicsExtent.spatialReference = Map.spatialReference;
                
                Map.extent = graphicsExtent;
                
                Alert.show("Map height: " + Map.extent.height + "\n gE height: " + graphicsExtent.height + "\n " + 
                    "\n Map width: " + Map.extent.width + "\n gE width: " + graphicsExtent.width);
            }
            
            protected function clearGraphics_clickHandler(event:MouseEvent):void
            {
                gLayer.clear();
            }
            
        ]]>
    </fx:Script>
    
    <fx:Declarations>
        <esri:SimpleFillSymbol id="symbol1"
                               style="solid"
                               color="0xFF0000"
                               alpha="0.3">
            <esri:outline>
                <esri:SimpleLineSymbol style="solid" color="0x000000" width="1" />
            </esri:outline>
        </esri:SimpleFillSymbol>
    </fx:Declarations>
    
    <s:BorderContainer id="mainBC"
                       width="550" height="500"
                       borderVisible="true"
                       borderAlpha="1" borderColor="#FF0000" 
                       borderStyle="solid" borderWeight="3">
        <s:layout>
            <s:VerticalLayout horizontalAlign="center" verticalAlign="middle" paddingTop="5"/>
        </s:layout>
        <s:Label text="Click the map to add a graphic" fontSize="15"/>
        <esri:Map id="Map" logoVisible="false" mapClick="Map_mapClickHandler(event)">
            
            <esri:ArcGISTiledMapServiceLayer id="mapSvc" url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"/>
            <esri:GraphicsLayer id="gLayer"/>
        </esri:Map>    
        <s:TextInput id="tInput1" text="10000"/>
        <s:TextInput id="tInput2" text = "20"/>
        <s:Button id="clearGraphics" label="Clear Graphics" click="clearGraphics_clickHandler(event)"/>
    </s:BorderContainer>
    
</s:Application>

Re: Setting map extent does not alter yMin and yMax of the extent

DasaPaddock — Sun, 12 Dec 2021 04:09:01 GMT

Yes, it does seem to be a bug that happens only when the map's height is greater than its width. Here's another test case showing the issue (it works fine when the width and height are reversed or equal):

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx"
               xmlns:esri="http://www.esri.com/2008/ags">

    <s:layout>
        <s:VerticalLayout horizontalAlign="center"
                          paddingBottom="10"
                          paddingTop="10"/>
    </s:layout>

    <fx:Script>
        <![CDATA[
            protected function button1_clickHandler(event:MouseEvent):void
            {
                map.extent = testExt;
            }
        ]]>
    </fx:Script>

    <s:Button click="button1_clickHandler(event)" label="Set Extent"/>

    <esri:Map id="map"
              width="500" height="600">
        <esri:ArcGISTiledMapServiceLayer url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"/>
        <esri:GraphicsLayer>
            <esri:Graphic>
                <esri:WebMercatorExtent id="testExt"
                                        minlon="5" minlat="-80" maxlon="10" maxlat="80"/>
                <esri:symbol>
                    <esri:SimpleFillSymbol color="red"/>
                </esri:symbol>
            </esri:Graphic>
        </esri:GraphicsLayer>
    </esri:Map>

</s:Application>