Select to view content in your preferred language

Include Overview Map in Snapshot Image

2259
36
06-03-2010 09:19 AM
StuartBlumberg
New Contributor II
I am using a "snapshot" button in order to export the current extent as a JPEG.  How would I include an overview map in a corner of the JPEG snapshot showing where in the city the snapshot is showing?  I am using the Flex Sample Viewer.  I am using the following code to create the snapshot:

private function clickHandler() : void   
   {       
   var map:Map = SiteContainer.getInstance().controller.map;
   const decoder: JPEGEncoder = new JPEGEncoder();       
   map.logoVisible=false;       
   map.scaleBarVisible=true;
   map.zoomSliderVisible = false;
   SiteContainer.getInstance().mapManager.control.visible = false;
  
               //get the current background color of the map
               var currentMapColor:Object = map.getStyle("backgroundColor");
               //set the background color to white
               map.setStyle("backgroundColor", "#CCCCCC");  
               //validate the changes                        
               map.validateNow();      
   const imageSnapshot:ImageSnapshot =
  ImageSnapshot.captureImage(map);       
   map.logoVisible=true;       
   map.scaleBarVisible=true;       
   map.zoomSliderVisible = true;
   map.setStyle("backgroundColor", currentMapColor);
               //validate the changes            
               map.validateNow();     
   const fileReference:FileReference = new
  FileReference();       
   fileReference.save
  (imageSnapshot.data,"map.jpg");
Tags (2)
0 Kudos
36 Replies
RobertScheitlin__GISP
MVP Emeritus
Stuart,

    This was a little tricky and is still a little unpolished but here it is.
0 Kudos
RobertScheitlin__GISP
MVP Emeritus
Stuart,

   Here is some code to add a black border around the Overview image

private function clickHandler() : void
   {
    var ovBMDat:BitmapData;
    if(dataTable){
     if (dataTable.containsKey("ovMap"))
     {
      var recAC:ArrayCollection = dataTable.find("ovMap") as ArrayCollection;
      ovBMDat = recAC.getItemAt(0) as BitmapData
      var novBMDat:BitmapData = new BitmapData(ovBMDat.width + 2,ovBMDat.height + 2,true,0x000000);
      var srcRect:Rectangle = new Rectangle(0, 0, ovBMDat.width, ovBMDat.height);
      novBMDat.copyPixels(ovBMDat,srcRect,new Point(1,1));
     }
    }
    
    var map:Map = SiteContainer.getInstance().controller.map;
    const decoder: JPEGEncoder = new JPEGEncoder();
    map.logoVisible=false;
    map.scaleBarVisible=true;
    map.zoomSliderVisible = false;
    //SiteContainer.getInstance().mapManager.control.visible = false;
    
    //get the current background color of the map
    var currentMapColor:Object = map.getStyle("backgroundColor");
    //set the background color to white
    map.setStyle("backgroundColor", "#CCCCCC");
    //validate the changes
    map.validateNow();
    var bmpDat:BitmapData = ImageSnapshot.captureBitmapData(map);
    if (novBMDat){
     
     var pnt:Point = new Point((bmpDat.width - novBMDat.width), (bmpDat.height - novBMDat.height));
     var rect:Rectangle = new Rectangle(0, 0, novBMDat.width, novBMDat.height);
     bmpDat.merge(novBMDat,rect,pnt,mult,mult,mult,mult);
    }
    const encoder: JPEGEncoder = new JPEGEncoder(80);    
    map.logoVisible=true;
    map.scaleBarVisible=true;
    map.zoomSliderVisible = true;
    map.setStyle("backgroundColor", currentMapColor);
    //validate the changes
    map.validateNow();
    const fileReference:FileReference = new FileReference();
    fileReference.save(encoder.encode(bmpDat),"map.jpg");
   }
0 Kudos
StuartBlumberg
New Contributor II
Robert,

I replaced the two widgets with the code you provided however there is no overview map, but now there is the next/previous extent buttons from the zoom slider on the image.
0 Kudos
RobertScheitlin__GISP
MVP Emeritus
Stuart,

   Not sure I understand... Can you attach the image it produced? I have been producing some good looking images using this code today.
0 Kudos
StuartBlumberg
New Contributor II
Robert,

I uncommented the line:

SiteContainer.getInstance().mapManager.control.visible = false;

to get rid of the next/previous extent buttons but there is no overview map.  I attached a sample image, thanks.
0 Kudos
RobertScheitlin__GISP
MVP Emeritus
Stuart,

   Do you have the overview widget minimized?
0 Kudos
StuartBlumberg
New Contributor II
At first I did, then I set it to preload=true but still no overview map in export.
0 Kudos
RobertScheitlin__GISP
MVP Emeritus
Did you replace your whole index.mxml or just grab the parts you needed? This is what I am getting.
0 Kudos
StuartBlumberg
New Contributor II
I replaced the entire thing, along with the overviewmap widget
0 Kudos