topic Re: Make feature flash when popup is viewed in ArcGIS Viewer for Flex Questions

Make feature flash when popup is viewed

philippschnetzer — Thu, 23 Feb 2012 16:51:47 GMT

You know what would be nice......if when you clicked on a feature that has popups enabled the feature was highlighted somehow on the map. Even just a brief flash/halo that disappeared right away. I have a specific case where this would really be helpful!

Thanks 🙂

Re: Make feature flash when popup is viewed

MattiasEkström — Thu, 01 Mar 2012 11:41:05 GMT

Yes that would be nice, and it's doable.
You can get the PopUpRendererSkin.mxml from downloading the API and make some addition there to accomplish this.
My solution is probably not the best one, but it works for me. Basically I'm adding the feature to a new graphiclayer and put a glow filter on it.
Here's my customPopUpRendererSkin, my additions are commented so you can see what I've done and change to your own customizations. For example make it flash insted of beeing highlighted or whatever you want.
Copy the skin to for example src/com/esri/viewer/skins
and then point it out in the defaults.css, something like this:

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

I'm still in version 2.4, and my customPopUpRendererSkin is based on the one from API 2.4. If you have 2.5, download that new skin and make the changes to that one...

Re: Make feature flash when popup is viewed

philippschnetzer — Thu, 01 Mar 2012 13:52:58 GMT

Mattias,

Looking forward to trying this out! Thanks so much for your post! This will be useful!

Re: Make feature flash when popup is viewed

RobertScheitlin__GISP — Sat, 11 Dec 2021 14:23:45 GMT

Mattias,

