How do I refresh a style change to an InfoSymbol?

stevemclaughlin · ‎10-07-2013

Here is the full code for my example, I would like to change the background color of an infoSymbol,
it works, but you have to drag the map around for the update to take effect. Is there a way to refresh the graphic after the style changes?
Ideally I would like a way to dynamically change the background of one infoSymbol, currently it changes all infoSymbols defined with that containerStyleName.
thanks,
steve



<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
      xmlns:mx="library://ns.adobe.com/flex/mx"
      xmlns:esri="http://www.esri.com/2008/ags"
      xmlns:s="library://ns.adobe.com/flex/spark"
      pageTitle="Basic InfoSymbol example">
 <fx:Style >
  @namespace s "library://ns.adobe.com/flex/spark";
  @namespace mx "library://ns.adobe.com/flex/mx";
  @namespace esri "http://www.esri.com/2008/ags";
  .myStyle
  {
   backgroundColor: #FF0000;
   border-color: #578DB8;
   border-thickness: 2;
   info-placement: bottomright;
  }
 </fx:Style>
  <fx:Script>
   <![CDATA[
    import mx.core.FlexGlobals;
    import mx.events.ColorPickerEvent;
    
    protected function colorpicker1_changeHandler(event:ColorPickerEvent):void
    {
//     FlexGlobals.topLevelApplication.styleManager.getStyleDeclaration('.myStyle').setStyle('backgroundColor',event.currentTarget.selectedColor);
     mygraphic.styleManager.getStyleDeclaration('.myStyle').setStyle('backgroundColor',event.currentTarget.selectedColor);
     mygraphic.invalidateProperties();   // doesn't do anything
     graphicslayer.refresh();            // doesn't do anything
     graphicslayer.invalidateDisplayList();   // doesn't do anything
    }
   ]]>
  </fx:Script>
  
 <fx:Declarations>
  <esri:InfoSymbol id="infoSymbol1" containerStyleName="myStyle" >
   <esri:infoRenderer >
    <fx:Component>
     <s:DataRenderer>
      <s:Label text="Label 1" color="0xFEFEFE"/>
     </s:DataRenderer>
    </fx:Component>
   </esri:infoRenderer>
  </esri:InfoSymbol>
  
 </fx:Declarations>
  
 <esri:Map>
  <esri:extent> 
   <esri:Extent xmin="-17526410" ymin="-6369184" xmax="3557" ymax="13433510">
    <esri:SpatialReference wkid="102100"/>
   </esri:Extent>
  </esri:extent>
  <esri:ArcGISTiledMapServiceLayer url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"/>
  <esri:GraphicsLayer id="graphicslayer" symbol="{infoSymbol1}">
   <esri:Graphic id="mygraphic">
    <esri:geometry>
     <esri:MapPoint x="-13057025" y="3912271"/>
    </esri:geometry>
   </esri:Graphic>
   <esri:Graphic id="mygraphic2">
    <esri:geometry>
     <esri:MapPoint x="-12057025" y="3912271"/>
    </esri:geometry>
   </esri:Graphic>
  </esri:GraphicsLayer>
 </esri:Map>
 <s:BorderContainer top="100" horizontalCenter="0" backgroundColor="0xffffff" >
  <s:HGroup left="20" right="20" top="20" bottom="20" verticalAlign="middle" >
   <s:Label text="Change color and move map to update" />  
   <mx:ColorPicker top="200" horizontalCenter="0" change="colorpicker1_changeHandler(event)" />
  </s:HGroup>
 </s:BorderContainer>
</s:Application>

RelicLiu · ‎10-07-2013

hi
u can set a callback when the style is changed ,and remove old InfoSymbol before add a new one in this callback.
for u reference.;)

JoeHewitt · ‎10-20-2013

As Relic said.

Instead of using graphicslayer.refresh();

Try

map.removeLayer(graphicslayer);
map.addLayer(graphicslayer);

(So essentially breaking the refresh into the two stages)



