nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Include Overview Map in Snapshot Image

StuartBlumberg

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

Find more posts tagged with

Accepted answers

All comments

RobertScheitlin__GISP

Stuart,

Do you have the overview widget minimized?

StuartBlumberg

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.

map.jpg

RobertScheitlin__GISP

Stuart,

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

StuartBlumberg

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.

RobertScheitlin__GISP

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

RobertScheitlin__GISP

Stuart,

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

Staurt.zip

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.