Select to view content in your preferred language

Include Overview Map in Snapshot Image

2797
36
06-03-2010 09:19 AM
StuartBlumberg
Emerging Contributor
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,

   You need to debug and put a breakpoint on this line

if (dataTable.containsKey("ovMap")) 


to see if you are getting into this if statement.
0 Kudos
RobertScheitlin__GISP
MVP Emeritus
Stuart,

  Try adding this line to the very end of the init function in the OverviewWidget.mxml
setTimeout(updateOverviewExtent, 4000);
0 Kudos
StuartBlumberg
Emerging Contributor
I actually don't think I am running the debug version of flashplayer, it says, "Flex Builder cannot locate the required debugger version of Flash Player.  You might need to install the debugger version of Flash Player 9 or reinstall Flex Builder." 

I tried adding that line at the end of the init function but still nothing happened.
0 Kudos
RobertScheitlin__GISP
MVP Emeritus
Stuart,
   Pan your map around and watch to see that the overview map is done redrawing and try exporting again.
0 Kudos
StuartBlumberg
Emerging Contributor
Robert,

I tried panning the map around and waiting for the overview map to redraw but still nothing.  I have attached two images: a screenshot of my application before I export the image; the other is the exported image.  I dont know if it makes a difference but I am using version 1.3 of the API library.
0 Kudos
RobertScheitlin__GISP
MVP Emeritus
Stuart,

   You need to get the debugger version of flash player so you can put a break point in the code as I mention in the previous post. I don't have a clue what is wrong on your end as I just took the two files and added it to another SFV project and it ran perfectly again.
0 Kudos
RobertScheitlin__GISP
MVP Emeritus
Stuart,

   Replace this code in the OverviewMapWidget.mxml


private function setOverviewExtent(event:ExtentEvent):void
   {
    ovGraphic.geometry = map.extent;
    if (overviewMode == "dynamic"){
     ovMap.extent = map.extent.expand(3);
    }
    try{
     var ac:ArrayCollection = new ArrayCollection([]);
     var bmpDat:BitmapData = ImageSnapshot.captureBitmapData(ovMap);
     ac.addItem(bmpDat);
     addSharedData("ovMap",ac);
    }
    catch(err:Error){
    }
   }   
   
   private function updateOverviewExtent():void
   {
    ovGraphic.geometry = map.extent;
    if (overviewMode == "dynamic"){
     ovMap.extent = map.extent.expand(3); 
    }
    try{
     var ac:ArrayCollection = new ArrayCollection([]);
     var bmpDat:BitmapData = ImageSnapshot.captureBitmapData(ovMap);
     ac.addItem(bmpDat);
     addSharedData("ovMap",ac);
    }
    catch(err:Error){
    }
   }
0 Kudos
StuartBlumberg
Emerging Contributor
Robert,

I have added the new code and the overview map now shows up in the bottom right corner.  However, the extent rectangle is larger than the area of the actual map.  I have attached the exported image.   Thanks.
0 Kudos
RobertScheitlin__GISP
MVP Emeritus
Stuart,

   Is that not the exact same image that is in the overviewmapwidget? Because it should be exactly the same.
0 Kudos
StuartBlumberg
Emerging Contributor
Robert,

It is the same image, however the extent rectangle is wrong, it is bigger than the area it represents in the map.  Also, unless I use the "+" or "-" on the zoom slider to zoom in/out I get the image shown in the attachement below.  If I zoom in with zoom tool or if I click inside the zoom slider to zoom into a specific scale, it shows the image as shown in the attachement.  I can only get the image in the attachement in the previous post if I use the "+" or "-" buttons.  Thanks.
0 Kudos