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

Make feature flash when popup is viewed

philippschnetzer

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 🙂

Najděte více příspěvků označených jako

Accepted answers

MattiasEkstr√∂m

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...

customPopUpRendererSkin.zip

uninstallSP.jpg

All comments

DilsonKitoko

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

Ok Robert,

Thanks for your time.

RobertScheitlin__GISP

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

DilsonKitoko

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,

DilsonKitoko

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.

DilsonKitoko

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!

RobertScheitlin__GISP

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.

DilsonKitoko

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,

DilsonKitoko

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,

RobertScheitlin__GISP

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.

DilsonKitoko

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,

RobertScheitlin__GISP

Dilson,

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

DilsonKitoko

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,

RobertScheitlin__GISP

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).

PopUpRendererSkin.zip

generate_near_test.jpg

MattiasEkstr√∂m

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

AlexSanders

Good catch, I'm still on 4.1A.

MLowry

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;

AlexSanders

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

RobertScheitlin__GISP

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

philippschnetzer

Mattias,

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

MattiasEkstr√∂m

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...

customPopUpRendererSkin.zip

uninstallSP.jpg

Připojte se k diskusi

Přihlášení členové mohou přispívat, sledovat aktualizace a další. Jste tu noví? Zaregistrujte si bezplatný účet.

Rychlé odkazy

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