Thanks for sharing your code it is great. Here is your code reworked a bit, if you are interested. It does the same thing just less code and the way I would do it.

            override protected function commitProperties():void
            {
                super.commitProperties();

                var featureLayer:FeatureLayer = hostComponent.featureLayer;
                var formattedAttributes:Object = hostComponent.formattedAttributes;
                var graphic:Graphic = hostComponent.graphic;
                var map:Map = hostComponent.map;
                var popUpInfo:PopUpInfo = hostComponent.popUpInfo;
                var validMediaInfos:Array = hostComponent.validPopUpMediaInfos;
                var geometry:Geometry = graphic ? graphic.geometry : null;
                var layerDetails:LayerDetails = featureLayer ? featureLayer.layerDetails : null;

                //Make sure there is a graphic
                if(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;
                    var hlGraphicLayer:GraphicsLayer;
                    //Attempt to retieve the highlightGraphics layer
                    hlGraphicLayer = map.getLayer("highlightGraphics") as GraphicsLayer;
                    //If it does not exist create it.
                    if(!hlGraphicLayer){
                        hlGraphicLayer = new GraphicsLayer();
                        hlGraphicLayer.id = "highlightGraphics";
                        map.addLayer(hlGraphicLayer);
                    }
                    hlGraphicLayer.clear();
                    //Create the new highlight graphic
                    const hlGraphic:Graphic = new Graphic(graphic.geometry, graphic.symbol,graphic.attributes);
                    switch(graphic.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;
                        }
                    }
                    hlGraphic.filters = [gf];
                    hlGraphicLayer.add(hlGraphic);
                    
                    //Add inline event listener functions for removing the highlight graphic
                    map.infoWindow.closeButton.addEventListener(MouseEvent.CLICK, function(event:MouseEvent):void{infoWindowClose(event, hlGraphicLayer)});
                    function infoWindowClose(evt:Event, graphicLay:GraphicsLayer):void{
                        graphicLay.clear();
                        graphicLay.refresh();
                        graphicLay.map.infoWindow.closeButton.removeEventListener(MouseEvent.CLICK, infoWindowClose);
                    }

                    map.addEventListener(MapMouseEvent.MAP_CLICK, function(event:MouseEvent):void{onMapClick(event, hlGraphicLayer)});
                    function onMapClick(evt:Event, graphicLay:GraphicsLayer):void{
                        graphicLay.clear();
                        graphicLay.refresh();
                        graphicLay.map.removeEventListener(MapMouseEvent.MAP_CLICK, onMapClick);
                    }
                }

                vGroup.removeAllElements();
                //vGroup.addElement(ToggleLayers);
                if (popUpInfo)
                {
                    if (popUpInfo.title)
                    {
                        titleText.text = StringUtil.substitute(popUpInfo.title, formattedAttributes);
                        if (titleText.text)
                        {
                            vGroup.addElement(titleText);
                            vGroup.addElement(titleLine);
                        }
                    }

                    var htmlText:String;
                    if (popUpInfo.description)
                    {
                        htmlText = StringUtil.substitute(popUpInfo.description, formattedAttributes);
                        if (htmlText)
                        {
                            var descriptionText:Text = new PopUpText();
                            descriptionText.percentWidth = 100;
                            descriptionText.styleSheet = textStyleSheet;
                            
                            cleanAndSetHtmlText(descriptionText, htmlText);
                            //trace(descriptionText.htmlText);
                            vGroup.addElement(descriptionText);
                        }
                    }
                    else
                    {
                        var descriptionForm:Form;
                        for each (var fieldInfo:PopUpFieldInfo in popUpInfo.popUpFieldInfos)
                        {
                            if (fieldInfo.visible)
                            {
                                var formItem:FormItem = new FormItem();
                                formItem.label = fieldInfo.label || fieldInfo.fieldName;
                                
                                var label:Label;
                                htmlText = formattedAttributes[fieldInfo.fieldName];
                                if (htmlText)
                                {
                                    // convert attribute field values that just contain URLs into links 
                                    var match:Array = htmlText.match(/^\s*((https?|ftp):\/\/\S+)\s*$/i);
                                    if (match && match.length > 0)
                                    {
                                        label = new Label();
                                        htmlText = '<a href="' + match[1] + '" target="_blank">' + match[1] + "</a>";
                                    }
                                    else
                                    {
                                        label = new PopUpText();
                                    }
                                    cleanAndSetHtmlText(label, htmlText);
                                    label.selectable = true;
                                    label.styleSheet = this.textStyleSheet;
                                    label.width = 150;
                                    formItem.addChild(label);
                                }
                                if (!descriptionForm)
                                {
                                    descriptionForm = new Form();
                                    descriptionForm.percentWidth = 100;
                                    descriptionForm.horizontalScrollPolicy = ScrollPolicy.OFF;
                                    descriptionForm.verticalScrollPolicy = ScrollPolicy.OFF;
                                    descriptionForm.styleName = "formStyle";
                                }
                                descriptionForm.addChild(formItem);
                            }
                        }
                        if (descriptionForm)
                        {
                            vGroup.addElement(descriptionForm);
                        }
                    }

                    if (validMediaInfos && validMediaInfos.length > 0)
                    {
                        vGroup.addElement(mediaBrowser);
                        mediaBrowser.attributes = graphic.attributes;
                        mediaBrowser.formattedAttributes = formattedAttributes;
                        mediaBrowser.popUpFieldInfos = popUpInfo.popUpFieldInfos;
                        mediaBrowser.popUpMediaInfos = validMediaInfos;
                    }

                    if (popUpInfo.showAttachments && graphic && featureLayer
                        && layerDetails && layerDetails.hasAttachments && layerDetails.objectIdField)
                    {
                        vGroup.addElement(attachmentInspector);
                        attachmentInspector.showAttachments(graphic, featureLayer);
                    }

                    if (map && geometry)
                    {
                        vGroup.addElement(zoomToButton);
                    }
                }
            }

Re: Make feature flash when popup is viewed

AlexSanders — Sat, 11 Dec 2021 14:23:48 GMT

Robert,

I get a warning error 3596 - Duplicate Variable Definition for

var gf:spark.filters.GlowFilter = new spark.filters.GlowFilter();

const hlGraphic:Graphic = new Graphic(graphic.geometry, graphic.symbol,graphic.attributes);

