Zoom to extent for tiled basemap issue

[KenBuja]

My application uses a tiled map service as the base and I want to zoom to a particular extent that would contain all of the graphics on it. I set the extent and zoom to it, but depending on the browser size, not all of the graphics are shown as expected. I'm using the line

if (!mapMain.extent.contains(newExtent)) mapMain.level--;

to zoom out one level, but that doesn't always seem to work. The attached graphics shows the results of two different browser sizes.

Here's the test code to create this (using Flex 4.6 and the 3.0 API)

<?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" minWidth="955" minHeight="600" xmlns:esri="http://www.esri.com/2008/ags"                creationComplete="application1_creationCompleteHandler(event)">     <fx:Script>         <=!=[=C=D=A=T=A=[             import com.esri.ags.Graphic;             import com.esri.ags.geometry.Extent;             import com.esri.ags.geometry.WebMercatorExtent;             import com.esri.ags.geometry.WebMercatorMapPoint;                          import mx.events.FlexEvent;                          protected function application1_creationCompleteHandler(event:FlexEvent):void             {                 var newExtent:Extent = new WebMercatorExtent(-179, -14, -64, 25);                 var graphic:Graphic;                                  graphic = new Graphic(new WebMercatorMapPoint(-179, -14));                 layerGraphics.add(graphic);                                  graphic = new Graphic(new WebMercatorMapPoint(-64, 25));                 layerGraphics.add(graphic);                                                   mapMain.extent = newExtent;                                  if (!mapMain.extent.contains(newExtent)) mapMain.level--;             }                      ]=]=>     </fx:Script>     <fx:Declarations>         <!-- Place non-visual elements (e.g., services, value objects) here -->     </fx:Declarations>          <esri:Map id="mapMain" wrapAround180="true">         <esri:ArcGISTiledMapServiceLayer id="layerOceans" alpha="1.0" url="http://server.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer" visible="true"/>         <esri:GraphicsLayer id="layerGraphics" buttonMode="true"/>     </esri:Map> </s:Application>  

[Anonymous User]

Original User: ibespalov

Ken,

if i remove application minWidth and minHeight params

<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" 
               minWidth="955" minHeight="600" 
               xmlns:esri="http://www.esri.com/2008/ags"
               creationComplete="application1_creationCompleteHandler(event)">

everything works fine

<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"
 creationComplete="application1_creationCompleteHandler(event)">
    <fx:Script>
        <![CDATA[
         import com.esri.ags.Graphic;
  import com.esri.ags.geometry.Extent;
  import com.esri.ags.geometry.WebMercatorExtent;
  import com.esri.ags.geometry.WebMercatorMapPoint;
   
  import mx.controls.Alert;
  import mx.events.FlexEvent;
   
  protected function application1_creationCompleteHandler(event:FlexEvent):void
  {
                    // javascript method - get html document width and height
             var method:String = "function()"
                        + "{ var obj = new Object();" 
                        + "obj.width=document.body.offsetWidth;"
                        + "obj.height=document.body.offsetHeight;" 
                        + "return obj; }";
      var obj:Object = ExternalInterface.call(method);
                    // create alert message
      var message:String = "Browser h:" + obj.height + "\nBrowser w:" + obj.width
                        + "\nApp h:" + this.height + "\nApp w:" + this.width
                        + "\nMap h:" + mapMain.height + "\nMap w:" + mapMain.width;
      Alert.show(message);

      var newExtent:Extent = new WebMercatorExtent(-179, -14, -64, 25);
      var graphic:Graphic;
   
      graphic = new Graphic(new WebMercatorMapPoint(-179, -14));
      layerGraphics.add(graphic);
   
      graphic = new Graphic(new WebMercatorMapPoint(-64, 25));
      layerGraphics.add(graphic);
    
      mapMain.extent = newExtent;
    
      if (!mapMain.extent.contains(newExtent)) mapMain.level--;
  }

 ]]>
  
    </fx:Script>
 
    <esri:Map id="mapMain" 
            wrapAround180="true">
        <esri:ArcGISTiledMapServiceLayer id="layerOceans" 
          url="http://server.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer"/>
 <esri:GraphicsLayer id="layerGraphics"/>
    </esri:Map>
</s:Application>

Launched in IE9 Flash player debug version 11.2.202.235

[KenBuja · Accepted solution]

Thanks Ivan,

It turns out that wasn't quite the issue in my original project. Working with other extents and additional services still gave me problems where the extent didn't quite cover the expected territory. It turns out that I was using the wrong event in my project. I was application's initialize event to check the extent. When I changed that to the creationComplete event, it worked as expected.