<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
      xmlns:mx="library://ns.adobe.com/flex/mx"
      xmlns:esri="http://www.esri.com/2008/ags"
      xmlns:s="library://ns.adobe.com/flex/spark"
      pageTitle="Basic InfoSymbol example">
 <fx:Style >
  @namespace s "library://ns.adobe.com/flex/spark";
  @namespace mx "library://ns.adobe.com/flex/mx";
  @namespace esri "http://www.esri.com/2008/ags";
  .myStyle
  {
   backgroundColor: #FF0000;
   border-color: #578DB8;
   border-thickness: 2;
   info-placement: bottomright;
  }
 </fx:Style>
  <fx:Script>
   <![CDATA[
    import mx.core.FlexGlobals;
    import mx.events.ColorPickerEvent;
    
    protected function colorpicker1_changeHandler(event:ColorPickerEvent):void
    {
//     FlexGlobals.topLevelApplication.styleManager.getStyleDeclaration('.myStyle').setStyle('backgroundColor',event.currentTarget.selectedColor);
     mygraphic.styleManager.getStyleDeclaration('.myStyle').setStyle('backgroundColor',event.currentTarget.selectedColor);
     mygraphic.invalidateProperties();   // doesn't do anything

                                       map.removeLayer(graphicslayer);
                                       map.addLayer(graphicslayer);

     graphicslayer.refresh();            // doesn't do anything
     graphicslayer.invalidateDisplayList();   // doesn't do anything
    }
   ]]>
  </fx:Script>
  
 <fx:Declarations>
  <esri:InfoSymbol id="infoSymbol1" containerStyleName="myStyle" >
   <esri:infoRenderer >
    <fx:Component>
     <s:DataRenderer>
      <s:Label text="Label 1" color="0xFEFEFE"/>
     </s:DataRenderer>
    </fx:Component>
   </esri:infoRenderer>
  </esri:InfoSymbol>
  
 </fx:Declarations>
  
 <esri:Map>
  <esri:extent> 
   <esri:Extent xmin="-17526410" ymin="-6369184" xmax="3557" ymax="13433510">
    <esri:SpatialReference wkid="102100"/>
   </esri:Extent>
  </esri:extent>
  <esri:ArcGISTiledMapServiceLayer url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"/>
  <esri:GraphicsLayer id="graphicslayer" symbol="{infoSymbol1}">
   <esri:Graphic id="mygraphic">
    <esri:geometry>
     <esri:MapPoint x="-13057025" y="3912271"/>
    </esri:geometry>
   </esri:Graphic>
   <esri:Graphic id="mygraphic2">
    <esri:geometry>
     <esri:MapPoint x="-12057025" y="3912271"/>
    </esri:geometry>
   </esri:Graphic>
  </esri:GraphicsLayer>
 </esri:Map>
 <s:BorderContainer top="100" horizontalCenter="0" backgroundColor="0xffffff" >
  <s:HGroup left="20" right="20" top="20" bottom="20" verticalAlign="middle" >
   <s:Label text="Change color and move map to update" />  
   <mx:ColorPicker top="200" horizontalCenter="0" change="colorpicker1_changeHandler(event)" />
  </s:HGroup>
 </s:BorderContainer>
</s:Application>

YueWu1 · ‎10-21-2013

Hi Steve,

This is a demo code might solve your issue. You can change the line color and width without refreshing the map.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
      xmlns:mx="library://ns.adobe.com/flex/mx"
      xmlns:esri="http://www.esri.com/2008/ags"
      xmlns:s="library://ns.adobe.com/flex/spark"
      pageTitle="Basic InfoSymbol example">
  <fx:Style >
  @namespace s "library://ns.adobe.com/flex/spark";
  @namespace mx "library://ns.adobe.com/flex/mx";
  @namespace esri "http://www.esri.com/2008/ags";
  .myStyle
  {
   backgroundColor: #FF0000;
   border-color: #578DB8;
   border-thickness: 2;
   info-placement: bottomright;
  }
 </fx:Style>
 <fx:Script>
  <![CDATA[
//   import com.esri.ags.Graphic;
//   import com.esri.ags.events.GraphicEvent;
//   import com.esri.ags.events.GraphicsLayerEvent;
//   
//   import mx.events.ColorPickerEvent;
//   
//   protected function colorpicker1_changeHandler(event:ColorPickerEvent):void
//   {
//    //FlexGlobals.topLevelApplication.styleManager.getStyleDeclaration('.myStyle').setStyle('backgroundColor',event.currentTarget.selectedColor);
//    mygraphic.styleManager.getStyleDeclaration('.myStyle').setStyle('backgroundColor',event.currentTarget.selectedColor);
//    mygraphic.invalidateProperties();   // doesn't do anything
//    graphicslayer.refresh();            // doesn't do anything
//    graphicslayer.invalidateDisplayList();   // doesn't do anything
//
//   }
//   
//   protected function graphiclayer_changedHanleder(event:GraphicsLayerEvent):void
//   {
//    graphicslayer.add(graphicslayer);
//   }
  ]]>
 </fx:Script>
 
 <fx:Declarations>
  <esri:SimpleLineSymbol id="infoSymbol1"
          color="{lineColor.selectedColor}"
          width="{lineWidth.value}"
          />
 </fx:Declarations> 
 <s:controlBarContent>
 <s:ToggleButton id="color"/>
 </s:controlBarContent>
 
 <esri:Map>
  <esri:extent>
   <esri:Extent xmin="-17526410" ymin="-6369184" xmax="3557" ymax="13433510">
    <esri:SpatialReference wkid="102100"/>
   </esri:Extent>
  </esri:extent>
  <esri:ArcGISTiledMapServiceLayer url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"/>
  <esri:GraphicsLayer id="graphicslayer">
   <esri:Graphic id="mygraphic" 
        symbol="{infoSymbol1}"
        visible="{!lineColor.selected}">
    <esri:geometry>
     <esri:Polyline>
      <fx:Array>
       <fx:Array>
        <esri:MapPoint x="15558700" y="1770100"/>
        <esri:MapPoint x="12959100" y="2261100"/>
        <esri:MapPoint x="11901900" y="3238400"/>
        <esri:MapPoint x="1447100" y="4244300"/>
       </fx:Array>
      </fx:Array>
     </esri:Polyline>
    </esri:geometry>
   </esri:Graphic>
  </esri:GraphicsLayer>
 </esri:Map>
 <!--Panel for changing color -->
 <s:Panel right="20" top="20"
    title="Color to change"
    visible="{!color.selected}">
  <s:Form alpha="0.9" backgroundColor="0xEEEEEE">
   <s:layout>
    <s:FormLayout gap="-12"/>
   </s:layout> 
    <s:FormItem label="Color">
     <mx:ColorPicker id="lineColor" selectedColor="0X009933" />
    </s:FormItem>
   <s:FormItem label="Width:">
    <s:HSlider id="lineWidth"
         width="100%"
         liveDragging="true"
         maximum="20"
         minimum="0"
         snapInterval="1"
         value="8"/>
   </s:FormItem>
  </s:Form>
 </s:Panel>
