MapImage not scaling correctly when multiple mapimages in MapImageLayer

stevemclaughlin

Hi,
I'm using Flex 3.1 api

I've got a map and I create a MapImageLayer.
I then have 5 MapImages that I set the source to 5 .png files that I create extents for and add to the MapImageLayer using the
MapImageLayer.add(MapImage)

all looks great .... UNTIL I zoom the map and the only mapImage that scales correctly is the last one I added.
The other mapimages stay the same original size.

How do I get all MapImages to scale correctly?
(if there is not an obvious answer, I'll try to post some code)

thanks,
-steve

YannCabon

Thanks for the feedback!

There are indeed 2 issues with embedded assets in the MapImageLayer.
Here's a workaround, encode the source of the map images to byteArrays, and add them when the Map is loaded.

<?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"
               xmlns:components="components.*">
    <fx:Script>
        <![CDATA[
            import com.esri.ags.geometry.WebMercatorExtent;
            import com.esri.ags.layers.MapImageLayer;
            import com.esri.ags.layers.supportClasses.MapImage;
            
            import mx.graphics.codec.PNGEncoder;
            
            
            // any small image will do 
            [Embed("resources/images/mapping-charting.jpg")]
            private const img1:Class;
            
            [Embed("resources/images/logo-esri.png")]
            private const img2:Class;
            
            [Embed("resources/images/the-power-of-maps.png")]
            private const img3:Class;
            
            private var weathermapimage:MapImage;
            private var weathermapimage2:MapImage;
            private var weathermapimage3:MapImage;
            
            private var mil:MapImageLayer;
            
            private function zoomFails():void {
                
                mil = new MapImageLayer();
                map.addLayer(mil);
                
                var encoder:PNGEncoder = new PNGEncoder();
                var bitmap:Bitmap;
                var sourceImg1:ByteArray;
                var sourceImg2:ByteArray;
                var sourceImg3:ByteArray;
                
                bitmap = new img1();
                sourceImg1 = encoder.encode(bitmap.bitmapData);
                
                bitmap = new img2();
                sourceImg2 = encoder.encode(bitmap.bitmapData);
                
                bitmap = new img3();
                sourceImg3 = encoder.encode(bitmap.bitmapData);
                
                weathermapimage = new MapImage();
                weathermapimage.extent = new WebMercatorExtent(-153,35,-110,50);
                weathermapimage.source = sourceImg1;  
                mil.add(weathermapimage);
                
                weathermapimage2 = new MapImage();
                weathermapimage2.extent =new WebMercatorExtent(-3,25,38,44);
                weathermapimage2.source = sourceImg2; 
                mil.add(weathermapimage2);
                
                weathermapimage3 = new MapImage();
                weathermapimage3.extent =new WebMercatorExtent( -111,-15 ,-70,10);
                weathermapimage3.source = sourceImg3;  
                mil.add(weathermapimage3);
            }
            
        ]]>  
    </fx:Script>
    
    <esri:Map id="map" load="zoomFails()" >
        <esri:ArcGISTiledMapServiceLayer id="mapsl"   url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"/> 
    </esri:Map>
    
</s:Application>