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

ErwanCaradec

Thanks for your reply Karl, i'm going to release it with your label modification suggestion. It seems that the coordinate system problem in ArcGIS Explorer is independant to the jgw file generation in the widget.

Regards.

Erwan

Edit : Release done with auto resize addition

KarlWilson

Hi Erwan,

Your SnapshotWidget is really good. I've only tried the basic functionality (i.e. not the geolocation file download), but it seems to work well. You should definately release it once you're happy with it.

The labels are fine, but you may want to refer to the image selection as the "map area", rather than the "map zone".

Cheers,
Karl

MelissaJohnson

Thanks! I can quit banging my head against the wall now 🙂

RobertScheitlin__GISP

Mellisa,

FlashPlayer can not copy images to the clipboard like AIR can as this could be a huge security hole manipulated by hackers. Flash Player can only do text to the clipboard.

Same as Erwan posted a minute earlier 🙂

ErwanCaradec

Hi Melissa,
i've tried to implement this function too but i've read that clipboard can be accessed in air to copy/past text and binary data. Web browser can only past texte data in clip board due to security problems.

regards.

Erwan

MelissaJohnson

Very nice tool.

I am trying to find a way to add a third option to Copy to Clipboard to this widget so that if someone just wants to copy/paste the image into an email or word doc they could do that without having to save to their drive. I am having problems finding the right command for copying to clipboard. Does anyone know how this could be done? I have added the button and created a function copySnapshot using the saveSnapshot function but I don't know how I can do a Copy instead of Save. I tried using setClipboard (then found out that could only be used in AIR).

Pretty new to this so fumbling through it. If anyone has any ideas or can tell me where to look for info it would be appreciated.
Melissa

ErwanCaradec

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

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.

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!

KarlWilson

Thanks Robert!

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

Cheers.

ErwanCaradec

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

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).

RobertScheitlin__GISP

Karl,

Here you go:

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

ErwanCaradec

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

Erwan

KarlWilson

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.

StuartBlumberg

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

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>

StuartBlumberg

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.

map.jpg

RobertScheitlin__GISP

Stuart,

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

StuartBlumberg

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.

map.jpg

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

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.

StuartBlumberg

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,
Pan your map around and watch to see that the overview map is done redrawing and try exporting again.

StuartBlumberg

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,

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

setTimeout(updateOverviewExtent, 4000);

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.

StuartBlumberg

I replaced the entire thing, along with the overviewmap widget

RobertScheitlin__GISP

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

map.jpg

StuartBlumberg

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

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.