Tuesday, February 24, 2009

Add Image overlay to ESRI Map in FLEX

Adding an image overlay to an ESRI Map in Flex is not really a default functionality. So when a project came along that required one I wrote this. There does seem to be a size limitation for the image you are trying to load. I did not really have a chance to explore the issue, but it worked when the image width was under 2500 pixels wide.
package com.cinque_fiori.mapping.symbols
{
 import com.esri.ags.Graphic;
 import com.esri.ags.Map;
 import com.esri.ags.esri_internal;
 import com.esri.ags.geometry.MapPoint;
 import com.esri.ags.symbol.Symbol;
 
 import flash.display.BitmapData;
 import flash.geom.Matrix;

 use namespace esri_internal;
 


 public class BitmapMarkerSymbol extends Symbol
 {
  
  private var _bitmap:BitmapData;
  private var _lowerLeft:MapPoint;
  private var _visible:Boolean;

  public function BitmapMarkerSymbol ()
  {
   super();
   this._lowerLeft = new MapPoint();
   this._bitmap;
   this._visible = true;
  }


  override esri_internal function drawGraphic( map : Map, graphic : Graphic ): void
  {
   if( graphic.geometry is MapPoint ) {
    drawBitmapOnMap( map, graphic, MapPoint( graphic.geometry ));
   }
  }


  private function drawBitmapOnMap( map : Map, graphic:Graphic,mapPoint:MapPoint ): void {
   if( this._lowerLeft != null && this._bitmap != null ){
    graphic.x = map.mapToContainerX(mapPoint.x);
    graphic.y = map.mapToContainerY(mapPoint.y);

    var w:Number = map.mapToContainerX(this._lowerLeft.x) - graphic.x;
    var h:Number = map.mapToContainerY(this._lowerLeft.y) - graphic.y;
    var m:Matrix = new Matrix(w/this._bitmap.width,0,0,h/this._bitmap.height,0,0);

    graphic.graphics.clear();
    if(this._visible){
     graphic.graphics.beginBitmapFill( this._bitmap, m , false , true );
     graphic.graphics.drawRect(0,0,w,h);
     graphic.graphics.endFill();
    }
   }
  }

  public function get lowerLeft() : MapPoint{
   return this._lowerLeft;
  }

  public function set lowerLeft( pt:MapPoint ) : void{
   this._lowerLeft = pt;
  }

  public function get bitmap() : BitmapData{
   return this._bitmap;
  }

  public function set bitmap( bitmapData:BitmapData ) : void{
   this._bitmap = bitmapData;
  }
  
  public function get visible() : Boolean{
   return this._visible; 
  }
  
  public function set visible( visible:Boolean ) : void{
   this._visible = visible;
  }
 }
}

4 comments:

  1. from the Flex help:
    'The maximum width and maximum height of a BitmapData object is 2880 pixels.'

    perhaps this addrss your 2500 pixels observation?
    -George

    ReplyDelete
  2. thanks good to know the exact size limitation.

    ReplyDelete
  3. I could not make this code work at all. Every line that I tried fix generated another error. The mapToContainerX could not be defined and I could not work around this example. It will be nice if there will be an example how this class is called within module or application itself. Otherwise it is useless for newbies like me.

    ReplyDelete
  4. I am also having problem with using this code. If some one can post proejct that uses this code, it will be helpful.

    ReplyDelete