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

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

Najděte více příspěvků označených jako

Accepted answers

All comments

RobertScheitlin__GISP

Stuart,

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

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

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,

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

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.

RobertScheitlin__GISP

Stuart,

Do you have the overview widget minimized?

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

RobertScheitlin__GISP

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

I replaced the entire thing, along with the overviewmap widget

RobertScheitlin__GISP

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.

RobertScheitlin__GISP

Stuart,

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

setTimeout(updateOverviewExtent, 4000);

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.

RobertScheitlin__GISP

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

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.

Image_to_Export.jpg

Exported_Image.jpg

RobertScheitlin__GISP

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.

RobertScheitlin__GISP

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

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.

RobertScheitlin__GISP

Stuart,

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

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.

RobertScheitlin__GISP

Stuart,

OK I think I got it worked out for dynamic and static this time.

<?xml version="1.0" encoding="utf-8"?>
<!--
////////////////////////////////////////////////////////////////////////////////
//
// Copyright Â© 2008 - 2009 ESRI
//
// All rights reserved under the copyright laws of the United States.
// You may freely redistribute and use this software, with or
// without modification, provided you include the original copyright
// and use restrictions.  See use restrictions in the file:
// <install location>/FlexViewer/License.txt
//
////////////////////////////////////////////////////////////////////////////////
-->
<BaseWidget xmlns    ="com.esri.solutions.flexviewer.*" 
   xmlns:esri   ="http://www.esri.com/2008/ags" 
   xmlns:mx   ="http://www.adobe.com/2006/mxml" 
   xmlns:mxeffects  ="com.adobe.ac.mxeffects.*"
   xmlns:widgets  ="com.esri.solutions.flexviewer.widgets.*"
   x     ="600" 
   y     ="300" 
   widgetConfigLoaded ="init()">
 
 
 <mx:Script>
  <![CDATA[
   import com.esri.ags.events.LayerEvent;
   import mx.collections.ArrayCollection;
   import com.esri.ags.utils.WebMercatorUtil;  
   import com.esri.ags.virtualearth.VETiledLayer;
   import com.esri.ags.events.ExtentEvent;
   import com.esri.ags.geometry.Extent;
   import com.esri.ags.geometry.MapPoint;
   import com.esri.ags.Graphic;
   import com.esri.ags.layers.GraphicsLayer;
   import com.esri.ags.layers.ArcGISDynamicMapServiceLayer;
   import com.esri.ags.layers.ArcGISTiledMapServiceLayer;
   import com.esri.ags.symbol.SimpleFillSymbol;
   import com.esri.ags.symbol.SimpleLineSymbol;
   import com.esri.ags.Map;
   import flash.events.MouseEvent;
   import mx.controls.Alert;
   import mx.graphics.ImageSnapshot;   
   
   private var overviewMode:String;
   
   private var graphicLineSym:SimpleLineSymbol = new SimpleLineSymbol("solid", 0xFF0000, 0.8, 3);
   
   private var graphicPolySym:SimpleFillSymbol = new SimpleFillSymbol(null, 0xFF0000, 0.01, graphicLineSym);
   
   private var graphicsLayer:GraphicsLayer;
   
   private var ovGraphic:Graphic;
   
   private var xOff:Number;
   
      private var yOff:Number;
    
   private function init():void
   {
    if (configXML)
    {
     var type:String = configXML.mapservice.@type;
     var url:String = configXML.mapservice;
     var style:String = configXML.mapservice.@style;
     var label:String = configXML.mapservice.@label;
     overviewMode = configXML.mapservice.@mode;
     
     switch (type.toLowerCase())
     {
      case "tiled":
      {
       var tiledlayer:ArcGISTiledMapServiceLayer = new ArcGISTiledMapServiceLayer(url);
       tiledlayer.alpha = alpha;
       if (overviewMode == "dynamic")
        tiledlayer.addEventListener(LayerEvent.TILES_UPDATED,updateOvExtent);
       ovMap.addLayer(tiledlayer);
       break;
      }
       
      case "dynamic":
      {
       var dynlayer:ArcGISDynamicMapServiceLayer = new ArcGISDynamicMapServiceLayer(url);
       dynlayer.alpha = alpha;
       if (overviewMode == "dynamic")
        dynlayer.addEventListener(Event.COMPLETE,updateOvExtent);
       ovMap.addLayer(dynlayer);
       break;
      }
      
      case "virtualearth":
      {
       var veTiledLayer:VETiledLayer =  new VETiledLayer();
       veTiledLayer.id = label;
        veTiledLayer.tokenURL = url;
        veTiledLayer.environment = "production";
        veTiledLayer.visible = true; 
        veTiledLayer.alpha = alpha;
        veTiledLayer.mapStyle = style;
        veTiledLayer.name = label;
        ovMap.addLayer(veTiledLayer);
        break;
      }
     }
                
     graphicsLayer = new GraphicsLayer();
     graphicsLayer.symbol = graphicPolySym;
     ovMap.addLayer(graphicsLayer);     
     ovGraphic = new Graphic();          
     ovGraphic.geometry = map.extent;
     ovGraphic.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
     ovGraphic.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
     graphicsLayer.add(ovGraphic);
     map.addEventListener(ExtentEvent.EXTENT_CHANGE, setOverviewExtent);
     ovGraphic.addEventListener(Event.CHANGE,updateOvExtent);
     updateOverviewExtent();
     setTimeout(updateOverviewExtent, 4000);
    }
   }   
   
   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){
    }
    AddOVMap();
   }   
   
   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){
    }
    AddOVMap();   
   }
   
   private function updateOvExtent(Evt:Event):void
   {
    callLater(AddOVMap,null);
   }
   
   private function AddOVMap():void
   {
    try{
     var ac:ArrayCollection = new ArrayCollection([]);
     var bmpDat:BitmapData = ImageSnapshot.captureBitmapData(ovMap);
     ac.addItem(bmpDat);
     addSharedData("ovMap",ac);
    }
    catch(err:Error){
    }
   }
   
   private function mouseDownHandler(event:MouseEvent):void 
      {
       var ext:Extent = ovGraphic.geometry as Extent;
       var mPt:MapPoint = ovMap.toMapFromStage(event.stageX, event.stageY);
       xOff = ext.center.x - mPt.x;
          yOff = ext.center.y - mPt.y;
          ovGraphic.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
   }           
              
   private function mouseMoveHandler(event:MouseEvent):void 
      {
       var mPt:MapPoint = ovMap.toMapFromStage(event.stageX, event.stageY);
       var tempX:Number = mPt.x + xOff;
    var tempY:Number = mPt.y + yOff; 
    var ext:Extent = ovGraphic.geometry as Extent;
    var newext:Extent = new Extent(tempX - ext.width / 2, tempY - ext.height/ 2, tempX + ext.width / 2, tempY + ext.height / 2);
       ovGraphic.geometry = newext;
       if (!event.buttonDown)
        ovGraphic.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler); 
   }          
          
      private function mouseUpHandler(event:MouseEvent):void 
      {
       map.extent = ovGraphic.geometry as Extent;
       ovGraphic.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);    
      }      
      
      private function widgetOpenedHandler(event:Event):void
   {
    map.addEventListener(ExtentEvent.EXTENT_CHANGE, setOverviewExtent);
    setTimeout(updateOverviewExtent, 1000);
   }   
   
      private function widgetClosedHandler(event:Event):void
   {
    map.removeEventListener(ExtentEvent.EXTENT_CHANGE, setOverviewExtent);
   }   
   
   private function widgetMinimizedHandler(event:Event):void
   {
    map.removeEventListener(ExtentEvent.EXTENT_CHANGE, setOverviewExtent);
   }
    
  ]]>
 </mx:Script>
 

 <WidgetTemplate id="wTemplate" widgetClosed="widgetClosedHandler(event)" widgetOpened="widgetOpenedHandler(event)" widgetMinimized="widgetMinimizedHandler(event)">
  <esri:Map id       ="ovMap" 
     width      ="100%"
     height      ="100%"
     panArrowsVisible   ="false" 
     zoomSliderVisible   ="false" 
     logoVisible     ="false" 
     scaleBarVisible    ="false" 
     panEnabled     ="false"
     clickRecenterEnabled  ="false"
     doubleClickZoomEnabled  ="false"
      keyboardNavigationEnabled ="false"
      rubberbandZoomEnabled  ="false"
     scrollWheelZoomEnabled  ="false">
  </esri:Map>
 </WidgetTemplate>
