Highlight Popup Feature from Map Image Layer, JS API 4.9

3469
14
Jump to solution
11-06-2018 06:19 PM
cle444
by
New Contributor III

Questions:

1. Mechanism of highlighting popup's selected feature from a query enabled map image layer? Found the popup highlighting is enabled by default for feature layers, controlled by view.highlightOptions. Is there a magical setting for map image layer then there is no need to have a workaround using graphics?

2. For the feature layer popup highlighting, where is that piece of blue highlighting graphic stored in JS? Initially, I thought it may be in view.graphics, not there.

Side by side comparison:

Map Service, popup and no highlighting: Highlight popup on MapImageLayer - ArcGIS JS API 4.9 

Feature Service, popup and highlighting in blue: Highlight popup on FeatureLayer - ArcGIS JS API 4.9 

Appreciated if there is anyone with such experience.

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

Hua,

   In the 3.x API when a ArcGISDynamicMapServiceLayer has infoTemplates defined, the API would query the map service when a click occurred to see if the click intersected a feature and would return the geometry from the intersected feature to the map popup to be used as the highlight geometry.

1. This is not the case in 4.x. I am not sure the reason way but can speculate that it is overhead that the API developer did not want coded into the API and now leave to developer to add the graphic for the highlight in their own code.

2. The API directly draws to the canvas for this and not the default view.graphics (as far as I know).

View solution in original post

0 Kudos
14 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

Hua,

   In the 3.x API when a ArcGISDynamicMapServiceLayer has infoTemplates defined, the API would query the map service when a click occurred to see if the click intersected a feature and would return the geometry from the intersected feature to the map popup to be used as the highlight geometry.

1. This is not the case in 4.x. I am not sure the reason way but can speculate that it is overhead that the API developer did not want coded into the API and now leave to developer to add the graphic for the highlight in their own code.

2. The API directly draws to the canvas for this and not the default view.graphics (as far as I know).

0 Kudos
cle444
by
New Contributor III

Thanks Rob. Have done another dig and found something that I think better put it here.

The highlight works for feature layers because of FeatureLayerView has a method highlight.

E.g. const highlightFeature = featLyrView.highlight(feat.attributes["OBJECTID"]);

To remove, use highlightFeature.remove();

Still not sure where that highlight graphic is stored, anyone can shed some light on this?

In contrast, for map image layers, the corresponding layer view has the declared class of "esri.views.2d.layers.MapImageLayerView2D", which simply doesn't have this highlight method. This is probably the reason no auto highlight on image layers.

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Still not sure where that highlight graphic is stored, anyone can shed some light on this?

The API directly draws to the canvas for this and not the default view.graphics (as far as I know).

cle444
by
New Contributor III

I hear you Rob, but don't quite get it what canvas means. If API can draw the highlight and then dismiss it, does it mean the graphic is stored somewhere?

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Hua,

  Canvas is:

HTML5 Canvas 

In the past esri used SVG to render all their layers in the browser but in modern HTML5 browsers there is the much more capable Canvas. You can see that there is no layer used for this graphic if you loop through all the maps layers using allLayers collection. I have not tracked it down yet but I beleive the highlight is drawn on the same canvas as the FeatureLayer.

If API can draw the highlight and then dismiss it, does it mean the graphic is stored somewhere?

When the FeatureLayerView executes highlight method the return of this method is a object that can be user to remove the highlight.

0 Kudos
AshleyPeters
Occasional Contributor II

Hua,

Did you find a work around to highlight the popup's selected feature when using MapImageLayer? I'd like to do the same thing in 4.12.

Ashley

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Ashley,

   Here is how to do it for a MapImageLayer (assuming the layer type is a polygon).

        view.popup.watch('selectedFeature', function(gra){
          if(gra){
            view.graphics.removeAll();
            var h = view.highlightOptions;
            gra.symbol = {
              type: "simple-fill", // autocasts as new SimpleFillSymbol()
              color: [h.color.r,h.color.g, h.color.b, h.fillOpacity],
              outline: {
                // autocasts as new SimpleLineSymbol()
                color: [h.color.r,h.color.g, h.color.b, h.color.a],
                width: 1
              }
            };
            view.graphics.add(gra);
          }else{
            view.graphics.removeAll();
          }
        });
        
        view.popup.watch('visible', function(vis){
          if(!vis){
            view.graphics.removeAll();
          }
        });
AshleyPeters
Occasional Contributor II

Robert,

A huge thank you! I've been trying to figure that out all day.

Ashley

0 Kudos
AshleyPeters
Occasional Contributor II

Robert,

I've implemented the code from above and it works beautifully on all of my MapImageLayers but one. From what I can tell the only difference is that this layer I want the user to turn on, so I've set the visibility to false. Any ideas?

Ashley

0 Kudos