topic MapImage not scaling correctly when multiple mapimages in MapImageLayer in ArcGIS API for Flex Questions

MapImage not scaling correctly when multiple mapimages in MapImageLayer

stevemclaughlin — Tue, 05 Feb 2013 20:10:48 GMT

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

Re: MapImage not scaling correctly when multiple mapimages in MapImageLayer

stevemclaughlin — Sat, 11 Dec 2021 16:49:15 GMT

After some more testing, it works with non-embedded assets, and fails with embedded assets,
here is some test code:

Using Flash Builder 4.6 and Flex Arcgis 3.1 API

Run the code and zoom in or out, the images jump around, they should stay on the map.
You'll need 3 small images stored in your flex project to test it out, any small images will do.
Change the 'creationComplete="zoomWorks"' to 'zoomFails' to test it out.

<?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.*"
      creationComplete="zoomFails()"
      >
 <fx:Script>
  <![CDATA[
   import com.esri.ags.geometry.WebMercatorExtent;
   import com.esri.ags.layers.MapImageLayer;
   import com.esri.ags.layers.supportClasses.MapImage;
  
   
   // 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);

    weathermapimage = new MapImage();
    weathermapimage.extent = new WebMercatorExtent( -153,35,-110,50);
    weathermapimage.source = img1;  
    mil.add(weathermapimage);
    
    weathermapimage2 = new MapImage();
    weathermapimage2.extent =new WebMercatorExtent( -3,25,38,44);
    weathermapimage2.source = img2; 
    mil.add(weathermapimage2);
    
    weathermapimage3 = new MapImage();
    weathermapimage3.extent =new WebMercatorExtent( -111,-15 ,-70,10);
    weathermapimage3.source = img3;  
    mil.add(weathermapimage3);
   }

   private function zoomWorks():void {
    
    mil = new MapImageLayer();
    map.addLayer(mil);
    
    weathermapimage = new MapImage();
    weathermapimage.extent = new WebMercatorExtent( -153,35,-110,50);
    weathermapimage.source = "http://resources.arcgis.com/en/communities/_images/mapping-charting.jpg";
    mil.add(weathermapimage);
    
    weathermapimage2 = new MapImage();
    weathermapimage2.extent =new WebMercatorExtent( -3,25,38,44);
    weathermapimage2.source = "http://resources.arcgis.com/en/shared/rc/images/logo-esri.png";
    mil.add(weathermapimage2);
    
    weathermapimage3 = new MapImage();
    weathermapimage3.extent =new WebMercatorExtent( -111,-15 ,-70,10);
    weathermapimage3.source = "http://resources.arcgis.com/en/home/images/the-power-of-maps.png";
    mil.add(weathermapimage3);
   }
   
  ]]>  
 </fx:Script>
 
 <esri:Map id="map"   >
  <esri:ArcGISTiledMapServiceLayer id="mapsl"   url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"/> 
 </esri:Map>
  
</s:Application>

Re: MapImage not scaling correctly when multiple mapimages in MapImageLayer

YannCabon — Sat, 11 Dec 2021 16:49:17 GMT

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>