Highlight a feature when using popups

MattiasEkström — Tue, 22 Nov 2011 07:11:38 GMT

In my flex viewer when a user clicks a feature in an operational layer that has a popup configured, I would like that feature to somehow become highlighted as long as the popup is visible.
Does anyone have any ideas on how to make it happen, or on where in the source code I should start trying? Will it be possible changing only the Viewer source code and not the API?

Re: Highlight a feature when using popups

MattiasEkström — Sun, 12 Dec 2021 07:26:01 GMT

I've been thinking and trying out some solutions for this, and ended up customizing the PopUpRendererSkin. It works but I'm not really satisfied with the solution, what I would like is to use some kind of AppEvent for showing PopUp and closing/hidning PopUp. I've been looking through the documentation but I can't find anything like that, I've tried using SHOW_INFOWINDOW and some other events without success.
I've not tried to create my own custom AppEvent, because I wouldn't know how to dispatch the events when PopUp shows or hides, if I knew that I would probably not even have to create any AppEvents.
Anyone knows a way to listen to the events of showing and closing/hiding a PopUp?

If anyone is interested in the solution I have so far, I got the PopUpRendererSkin.mxml from downloading the API and copied it to src/com/esri/viewer/skins/ and to the default.css I added:

esri|PopUpRenderer
{
 skin-class: ClassReference("com.esri.viewer.skins.PopUpRendererSkin");
}

All the code I put in PopUpRendererSkin.mxml, at the end of the commitProperties function add:

// My addition for highlighting popup features...
    var glExists:Boolean = false;
    var glID:int;
    //Go through layerIds in map to check if the highlightGraphics graphiclayer exists and if so get its id.
    for (var i:int = 0; i < map.layerIds.length; i++)
    {
     if (map.layerIds== "highlightGraphics")
     {
      glID = i;
      glExists = true;
     }
    }
    //If highlightGraphics graphicslayer doesn't exist, create it and add it to the map.
    if(!glExists){
     var gl:GraphicsLayer = new GraphicsLayer();
     gl.id = "highlightGraphics";
     gl.visible = true;
     map.addLayer(gl,200);
     //Get the id of the graphicslayer
     for (var j:int = 0; j < map.layerIds.length; j++)
     {
      if (map.layerIds== "highlightGraphics")
      {
       glID = j;
       glExists = true;
      }
     }
    }
    //Set the highlight graphic symbol
    var hlGraphic:Graphic = new Graphic(graphic.geometry);
    switch(hlGraphic.geometry.type)
    {
     case Geometry.MAPPOINT:
     {
      hlGraphic.symbol = new SimpleMarkerSymbol("circle",22,0x000000,0,0,0,0,new SimpleLineSymbol("solid",0xFF0000,0.5,2));
      break;
     }
     case Geometry.POLYLINE:
     {
      hlGraphic.symbol = new SimpleLineSymbol("solid",0xFF0000,0.3,8);
      break;
     }
     default:
     {
      hlGraphic.symbol = new SimpleFillSymbol("solid",0x000000,0,new SimpleLineSymbol("solid",0xFF0000,0.4,3));
      break;
     }
    }
    //set a glow filter to the highlight graphic
    var gf:spark.filters.GlowFilter = new spark.filters.GlowFilter();
    gf.color = 0xFF0000;
    gf.alpha = 1;
    gf.strength = 2;
    gf.blurX = 8;
    gf.blurY = 8;
    hlGraphic.filters = [gf];
    //Clear the highlightGraphics graphiclayer and add the new highight graphic
    map.layers[glID].clear();
    map.layers[glID].add(hlGraphic);
    //add eventhandlers to "unhighlight" features
    map.infoWindow.closeButton.addEventListener(MouseEvent.CLICK, onInfoWindowClosed);
    map.addEventListener(MapMouseEvent.MAP_CLICK, onMapClick)
// --- end addition ---------------

And then add a these two functions somewhere:

//My handler for clicking closebutton on a popup/infowindow
   private function onInfoWindowClosed(event:MouseEvent):void
   {
    if(hostComponent.map){
     for (var i:int = 0; i < hostComponent.map.layerIds.length; i++)
     {
      if (hostComponent.map.layerIds== "highlightGraphics")
      {
       hostComponent.map.layers.clear();
      }
     }
     hostComponent.map.infoWindow.closeButton.removeEventListener(MouseEvent.CLICK, onInfoWindowClosed);
    }    
   }
//My handler for a mapclick, mapclicking outside a feature with popup configuration will hide popup/infowindow and clear the highlight graphics.
   private function onMapClick(event:MapMouseEvent):void
   {
    for (var i:int = 0; i < event.map.layerIds.length; i++)
    {
     if (event.map.layerIds== "highlightGraphics")
     {
      event.map.layers.clear();
     }
    }
    event.map.infoWindow.hide();
    event.map.removeEventListener(MapMouseEvent.MAP_CLICK, onMapClick);
   }

topic Highlight a feature when using popups in ArcGIS Viewer for Flex Questions

Highlight a feature when using popups

Re: Highlight a feature when using popups