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

Highlight Popup Feature from Map Image Layer, JS API 4.9

cle444

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.

Encuentra más publicaciones etiquetadas con

Accepted answers

rscheitlin

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

All comments

Nicolas_

You can control the highlight of the selected features using the popup.

For exemple, if you don't want imagery layers highlighted by the popup, you can do this:

reactiveUtils.watch(() => view.popup.selectedFeature, () => {
    if (view.popup.selectedFeature && view.popup.selectedFeature.layer.type === "imagery") {
        view.popup.highlightEnabled = false;
    } else {
        view.popup.highlightEnabled = true;
    }
})

rscheitlin

Ashley,

So are you saying that after it is turned on it will not popup with highlight?

AshleyPeters

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

AshleyPeters

Robert,

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

Ashley

rscheitlin

Ashley,

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

        view<SPAN class="punctuation token">.</SPAN>popup<SPAN class="punctuation token">.</SPAN><SPAN class="token function">watch</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'selectedFeature'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>gra<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
          <SPAN class="keyword token">if</SPAN><SPAN class="punctuation token">(</SPAN>gra<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
            view<SPAN class="punctuation token">.</SPAN>graphics<SPAN class="punctuation token">.</SPAN><SPAN class="token function">removeAll</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
            <SPAN class="keyword token">var</SPAN> h <SPAN class="operator token">=</SPAN> view<SPAN class="punctuation token">.</SPAN>highlightOptions<SPAN class="punctuation token">;</SPAN>
            gra<SPAN class="punctuation token">.</SPAN>symbol <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN>
              type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"simple-fill"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="comment token">// autocasts as new SimpleFillSymbol()</SPAN>
              color<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN>h<SPAN class="punctuation token">.</SPAN>color<SPAN class="punctuation token">.</SPAN>r<SPAN class="punctuation token">,</SPAN>h<SPAN class="punctuation token">.</SPAN>color<SPAN class="punctuation token">.</SPAN>g<SPAN class="punctuation token">,</SPAN> h<SPAN class="punctuation token">.</SPAN>color<SPAN class="punctuation token">.</SPAN>b<SPAN class="punctuation token">,</SPAN> h<SPAN class="punctuation token">.</SPAN>fillOpacity<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
              outline<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                <SPAN class="comment token">// autocasts as new SimpleLineSymbol()</SPAN>
                color<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN>h<SPAN class="punctuation token">.</SPAN>color<SPAN class="punctuation token">.</SPAN>r<SPAN class="punctuation token">,</SPAN>h<SPAN class="punctuation token">.</SPAN>color<SPAN class="punctuation token">.</SPAN>g<SPAN class="punctuation token">,</SPAN> h<SPAN class="punctuation token">.</SPAN>color<SPAN class="punctuation token">.</SPAN>b<SPAN class="punctuation token">,</SPAN> h<SPAN class="punctuation token">.</SPAN>color<SPAN class="punctuation token">.</SPAN>a<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
                width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">1</SPAN>
              <SPAN class="punctuation token">}</SPAN>
            <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN>
            view<SPAN class="punctuation token">.</SPAN>graphics<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>gra<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
          <SPAN class="punctuation token">}</SPAN><SPAN class="keyword token">else</SPAN><SPAN class="punctuation token">{</SPAN>
            view<SPAN class="punctuation token">.</SPAN>graphics<SPAN class="punctuation token">.</SPAN><SPAN class="token function">removeAll</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
          <SPAN class="punctuation token">}</SPAN>
        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        
        view<SPAN class="punctuation token">.</SPAN>popup<SPAN class="punctuation token">.</SPAN><SPAN class="token function">watch</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'visible'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>vis<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
          <SPAN class="keyword token">if</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="operator token">!</SPAN>vis<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
            view<SPAN class="punctuation token">.</SPAN>graphics<SPAN class="punctuation token">.</SPAN><SPAN class="token function">removeAll</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
          <SPAN class="punctuation token">}</SPAN>
        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

AshleyPeters

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

cle444

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?

rscheitlin

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

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.

rscheitlin

Hua,

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

Únete a la Conversación

Los miembros registrados pueden publicar, seguir actualizaciones y más. ¿Nuevo aquí? Regístrate gratis.

Enlaces Rápidos

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