override protected function commitProperties():void
   {
    super.commitProperties();
    
    var featureLayer:FeatureLayer = hostComponent.featureLayer;
    var formattedAttributes:Object = hostComponent.formattedAttributes;
    var graphic:Graphic = hostComponent.graphic;
    var map:Map = hostComponent.map;
    var popUpInfo:PopUpInfo = hostComponent.popUpInfo;
    var validMediaInfos:Array = hostComponent.validPopUpMediaInfos;
    var geometry:Geometry = graphic ? graphic.geometry : null;
    var layerDetails:LayerDetails = featureLayer ? featureLayer.layerDetails : null;
    
    //Make sure there is a graphic
    if(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;
     var hlGraphicLayer:GraphicsLayer;
     //Attempt to retieve the highlightGraphics layer
     hlGraphicLayer = map.getLayer("highlightGraphics") as GraphicsLayer;
     //If it does not exist create it.
     if(!hlGraphicLayer){
      hlGraphicLayer = new GraphicsLayer();
      hlGraphicLayer.id = "highlightGraphics";
      map.addLayer(hlGraphicLayer);
     }
     hlGraphicLayer.clear();
     //Create the new highlight graphic
     /* const hlGraphic:Graphic = new Graphic(graphic.geometry, graphic.symbol,graphic.attributes); */
     const hlGraphic:Graphic = new Graphic(graphic.geometry, graphic.symbol,graphic.attributes);
     switch(graphic.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;
      }
     }
     hlGraphic.filters = [gf];
     hlGraphicLayer.add(hlGraphic);
     
     //Add inline event listener functions for removing the highlight graphic
     map.infoWindow.closeButton.addEventListener(MouseEvent.CLICK, function(event:MouseEvent):void{infoWindowClose(event, hlGraphicLayer)});
     function infoWindowClose(evt:Event, graphicLay:GraphicsLayer):void{
      graphicLay.clear();
      graphicLay.refresh();
      graphicLay.map.infoWindow.closeButton.removeEventListener(MouseEvent.CLICK, infoWindowClose);
     }
     
     map.addEventListener(MapMouseEvent.MAP_CLICK, function(event:MouseEvent):void{onMapClick(event, hlGraphicLayer)});
     function onMapClick(evt:Event, graphicLay:GraphicsLayer):void{
      graphicLay.clear();
      graphicLay.refresh();
      graphicLay.map.removeEventListener(MapMouseEvent.MAP_CLICK, onMapClick);
     }
    }
    
    vGroup.removeAllElements();
    //vGroup.addElement(ToggleLayers);
    if (popUpInfo)
    {
     if (popUpInfo.title)
     {
      titleText.text = StringUtil.substitute(popUpInfo.title, formattedAttributes);
      if (titleText.text)
      {
       vGroup.addElement(titleText);
       vGroup.addElement(titleLine);
      }
     }
     
     var htmlText:String;
     if (popUpInfo.description)
     {
      htmlText = StringUtil.substitute(popUpInfo.description, formattedAttributes);
      if (htmlText)
      {
       var descriptionText:Text = new PopUpText();
       descriptionText.percentWidth = 100;
       descriptionText.styleSheet = textStyleSheet;
       
       cleanAndSetHtmlText(descriptionText, htmlText);
       //trace(descriptionText.htmlText);
       vGroup.addElement(descriptionText);
      }
     }
     else
     {
      var descriptionForm:Form;
      for each (var fieldInfo:PopUpFieldInfo in popUpInfo.popUpFieldInfos)
      {
       if (fieldInfo.visible)
       {
        var formItem:FormItem = new FormItem();
        formItem.label = fieldInfo.label || fieldInfo.fieldName;
        
        var label:Label;
        htmlText = formattedAttributes[fieldInfo.fieldName];
        if (htmlText)
        {
         // convert attribute field values that just contain URLs into links 
         var match:Array = htmlText.match(/^\s*((https?|ftp):\/\/\S+)\s*$/i);
         if (match && match.length > 0)
         {
          label = new Label();
          htmlText = '<a href="' + match[1] + '" target="_blank">' + match[1] + "</a>";
         }
         else
         {
          label = new PopUpText();
         }
         cleanAndSetHtmlText(label, htmlText);
         label.selectable = true;
         label.styleSheet = this.textStyleSheet;
         label.width = 150;
         formItem.addChild(label);
        }
        if (!descriptionForm)
        {
         descriptionForm = new Form();
         descriptionForm.percentWidth = 100;
         descriptionForm.horizontalScrollPolicy = ScrollPolicy.OFF;
         descriptionForm.verticalScrollPolicy = ScrollPolicy.OFF;
         descriptionForm.styleName = "formStyle";
        }
        descriptionForm.addChild(formItem);
       }
      }
      if (descriptionForm)
      {
       vGroup.addElement(descriptionForm);
      }
     }
     
     if (validMediaInfos && validMediaInfos.length > 0)
     {
      vGroup.addElement(mediaBrowser);
      mediaBrowser.attributes = graphic.attributes;
      mediaBrowser.formattedAttributes = formattedAttributes;
      mediaBrowser.popUpFieldInfos = popUpInfo.popUpFieldInfos;
      mediaBrowser.popUpMediaInfos = validMediaInfos;
     }
     
     if (popUpInfo.showAttachments && graphic && featureLayer
      && layerDetails && layerDetails.hasAttachments && layerDetails.objectIdField)
     {
      vGroup.addElement(attachmentInspector);
      attachmentInspector.showAttachments(graphic, featureLayer);
     }
     
     if (map && geometry)
     {
      vGroup.addElement(zoomToButton);
     }
    }

