I'm using the Search widget to allow users to search for parcel addresses. The Search process is working properly except it places a blue graphic on the map even though I'm specifying that I don't want a graphic. I'm assigning my own symbology to the selected feature (the orange border in the below image), and I don't want the additional blue graphic that is being forced on the selected feature. Here is my code for the search process: //Create search tool to search addresses const searchTool = new Search ( { view : myView , sources : [ { layer : parcelLyr , searchFields : [ "propstreet" ] , displayField : "propstreet" , name : "LayerSearchSource" , placeholder : "example: 500 Griswold" , suggestionsEnabled : true , //autoNavigate: true, resultGraphicEnabled : false } ] , container : addressSearchBar , includeDefaultSources : false , resultGraphicEnabled : false } ) searchTool . on ( "select-result" , function ( event ) { console . log ( "location was chosen " , event ) long = event . result . feature . geometry . centroid . longitude + 0.003 lat = event . result . feature . geometry . centroid . latitude myView . center = [ long , lat ] ; myView . zoom = 16 console . log ( "geometry: " , event . result . feature . geometry ) selectedParcel = event . result . feature createHighlightedParcel ( ) ; } ) I create my own symbology in the createHighlightedParcel() function at the end. My understanding is that setting resultGraphicEnabled to false should remove the result graphic. Am I wrong about this? Is there another way to prevent the result graphic? Thank you

After speaking with tech support, we've found a solution for my issue. The result object is still added to the map, but I changed the opacity for the fill and the outline to be completely transparent. The highlightOptions within the MapView took care of the issue: myView = new MapView ( { container : "map_canvas" , map : myMap , center : mapCenter , //Center map on downtown Detroit zoom : zoomLevel , //Exclude the zoom widget from the UI ui : { components : [ "attribution" ] } , constraints : { rotationEnabled : false } , //Highlight options to hide Search result from map highlightOptions : { color : [ 0 , 0 , 0 , 0.0 ] , fillOpacity : 0.0 } } ) ;

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

Remove Result Graphic following Search - ArcGIS API for JS v4.16

PaulMcCord

I'm using the Search widget to allow users to search for parcel addresses. The Search process is working properly except it places a blue graphic on the map even though I'm specifying that I don't want a graphic. I'm assigning my own symbology to the selected feature (the orange border in the below image), and I don't want the additional blue graphic that is being forced on the selected feature.

Selected feature following search

Here is my code for the search process:

<SPAN class="comment token">//Create search tool to search addresses</SPAN>
    <SPAN class="keyword token">const</SPAN> searchTool <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Search</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
        view<SPAN class="punctuation token">:</SPAN> myView<SPAN class="punctuation token">,</SPAN>
        sources<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN>
            <SPAN class="punctuation token">{</SPAN>
                layer<SPAN class="punctuation token">:</SPAN> parcelLyr<SPAN class="punctuation token">,</SPAN>
                searchFields<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="string token">"propstreet"</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
                displayField<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"propstreet"</SPAN><SPAN class="punctuation token">,</SPAN>
                name<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"LayerSearchSource"</SPAN><SPAN class="punctuation token">,</SPAN>
                placeholder<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"example: 500 Griswold"</SPAN><SPAN class="punctuation token">,</SPAN>
                suggestionsEnabled<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">,</SPAN>
                <SPAN class="comment token">//autoNavigate: true,</SPAN>
                resultGraphicEnabled<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</SPAN>
            <SPAN class="punctuation token">}</SPAN>
            
        <SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
        container<SPAN class="punctuation token">:</SPAN> addressSearchBar<SPAN class="punctuation token">,</SPAN>
        includeDefaultSources<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">,</SPAN>
        resultGraphicEnabled<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</SPAN>
    <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN>

    searchTool<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"select-result"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>event<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
        console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"location was chosen "</SPAN><SPAN class="punctuation token">,</SPAN> event<SPAN class="punctuation token">)</SPAN>
        long <SPAN class="operator token">=</SPAN> event<SPAN class="punctuation token">.</SPAN>result<SPAN class="punctuation token">.</SPAN>feature<SPAN class="punctuation token">.</SPAN>geometry<SPAN class="punctuation token">.</SPAN>centroid<SPAN class="punctuation token">.</SPAN>longitude <SPAN class="operator token">+</SPAN> <SPAN class="number token">0.003</SPAN>
        lat <SPAN class="operator token">=</SPAN> event<SPAN class="punctuation token">.</SPAN>result<SPAN class="punctuation token">.</SPAN>feature<SPAN class="punctuation token">.</SPAN>geometry<SPAN class="punctuation token">.</SPAN>centroid<SPAN class="punctuation token">.</SPAN>latitude
        myView<SPAN class="punctuation token">.</SPAN>center <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">[</SPAN>long<SPAN class="punctuation token">,</SPAN> lat<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN>
        myView<SPAN class="punctuation token">.</SPAN>zoom <SPAN class="operator token">=</SPAN> <SPAN class="number token">16</SPAN>
        console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"geometry: "</SPAN><SPAN class="punctuation token">,</SPAN> event<SPAN class="punctuation token">.</SPAN>result<SPAN class="punctuation token">.</SPAN>feature<SPAN class="punctuation token">.</SPAN>geometry<SPAN class="punctuation token">)</SPAN>
        selectedParcel <SPAN class="operator token">=</SPAN> event<SPAN class="punctuation token">.</SPAN>result<SPAN class="punctuation token">.</SPAN>feature
        <SPAN class="token function">createHighlightedParcel</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>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

