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

How to send a copy of the map to the Popup window as Image

KomanDiabate

Hi All,
I am trying to send a copy of the map to a popup window (TitleWindow) as an image. In the titlewindow, I have implemented the map setter and use the ImageSnapshot.CaptureBitmapData(map) to create a snapshot of the map which is then assigned to a imagecontrol. However, when I run the application the map image in not showing. Not sure what I am doing wrong, but I have seen examples of this being use by others and Wondering if somebody can help me on this issue.

private var _map:Map; private var _data:Object;    public function set dProvider(value:Object):void {  _data=value;  ParcelRepeater.dataProvider=_data; } public function set map(value:Map):void {           _map = value;   _map.zoomSliderVisible = false;  _map.scaleBarVisible = false;  var bmpMap:BitmapData = ImageSnapshot.captureBitmapData(_map);  var bmp:Bitmap = new Bitmap(bmpMap);          _map.zoomSliderVisible = true;  _map.scaleBarVisible = true;  MapImage.source=bmp; }

Thanks all.

Encontre mais publicações marcadas com

Accepted answers

RobertScheitlin__GISP

Koman,

You have to listen for the GraphicsLayer Update end event:

            private function onQueryComplete(event:QueryEvent):void             {                 myGraphicsLayer.clear();                 var fset:FeatureSet=event.featureSet;                 for each (var graphic:Graphic in fset.features)                 {                     graphic.symbol=parcel_Symbol;                                          graphic.infoWindowRenderer=kdRenderer;                     myGraphicsLayer.add(graphic);                     //Alert.show(fset.features.length.toString());                     try                     {                         var obj:Object=fset.attributes;                         dg=test(PopUpManager.createPopUp(map, test, false));                         PopUpManager.centerPopUp(dg);                         dg.dProvider=obj;                         myGraphicsLayer.addEventListener(LayerEvent.UPDATE_END, addMap);                                                  function addMap(evt:Event):void{                             setTimeout(setMap, 1000);                         }                                                  function setMap():void                         {                             dg.map = map;                         }                                              }                     catch(error:Error)                     {                         //error.message();                     }                 }                         }

Then because of the delay in adding the map to the title window you need to let the user know that something is going on:

<?xml version="1.0" encoding="utf-8"?> <mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"                 xmlns:esri="http://www.esri.com/2008/ags"                 xmlns:s="library://ns.adobe.com/flex/spark"                 layout="vertical" showCloseButton="true"                 close="titlewindow1_closeHandler(event)">     <mx:Script>         <![CDATA[             import com.esri.ags.Map;                          import mx.controls.Alert;             import mx.events.CloseEvent;             import mx.graphics.ImageSnapshot;             import mx.graphics.codec.JPEGEncoder;             import mx.managers.PopUpManager;                          import spark.primitives.BitmapImage;                     private var _map:Map;             private var _data:Object;                          public function set dProvider(value:Object):void             {                 _data=value;                 ParcelRepeater.dataProvider=_data;             }             public function set map(value:Map):void             {                              _map = value;                 _map.zoomSliderVisible = false;                 _map.validateNow();                 var bmpMap:BitmapData = ImageSnapshot.captureBitmapData(_map);                                  var bmp:Bitmap = new Bitmap(bmpMap);                 MapImage.width = 183;                 MapImage.height = 129;                 MapImage.source = bmp;                 _map.zoomSliderVisible = true;             }                              protected function titlewindow1_closeHandler(event:CloseEvent):void             {                 PopUpManager.removePopUp(this);             }                      ]]>     </mx:Script>     <mx:Repeater id="ParcelRepeater">         <mx:Label text="Parcel Number:" fontWeight="bold"/>         <mx:Label text="{(ParcelRepeater.currentItem).APN}"/>     </mx:Repeater>     <mx:VBox horizontalAlign="center" verticalAlign="middle" width="190" height="100%">         <mx:Image id="MapImage" width="80" height="80" source="assets/images/progressCircle.swf" />     </mx:VBox> </mx:TitleWindow>

Attached you will find the asset progessCircle.swf

progressCircle.zip

All comments

RobertScheitlin__GISP

Koman,

Maybe seeing your complete code for the popup will help.

KomanDiabate

Good Point, Here is the code:
From the main mxml, I am running a parcel query and zoom to the parcel and then I have a onQueryComplete() to add graphic and open popup window(see code segment below).

private function onQueryComplete(event:QueryEvent):void
   {
    myGraphicsLayer.clear();
    var fset:FeatureSet=event.featureSet;
    for each (var graphic:Graphic in fset.features)
    {
     graphic.symbol=parcel_Symbol;
     
     graphic.infoWindowRenderer=kdRenderer;
     myGraphicsLayer.add(graphic);
     //Alert.show(fset.features.length.toString());
     try
     {
      var obj:Object=fset.attributes;
      dg=test(PopUpManager.createPopUp(map, test, false));
      PopUpManager.centerPopUp(dg);
      dg.dProvider=obj;
      
     }
     catch(error:Error)
     {
      //error.message();
     }
    }   
   }

Then here is the code for the test popup with parcel number and map (see below).

<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:esri="http://www.esri.com/2008/ags"
    layout="vertical" showCloseButton="true" xmlns:s="library://ns.adobe.com/flex/spark">
 <mx:Script>
 <![CDATA[
  import com.esri.ags.Map;
  import mx.graphics.codec.JPEGEncoder;
  import mx.graphics.ImageSnapshot;
  import mx.managers.PopUpManager;
  import mx.events.CloseEvent;
  import mx.controls.Alert;  
  private var _map:Map;
  private var _data:Object;
    
  public function set dProvider(value:Object):void
  {
   _data=value;
   ParcelRepeater.dataProvider=_data;
  }
  public function set map(value:Map):void
  {    
   _map=value;
   var bmpMap:BitmapData = ImageSnapshot.captureBitmapData(_map);
   var bmp:Bitmap = new Bitmap(bmpMap); 
   //var mig:Image = new Image(); 
   MapImage.source = bmp;   
  } 
 ]]>
 </mx:Script>
 <mx:Repeater id="ParcelRepeater">
  <mx:Label text="Parcel Number:" fontWeight="bold"/>
  <mx:Label text="{(ParcelRepeater.currentItem).APN}"/>
 </mx:Repeater>
 <mx:Image id="MapImage" width="183" height="179" />
</mx:TitleWindow>

Thank you so much for you help, I appreciate it.

RobertScheitlin__GISP

Koman,

What version of the AGS Flex API are you using? What Adobe SDK Version are your building against?

KomanDiabate

Hi Robert,
I am using Flex api 3.0 (agslib-3.0) and Adobe Flash Builder 4.6

Thanks.

RobertScheitlin__GISP

Koman,

Where do you declare test and what does that line look like and what does the kdRenderer code look like?

KomanDiabate

Hi Robert,
Here is the entire code for the main mxml - that should answer both questions.
test.mxml is a titlewindow component stored in the component folder and kdRenderer in a component in the main mxml (see below)

<fx:Component  className="kdInfoRenderer">
   <mx:VBox backgroundColor="0xffffff"
      color="0x444444"
      label="Parcel {data.APN}">
    <mx:Label text="Owner: {data.OWN_NAME1}"/>
    <mx:Label text="Address: {data. OWN_ADDR1}"/>
    <mx:Label text="Land Value: {data.ASR_LAND}"/>
    <mx:Label text="Landuse: {data.ASR_LANDUSE}"/>
   </mx:VBox>
  </fx:Component>

Here is QueryParcel.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
      xmlns:esri="http://www.esri.com/2008/ags"
      xmlns:s="library://ns.adobe.com/flex/spark" 
      xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
 <s:layout>
  <s:VerticalLayout gap="10"
        horizontalAlign="center"
        paddingBottom="20"
        paddingLeft="25"
        paddingRight="25"
        paddingTop="20"/>
 </s:layout>
 
 <fx:Script>
  <![CDATA[
   import com.esri.ags.FeatureSet;
   import com.esri.ags.Graphic;
   import com.esri.ags.events.QueryEvent;
   import com.esri.ags.utils.GraphicUtil;
   import mx.managers.PopUpManager;
   import component.component;
   import mx.controls.Alert;
   import component.test;
   private var dg:test;  
   import mx.rpc.AsyncResponder;
   private  var kdRenderer:ClassFactory = new ClassFactory(kdInfoRenderer);   
   private function doQuery():void
   {
    // clear the graphics layer
    myGraphicsLayer.clear();
    
    queryTask_Parcel.execute(query, new AsyncResponder(onResult, onFault));
    function onResult(featureSet:FeatureSet, token:Object = null):void
    {
     
     if (featureSet.features.length == 0)
     {
      Alert.show("No Parcel found. Please try again.");
     }
     else
     {
      var graphicsExtent:Extent = GraphicUtil.getGraphicsExtent(featureSet.features);
      if (graphicsExtent)
      {
       map.extent = graphicsExtent ;
      }
     }
    }
    function onFault(info:Object, token:Object = null):void
    {
     Alert.show(info.toString());
    }
   }
   
   private function onQueryComplete(event:QueryEvent):void
   {
    myGraphicsLayer.clear();
    var fset:FeatureSet=event.featureSet;
    for each (var graphic:Graphic in fset.features)
    {
     graphic.symbol=parcel_Symbol;
     
     graphic.infoWindowRenderer=kdRenderer;
     myGraphicsLayer.add(graphic);
     //Alert.show(fset.features.length.toString());
     try
     {
      var obj:Object=fset.attributes;
      dg=test(PopUpManager.createPopUp(map, test, false));
      PopUpManager.centerPopUp(dg);
      dg.dProvider=obj;
      
     }
     catch(error:Error)
     {
      //error.message();
     }
    }   
   }
  ]]>
 </fx:Script>
 <fx:Declarations>
  <esri:QueryTask id="queryTask_Parcel" executeComplete="onQueryComplete(event)"
      showBusyCursor="true"
      url="http://xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
      useAMF="false"/>
  
  <esri:Query id="query"
     outSpatialReference="{map.spatialReference}"
     returnGeometry="true"
     where = "APN='{apnText.text}'">
   <esri:outFields>*</esri:outFields>
  </esri:Query>
  <esri:SimpleFillSymbol id="parcel_Symbol" alpha="0.2">
   <esri:SimpleLineSymbol color="0xFF6600" width="3" alpha="0.9" style="solid"/>
  </esri:SimpleFillSymbol>
  
  <fx:Component  className="kdInfoRenderer">
   <mx:VBox backgroundColor="0xffffff"
      color="0x444444"
      label="Parcel {data.APN}">
    <mx:Label text="Owner: {data.OWN_NAME1}"/>
    <mx:Label text="Address: {data. OWN_ADDR1}"/>
    <mx:Label text="Land Value: {data.ASR_LAND}"/>
    <mx:Label text="Landuse: {data.ASR_LANDUSE}"/>
   </mx:VBox>
  </fx:Component>
   
 </fx:Declarations>
 <s:Panel height="60"
    backgroundColor="0xB2BFC6"
    title="Query a layer (search for a state)">
  <s:layout>
   <s:HorizontalLayout/>
  </s:layout>
  <s:TextInput id="apnText"
      width="100%"
      enter="doQuery()"
      text="4612721700"/>
  <s:Button click="doQuery()" label="Do Query"/>
 </s:Panel>
 
 <esri:Map id="map">
  <esri:extent>            
   <esri:Extent xmax="-12926517.59" xmin="-13099670.77" ymax="3982917.86"
       ymin="3815522.942">       
    <esri:SpatialReference wkid="3857"/>            
   </esri:Extent>        
  </esri:extent>
  <esri:ArcGISTiledMapServiceLayer url="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"/>
  
  <esri:GraphicsLayer id="myGraphicsLayer"/>
 </esri:Map>

</s:Application>

RobertScheitlin__GISP

Koman,

Your issue is that you are never setting the map in the test popup:

            private function onQueryComplete(event:QueryEvent):void
            {
                myGraphicsLayer.clear();
                var fset:FeatureSet=event.featureSet;
                for each (var graphic:Graphic in fset.features)
                {
                    graphic.symbol=parcel_Symbol;
                    
                    graphic.infoWindowRenderer=kdRenderer;
                    myGraphicsLayer.add(graphic);
                    //Alert.show(fset.features.length.toString());
                    try
                    {
                        var obj:Object=fset.attributes;
                        dg=test(PopUpManager.createPopUp(map, test, false));
                        PopUpManager.centerPopUp(dg);
                        dg.dProvider=obj;
                        dg.map = map;
                    }
                    catch(error:Error)
                    {
                        //error.message();
                    }
                }

You should also start trying to use spark components instead of mx components in your development.

Don't forget to click the Mark as answer check on this post and to click the top arrow (promote).
Follow the steps as shown in the below graphic:

KomanDiabate

That was it.
dg.map=map did the trick. Now I am seeing a map. However, I noticing the full extent of the map is being copy not the zoom extent. I am trying hard to make it work, but it's not happening for me . Any hints?

[ATTACH=CONFIG]18334[/ATTACH]

ZoomtoParcel.JPG

RobertScheitlin__GISP

Koman,

You have to listen for the GraphicsLayer Update end event:

            private function onQueryComplete(event:QueryEvent):void             {                 myGraphicsLayer.clear();                 var fset:FeatureSet=event.featureSet;                 for each (var graphic:Graphic in fset.features)                 {                     graphic.symbol=parcel_Symbol;                                          graphic.infoWindowRenderer=kdRenderer;                     myGraphicsLayer.add(graphic);                     //Alert.show(fset.features.length.toString());                     try                     {                         var obj:Object=fset.attributes;                         dg=test(PopUpManager.createPopUp(map, test, false));                         PopUpManager.centerPopUp(dg);                         dg.dProvider=obj;                         myGraphicsLayer.addEventListener(LayerEvent.UPDATE_END, addMap);                                                  function addMap(evt:Event):void{                             setTimeout(setMap, 1000);                         }                                                  function setMap():void                         {                             dg.map = map;                         }                                              }                     catch(error:Error)                     {                         //error.message();                     }                 }                         }

Then because of the delay in adding the map to the title window you need to let the user know that something is going on:

<?xml version="1.0" encoding="utf-8"?> <mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"                 xmlns:esri="http://www.esri.com/2008/ags"                 xmlns:s="library://ns.adobe.com/flex/spark"                 layout="vertical" showCloseButton="true"                 close="titlewindow1_closeHandler(event)">     <mx:Script>         <![CDATA[             import com.esri.ags.Map;                          import mx.controls.Alert;             import mx.events.CloseEvent;             import mx.graphics.ImageSnapshot;             import mx.graphics.codec.JPEGEncoder;             import mx.managers.PopUpManager;                          import spark.primitives.BitmapImage;                     private var _map:Map;             private var _data:Object;                          public function set dProvider(value:Object):void             {                 _data=value;                 ParcelRepeater.dataProvider=_data;             }             public function set map(value:Map):void             {                              _map = value;                 _map.zoomSliderVisible = false;                 _map.validateNow();                 var bmpMap:BitmapData = ImageSnapshot.captureBitmapData(_map);                                  var bmp:Bitmap = new Bitmap(bmpMap);                 MapImage.width = 183;                 MapImage.height = 129;                 MapImage.source = bmp;                 _map.zoomSliderVisible = true;             }                              protected function titlewindow1_closeHandler(event:CloseEvent):void             {                 PopUpManager.removePopUp(this);             }                      ]]>     </mx:Script>     <mx:Repeater id="ParcelRepeater">         <mx:Label text="Parcel Number:" fontWeight="bold"/>         <mx:Label text="{(ParcelRepeater.currentItem).APN}"/>     </mx:Repeater>     <mx:VBox horizontalAlign="center" verticalAlign="middle" width="190" height="100%">         <mx:Image id="MapImage" width="80" height="80" source="assets/images/progressCircle.swf" />     </mx:VBox> </mx:TitleWindow>

Attached you will find the asset progessCircle.swf

progressCircle.zip

KomanDiabate

Sir,
You're simply amazing!!!
Thank you so much.

Participe da Conversa

Membros conectados podem postar, seguir atualizações e mais. Novo aqui? Registre uma conta gratuita.

Links Rápidos

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