Re: Make feature flash when popup is viewed

MLowry — Sat, 11 Dec 2021 14:23:51 GMT

Robert,

I get a warning error 3596 - Duplicate Variable Definition for

var gf:spark.filters.GlowFilter = new spark.filters.GlowFilter();

const hlGraphic:Graphic = new Graphic(graphic.geometry, graphic.symbol,graphic.attributes);

Which SDK are you running? I'm running 4.5.1a and it works very well for me. Oh, and here's the imports for anyone that wants to use Robert's code and not download Mattias' file.

                        import com.esri.ags.Graphic;
   import com.esri.ags.layers.GraphicsLayer;
   import com.esri.ags.Map;
   import com.esri.ags.geometry.Extent;
   import com.esri.ags.geometry.Geometry;
   import com.esri.ags.geometry.MapPoint;
   import com.esri.ags.geometry.Multipoint;
   import com.esri.ags.layers.FeatureLayer;
   import com.esri.ags.layers.supportClasses.LayerDetails;
   import com.esri.ags.skins.supportClasses.AttachmentMouseEvent;
   import com.esri.ags.skins.supportClasses.PopUpText;
   import com.esri.ags.utils.StringUtil;
   import com.esri.ags.webmap.supportClasses.PopUpFieldInfo;
   import com.esri.ags.webmap.supportClasses.PopUpInfo;
   import com.esri.ags.events.MapMouseEvent;


   //Added for popup customization
   import com.esri.ags.symbols.SimpleFillSymbol;
   import com.esri.ags.symbols.SimpleLineSymbol;
   import com.esri.ags.symbols.SimpleMarkerSymbol;
   import com.esri.ags.symbols.PictureMarkerSymbol;
   import spark.filters.GlowFilter;
   
   
   
   
   
   import mx.containers.Form;
   import mx.containers.FormItem;
   import mx.controls.Label;
   import mx.core.ScrollPolicy;
   import mx.events.FlexEvent;

Re: Make feature flash when popup is viewed

AlexSanders — Thu, 01 Mar 2012 18:46:14 GMT

Good catch, I'm still on 4.1A.

Re: Make feature flash when popup is viewed

MattiasEkström — Sun, 12 Dec 2021 16:18:43 GMT

Robert,
Thanks for contributing to a cleaner and more efficient code. I had a feeling it could be done a bit more efficient, but I often try some stuff out until it works, and then I don't take the time to see if it could be done differently.
I was just missing one line to make it do exactly what my code was doing.
When clicking outside a feature I also want the PopUp to hide, if anyone else wants that as well add this line to Roberts code:

...
...
map.addEventListener(MapMouseEvent.MAP_CLICK, function(event:MouseEvent):void{onMapClick(event, hlGraphicLayer)});
function onMapClick(evt:Event, graphicLay:GraphicsLayer):void{
 graphicLay.clear();
 graphicLay.refresh();
 graphicLay.map.removeEventListener(MapMouseEvent.MAP_CLICK, onMapClick);
 graphicLay.map.infoWindow.hide();
}

Re: Make feature flash when popup is viewed

RobertScheitlin__GISP — Fri, 02 Mar 2012 13:03:59 GMT

All,