</s:Application>

MehulChoksey · ‎10-25-2013

Code below changes the color of one infosymbol without changing mapextent or without deleting graphics.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:mx="library://ns.adobe.com/flex/mx"
               xmlns:esri="http://www.esri.com/2008/ags"
               xmlns:s="library://ns.adobe.com/flex/spark"
               pageTitle="Basic InfoSymbol example">
        <fx:Style >
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
        @namespace esri "http://www.esri.com/2008/ags";
        
            .myStyle1
            {
                backgroundColor: #00FF00;
                border-color: #578DB8;
                border-thickness: 2;
                info-placement: bottomright;
            }    
            
        .myStyle2
            {
                backgroundColor: #FF0000;
                border-color: #578DB8;
                border-thickness: 2;
                info-placement: bottomright;
            }    
            
    </fx:Style>
    
    <fx:Script>
        <![CDATA[
            import com.esri.ags.events.GraphicEvent;
            
            import mx.events.ColorPickerEvent;
            import mx.events.FlexEvent;
            
            private var cssStyleDeclarationInfoSymbol:CSSStyleDeclaration = new CSSStyleDeclaration(".myStyle1")
            var topLevelStyleManager:IStyleManager2 = StyleManager.getStyleManager(null);
            
            private function setStyleDeclarationInfoSymbol(styleName:String, value:Object):void{
                cssStyleDeclarationInfoSymbol.setStyle(styleName,value);
                topLevelStyleManager.setStyleDeclaration(".myStyle1",cssStyleDeclarationInfoSymbol , true);
                }
            
            protected function colorpicker1_changeHandler(event:ColorPickerEvent):void
            {
                setStyleDeclarationInfoSymbol('backgroundColor',event.currentTarget.selectedColor);
            }
            
            
            protected function graphicslayer_graphicAddHandler(event:GraphicEvent):void
            {
                var e:Object = event.graphic.symbol  
                
            }
            
        ]]>
    </fx:Script>
    
    <fx:Declarations>
        <esri:InfoSymbol id="infoSymbol1" containerStyleName="myStyle1" >
            <esri:infoRenderer >
                <fx:Component>
                    <s:DataRenderer>
                        <s:Label text="Label 1" color="0xFEFEFE"/>
                    </s:DataRenderer>
                </fx:Component>
            </esri:infoRenderer>
        </esri:InfoSymbol>
        
        <esri:InfoSymbol id="infoSymbol2" containerStyleName="myStyle2">
            <esri:infoRenderer >
                <fx:Component>
                    <s:DataRenderer>
                        <s:Label text="Label 1" color="0xFEFEFE"/>
                    </s:DataRenderer>
                </fx:Component>
            </esri:infoRenderer>
        </esri:InfoSymbol>
        
    </fx:Declarations>
    
    <esri:Map id="map">
        <esri:extent> 
            <esri:Extent xmin="-17526410" ymin="-6369184" xmax="3557" ymax="13433510">
                <esri:SpatialReference wkid="102100"/>
            </esri:Extent>
        </esri:extent>
        <esri:ArcGISTiledMapServiceLayer url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"/>
        <esri:GraphicsLayer id="graphicslayer" graphicAdd="graphicslayer_graphicAddHandler(event)">
            <esri:Graphic id="mygraphic"  symbol="{infoSymbol1}">
                <esri:geometry>
                    <esri:MapPoint x="-13057025" y="3912271"/>
                </esri:geometry>
            </esri:Graphic>
            <esri:Graphic id="mygraphic2"  symbol="{infoSymbol2}">
                <esri:geometry>
                    <esri:MapPoint x="-12057025" y="3912271"/>
                </esri:geometry>
            </esri:Graphic>
        </esri:GraphicsLayer>
    </esri:Map>
    <s:BorderContainer top="100" horizontalCenter="0" backgroundColor="0xffffff" >
        <s:HGroup left="20" right="20" top="20" bottom="20" verticalAlign="middle" >
            <s:Label text="Change color and move map to update" />        
            <mx:ColorPicker top="200" change="colorpicker1_changeHandler(event)" horizontalCenter="0" />
        </s:HGroup>
    </s:BorderContainer>
</s:Application>