topic Re: Include Overview Map in Snapshot Image in ArcGIS API for Flex Questions

Include Overview Map in Snapshot Image

StuartBlumberg — Thu, 03 Jun 2010 16:19:14 GMT

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");

Re: Include Overview Map in Snapshot Image

RobertScheitlin__GISP — Thu, 03 Jun 2010 17:39:32 GMT

Stuart,

This was a little tricky and is still a little unpolished but here it is.

Re: Include Overview Map in Snapshot Image

RobertScheitlin__GISP — Sat, 11 Dec 2021 13:33:52 GMT

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");
   }

Re: Include Overview Map in Snapshot Image

StuartBlumberg — Thu, 03 Jun 2010 19:11:42 GMT

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.

Re: Include Overview Map in Snapshot Image

RobertScheitlin__GISP — Thu, 03 Jun 2010 19:21:42 GMT

Stuart,

Not sure I understand... Can you attach the image it produced? I have been producing some good looking images using this code today.

Re: Include Overview Map in Snapshot Image

StuartBlumberg — Thu, 03 Jun 2010 19:25:17 GMT

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.

Re: Include Overview Map in Snapshot Image

RobertScheitlin__GISP — Thu, 03 Jun 2010 19:29:31 GMT

Stuart,

Do you have the overview widget minimized?

Re: Include Overview Map in Snapshot Image

StuartBlumberg — Thu, 03 Jun 2010 19:32:13 GMT

At first I did, then I set it to preload=true but still no overview map in export.

Re: Include Overview Map in Snapshot Image

RobertScheitlin__GISP — Thu, 03 Jun 2010 19:36:30 GMT

Did you replace your whole index.mxml or just grab the parts you needed? This is what I am getting.

Re: Include Overview Map in Snapshot Image

StuartBlumberg — Thu, 03 Jun 2010 19:38:55 GMT

I replaced the entire thing, along with the overviewmap widget

Re: Include Overview Map in Snapshot Image

RobertScheitlin__GISP — Thu, 03 Jun 2010 19:42:35 GMT

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.

Re: Include Overview Map in Snapshot Image

RobertScheitlin__GISP — Thu, 03 Jun 2010 19:54:12 GMT

Stuart,

Try adding this line to the very end of the init function in the OverviewWidget.mxml

setTimeout(updateOverviewExtent, 4000);

Re: Include Overview Map in Snapshot Image

StuartBlumberg — Thu, 03 Jun 2010 19:59:43 GMT

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.

Re: Include Overview Map in Snapshot Image

RobertScheitlin__GISP — Thu, 03 Jun 2010 20:01:58 GMT

Stuart,
Pan your map around and watch to see that the overview map is done redrawing and try exporting again.

Re: Include Overview Map in Snapshot Image

StuartBlumberg — Fri, 04 Jun 2010 12:09:17 GMT

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.

Re: Include Overview Map in Snapshot Image

RobertScheitlin__GISP — Fri, 04 Jun 2010 12:38:26 GMT

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.

Re: Include Overview Map in Snapshot Image

RobertScheitlin__GISP — Sat, 11 Dec 2021 13:33:55 GMT

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){
    }
   }

Re: Include Overview Map in Snapshot Image

StuartBlumberg — Mon, 07 Jun 2010 12:54:07 GMT

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.

Re: Include Overview Map in Snapshot Image

RobertScheitlin__GISP — Mon, 07 Jun 2010 15:16:31 GMT

Stuart,

Is that not the exact same image that is in the overviewmapwidget? Because it should be exactly the same.

Re: Include Overview Map in Snapshot Image

StuartBlumberg — Mon, 07 Jun 2010 15:42:15 GMT

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.