So here is the full file with Mattias last addition and a new private var at the top where you can set the highlight color (if you don't want Red).

Re: Make feature flash when popup is viewed

DilsonKitoko — Mon, 12 May 2014 15:17:27 GMT

All,

So here is the full file with Mattias last addition and a new private var at the top where you can set the highlight color (if you don't want Red).

Hi Robert,

I know its old, but i would like to know if this code works on Flex 2.5? I'm looking for this customization to eSearch 2.5.

Many Thanks,

Re: Make feature flash when popup is viewed

RobertScheitlin__GISP — Mon, 12 May 2014 15:49:02 GMT

Dilson,

Sure. I just threw it into 2.5 of the viewer and it worked fine.

Re: Make feature flash when popup is viewed

DilsonKitoko — Tue, 13 May 2014 07:57:32 GMT

Dilson,

Sure. I just threw it into 2.5 of the viewer and it worked fine.

Good day Robert,

Thanks for the prompt reply.It's worked on 2.5. I just have two issues. When compiling there is a alert in line 69, about a problem with "import mx.controls.Alert;". Also I have problem when trying to resize the results box, it's fall to the bottom of the screen. Seems like i lost some control to resize resuts box.

Cheers,

Re: Make feature flash when popup is viewed

RobertScheitlin__GISP — Tue, 13 May 2014 11:35:58 GMT

Dilson,

That is just a warning, that the import in not actually used in the code and could be removed.

I have problem when trying to resize the results box, it's fall to the bottom of the screen. Seems like i lost some control to resize results box

If you ever had the ability to resize your popups then you already had a customized popup skin, as resizing the popup is not a OTB feature.

Re: Make feature flash when popup is viewed

DilsonKitoko — Tue, 13 May 2014 12:54:01 GMT

Dilson,

That is just a warning, that the import in not actually used in the code and could be removed.

If you ever had the ability to resize your popups then you already had a customized popup skin, as resizing the popup is not a OTB feature.

Good day Robert,

Many thanks for your answer. I'm clarified.

Best Regards,

Re: Make feature flash when popup is viewed

DilsonKitoko — Fri, 16 May 2014 09:59:10 GMT

All,

So here is the full file with Mattias last addition and a new private var at the top where you can set the highlight color (if you don't want Red).

Hi Robert,

In the your customized file posted, the default highlight color ir deepskyblue 0x00bff3:

//************This is the higlight color that will be applied to the geometry when you click a feature***************//
[bindable] private var highlightColor:uint = 0x00bff3;
//*******************************************************************************************************************//

I'm trying to change this color to any another but does not work. I change the color and the recompile, but the color is not being assigned. There is another place that should I change?

Thanks,

Re: Make feature flash when popup is viewed

RobertScheitlin__GISP — Fri, 16 May 2014 12:07:16 GMT

Dilson,

Hmm... I really can not tell you where you are going wrong then. When I have a change to the highlightColor var it works fine.

Re: Make feature flash when popup is viewed

DilsonKitoko — Fri, 16 May 2014 15:15:40 GMT

Dilson,

Hmm... I really can not tell you where you are going wrong then. When I have a change to the highlightColor var it works fine.

Ok Robert, thanks anyway. I got his fixed. Its a strange behaviour, but i just reloaded the projec and it fixed the problem!

Re: Make feature flash when popup is viewed

DilsonKitoko — Sat, 11 Dec 2021 14:23:54 GMT

Yes that would be nice, and it's doable.
You can get the PopUpRendererSkin.mxml from downloading the API and make some addition there to accomplish this.
My solution is probably not the best one, but it works for me. Basically I'm adding the feature to a new graphiclayer and put a glow filter on it.
Here's my customPopUpRendererSkin, my additions are commented so you can see what I've done and change to your own customizations. For example make it flash insted of beeing highlighted or whatever you want.
Copy the skin to for example src/com/esri/viewer/skins
and then point it out in the defaults.css, something like this:
esri|PopUpRenderer
{
 skin-class: ClassReference("com.esri.viewer.skins.customPopUpRendererSkin");
}
I'm still in version 2.4, and my customPopUpRendererSkin is based on the one from API 2.4. If you have 2.5, download that new skin and make the changes to that one...

Hi Mattias,

Can you please explain me how can I make it flash instead of just beeing highlighted?

Thanks in advance.

Re: Make feature flash when popup is viewed

DilsonKitoko — Wed, 28 May 2014 09:56:03 GMT

All,

So here is the full file with Mattias last addition and a new private var at the top where you can set the highlight color (if you don't want Red).

Hi Robert,

I've downloaded your attached PopRenderSkin and deployed on eSearch 2.5. It's working, but i was wondering if that's possible to make the feature flash, instead of a static glow. And how can I implement this

Many Thanks,

Re: Make feature flash when popup is viewed

RobertScheitlin__GISP — Wed, 28 May 2014 12:06:43 GMT

Dilson,

If you want to do something different than what the provided code does than you will have to learn to program it yourself (all the programming is not always going to be done for you, unless you hire a programmer). Here is a thread where I show someone how to flash a feature graphic on the map:
http://forums.arcgis.com/threads/104402-GPS-coordinates-inputing-a-graphic