Select to view content in your preferred language

[ArcGIS API Flex] Multiple map components added to application

1977
2
07-17-2011 01:45 PM
Marlon_JoséLópez_Meza
Emerging Contributor

Greetings,

Im working in a web application with the requirement of displaying multiple map instances on it, each one with its own graphics addes to its respective layers...

The problem is related to the graphic addition in a map's graphic layer, it happen that a graphic that is added to map1 is hidden when I add a graphic in map2.

Here is a test application with two spark panels, each one with a Map instance, a ArcGISTiledMapServiceLayer and a GraphicsLayer. The button, when its pressed, perform a Graphic addition to map1's graphicslayer, and using a timer, edit the graphic and adds to map2's graphicslayer.

The result (Fail): the map1 shows graphic1, but when map2 shows the graphic added, map1 graphic is hidden/removed from view.

I like to know how resolve this issue, and be secure that is not a bug

A sample:


<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
      xmlns:s="library://ns.adobe.com/flex/spark"
      xmlns:mx="library://ns.adobe.com/flex/mx"
      xmlns:esri="http://www.esri.com/2008/ags"
      minWidth="955" minHeight="600" pageTitle="prueba múltiples mapas"
      viewSourceURL="srcview/index.html">
 
 <fx:Script>
  <![CDATA[
   import com.esri.ags.Graphic;
   import com.esri.ags.SpatialReference;
   import com.esri.ags.events.GraphicEvent;
   import com.esri.ags.events.MapEvent;
   import com.esri.ags.geometry.MapPoint;
   import com.esri.ags.geometry.Polygon;
   import com.esri.ags.symbols.SimpleFillSymbol;
   
   import mx.collections.ArrayCollection;
   import mx.controls.Alert;
   protected function addGeomBtn_clickHandler(event:MouseEvent):void
   {
    var myPolygon:Polygon = new Polygon(
     [[
      new MapPoint(2352491, -1992338),
      new MapPoint(2332923, -2461967),
      new MapPoint(2646009, -2266288),
      new MapPoint(3076503, -2324992),
      new MapPoint(3272181, -2520670),
      new MapPoint(3506996, -2559806),
      new MapPoint(3702675, -3049003),
      new MapPoint(3370021, -3675175),
      new MapPoint(2763416, -4046965),
      new MapPoint(2117676, -4144804),
      new MapPoint(1961133, -3890422),
      new MapPoint(2000269, -3655607),
      new MapPoint(1667615, -3185978),
      new MapPoint(1550208, -2422831),
      new MapPoint(1334961, -1953202),
      new MapPoint(2352491, -1992338)
     ]], new SpatialReference(102100));
    var myGraphicPolygon:Graphic = new Graphic();
    myGraphicPolygon.geometry = myPolygon;
    myGraphicPolygon.symbol = new SimpleFillSymbol(
     SimpleFillSymbol.STYLE_SOLID, // fill style
     0xFF0000, // fill color
     0.7 // fill alpha
    );
    myGraphicPolygon.toolTip = "Polygon added with ActionScript (Map 1)";
    geom01.add(myGraphicPolygon);

    var timer:Timer=new Timer(300,1);
    timer.addEventListener(TimerEvent.TIMER_COMPLETE,function completado():void{
     myGraphicPolygon.symbol = new SimpleFillSymbol(
      SimpleFillSymbol.STYLE_SOLID, // fill style
      0x00CC00, // fill color
      0.7 // fill alpha
     );
     myGraphicPolygon.id="mgp2";
     myGraphicPolygon.toolTip = "Polygon added with ActionScript (Map 2)";
     geom2.add(myGraphicPolygon);
    });
    timer.start();
    
    (event.target as Button).enabled=false;
   }
   
   protected function logEvent(event:Event):void
   {
    logTexts.text=event.type+" - " + event.target.id +"\n"+logTexts.text;
   }
   
  ]]>
 </fx:Script>
 
 <s:Panel id="panel01" y="32" width="282" height="226" dropShadowVisible="false"
    horizontalCenter="-100" title="Panel 1">
  <esri:Map mapNavigationEnabled="false" left="5" right="5" top="5" bottom="5" toolTip="mapa 1" id="panelmap01" scaleBarVisible="false">
   <esri:ArcGISTiledMapServiceLayer id="mp01l" url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"/>
   <esri:GraphicsLayer id="geom01" updateEnd="logEvent(event)" graphicsClear="logEvent(event)" graphicAdd="logEvent(event)" graphicRemove="logEvent(event)"/>
  </esri:Map>
 </s:Panel>
 <s:Panel id="panel02" y="33" width="282" height="226" dropShadowVisible="false"
    horizontalCenter="200" title="Panel 2">
  <esri:Map mapNavigationEnabled="false" left="5" right="5" top="5" bottom="5" toolTip="mapa 2" id="panelmap02" scaleBarVisible="false">
   <esri:ArcGISTiledMapServiceLayer id="mp11l" url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"/>
   <esri:GraphicsLayer id="geom2" updateEnd="logEvent(event)" graphicAdd="logEvent(event)" graphicRemove="logEvent(event)"/>
  </esri:Map>
 </s:Panel>
 <s:Button id="addGeomBtn" y="271" label="Agregar gráfico" click="addGeomBtn_clickHandler(event)"
     horizontalCenter="0"/>
 <s:RichText id="logTexts" left="20" right="20" text="" verticalCenter="20"/>
</s:Application>



reqs: libs/agslib-2.3.1-2011-04-26.swc
Tags (2)
0 Kudos
2 Replies
RobertScheitlin__GISP
MVP Emeritus
Marlon José,

   A Graphic can only exist in one UIComponent at a time that is why you are having an issue. Just create a new graphic object and use the other graphic objects geometry and attributes (if that is what you are after).
0 Kudos
Marlon_JoséLópez_Meza
Emerging Contributor
Marlon José, 

A Graphic can only exist in one UIComponent at a time that is why you are having an issue. Just create a new graphic object and use the other graphic objects geometry and attributes (if that is what you are after).


😮 ... that solved it. i created a new graphic object and dynamically edit its properties (geometry, symbol, tooltip and attributes)

thanks... in a moment i'll publish a sample with the solution of the issue from my perspective.
0 Kudos