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

Vind meer berichten getagd met

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

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

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