</BaseWidget>

Works beautifully now, you are a genius! City workers here will be pleased. Thank you!

Hello,

I'd like to be able to have this "snapshot" functionality in a widget for SFV 2.1 so that I can save a map as a JPG. Does something like this already exist?

If not, what would be the best way to go about creating this? Some tips for a beginner here would be much appreciated!

Thanks.

Is it possible to make a snapshot of a specified extent of the map without zooming ?

Erwan

Wolf_1-1626968857814.png

RobertScheitlin__GISP

Karl,

Here you go:

http://www.arcgis.com/home/item.html?id=12430e982e534fdabe15635828405e45

RobertScheitlin__GISP

Erwan,

It would take you using the exportMapImage method on the map services that supported it and merging them together in flex using bitmap methods (to the best of my knowledge).

Thanks Robert ! You showed me the right way using the bitmap methods.
But instead of using captureImage method of ImageSnapshot, i directly use captureBitmapData, wich return a BitmapData. Then I can copy only pixels corresponding to the rectangle of my selected extent.

Finally, i could create a SnapshotWidget wich can save selected part of the map (with a preview) or the entire map in formart jpg or png.

http://erwan.caradec.pagesperso-orange.fr/flexViewer/index.html?config=configs/tests/config.xml

Regards

Erwan

Thanks Robert!

Erwan, your widget is very neat. Are you planning to add that to the code gallery by any chance?

Cheers.

philippschnetzer

Robert,

Great ExportMapImage widget! Is it possible to allow certain widgets to be able to be included in the jpg as well? Namely your dynamic legend should be included in an exported image of the map. Would be great to know where to add this in the code...

Thanks!

RobertScheitlin__GISP

Phillip,

There is a public function (exportImage) that can be called on the DynamicLegendWidget that will return a BitmapImage. But you will still have to work with flex bitmap objects to place and combine the returned BitmapImage with the one that is returned for the map. Sorry I don't have time to give a code example right now.

Karl,
here is a beta version of the SnapshotWidget, now it can create a zip file including the image and geolocation file (worldfile .jgw). The jpeg file can be imported in arcmap using the same coordinate system as the FlewViewer map.
I'm a noob widget developper so if some users could test it before publishing a release version it would be fine. I'm also a poor english speaker so if default labels should be modified, comments woul'd be appreciated.
Actually in ArcGIS Explorer i've got some problems to load the jpg file, i need time or idea to solve the problem.

Erwan

View in live : http://erwan.caradec.pagesperso-orange.fr/flexViewer/index.html?config=configs/tests/config.xml

Snapshot_beta_20101018.zip

Připojte se ke konverzaci

Přihlášení členové mohou přispívat, sledovat aktualizace a další. Jste tu noví? Zaregistrujte si bezplatný účet.

Rychlé odkazy

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