I create my own symbology in the createHighlightedParcel() function at the end. My understanding is that setting resultGraphicEnabled to false should remove the result graphic. Am I wrong about this? Is there another way to prevent the result graphic?

Thank you

Vind meer berichten getagd met

Accepted answers

PaulMcCord

After speaking with tech support, we've found a solution for my issue. The result object is still added to the map, but I changed the opacity for the fill and the outline to be completely transparent. The highlightOptions within the MapView took care of the issue:

myView <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">MapView</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
        container<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"map_canvas"</SPAN><SPAN class="punctuation token">,</SPAN>
        map<SPAN class="punctuation token">:</SPAN> myMap<SPAN class="punctuation token">,</SPAN>
        center<SPAN class="punctuation token">:</SPAN> mapCenter<SPAN class="punctuation token">,</SPAN>  <SPAN class="comment token">//Center map on downtown Detroit</SPAN>
        zoom<SPAN class="punctuation token">:</SPAN> zoomLevel<SPAN class="punctuation token">,</SPAN>
        <SPAN class="comment token">//Exclude the zoom widget from the UI</SPAN>
        ui<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
          components<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="string token">"attribution"</SPAN><SPAN class="punctuation token">]</SPAN>
        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
        constraints<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
          rotationEnabled<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</SPAN>
        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
        <SPAN class="comment token">//Highlight options to hide Search result from map</SPAN>
        highlightOptions<SPAN class="punctuation token">:</SPAN><SPAN class="punctuation token">{</SPAN>
            color<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0.0</SPAN> <SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
            fillOpacity<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0.0</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>

All comments

RobertScheitlin__GISP

Paul,

The search widgets graphic is orange when the

resultGraphicEnabled: true

So the cyan color you are seeing is from the popup selection.

PaulMcCord

Thanks Robert. I'm not sure if I understood your response. I set the popupEnabled option to 'false', but I'm still seeing the cyan symbology when the Search widget finishes. Is there another option I need to set?

RobertScheitlin__GISP

Paul,

It is something in your code base, because when I set the resultGraphicEnablerd to false in the sample that allows for searching a polygon it does not have a cyan or orange graphic in the map (as expected). So that is why I thought that some where in your code you are using the popup (which applies a cyan fill to the selected graphic).

Screenshot 2026-05-12 082019.png

vypocitany_vyraz.png

ulozit_zmeny.png

PaulMcCord

The strange thing is that when I revert back to ArcGIS API for JS v 4.11, the cyan feature isn't added. As soon as I move to 4.12 or more recent, it's added and I can't get it to go away.

Is there something I can do with the resultGraphic parameter or do you have any examples of using the resultGrahic in the Search tool? At this point, I'm willing to just style it in a way that it is hidden from view. The documentation for Search says this about the resultGraphic, but I can't find any examples online of how to set this up:

The graphic used to highlight the resulting feature or location.

A graphic will be placed in the View's graphics for layer views that do not support the highlight method.

PaulMcCord

myView <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">MapView</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
        container<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"map_canvas"</SPAN><SPAN class="punctuation token">,</SPAN>
        map<SPAN class="punctuation token">:</SPAN> myMap<SPAN class="punctuation token">,</SPAN>
        center<SPAN class="punctuation token">:</SPAN> mapCenter<SPAN class="punctuation token">,</SPAN>  <SPAN class="comment token">//Center map on downtown Detroit</SPAN>
        zoom<SPAN class="punctuation token">:</SPAN> zoomLevel<SPAN class="punctuation token">,</SPAN>
        <SPAN class="comment token">//Exclude the zoom widget from the UI</SPAN>
        ui<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
          components<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="string token">"attribution"</SPAN><SPAN class="punctuation token">]</SPAN>
        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
        constraints<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
          rotationEnabled<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</SPAN>
        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
        <SPAN class="comment token">//Highlight options to hide Search result from map</SPAN>
        highlightOptions<SPAN class="punctuation token">:</SPAN><SPAN class="punctuation token">{</SPAN>
            color<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0.0</SPAN> <SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
            fillOpacity<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0.0</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>

RyanSutcliffe

I came across this post because I am trying to determine how to remove the highlight that the Search widget will create when you search a record in a layer.

This looks to also be the problem above. The search method on the Search widget creates a highlight on the FeatureLayerView. Its not a graphic. The core problem is to remove a highlight you need a reference to the handle it returns when you query a layerView. However the API is unclear about how we're going to get a handle on it as the search method returns a SearchResponse which contains results with an array of SearchResult objects. None of that seems like what we need.

The answer provided by ESRI support is to make highlights for all layers in a map styled as transparent so that they are invisible? This is a pretty hacky solution. In my apps I use the hightlight functionality so that doesn't work.

I'm hoping someone can pipe in with a better solution to this problem.

[update 2022-06-21: the 'clear()' method on the searchWidget, among other things will remove a highlight from a selected search record. Although I had interest in more fine grained control; remove highlight/keep selection, this is what worked for me]

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

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