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

3289
18
Jump to solution
07-27-2020 06:58 AM
PaulMcCord
Occasional Contributor

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:

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

0 Kudos
18 Replies
PaulMcCord
Occasional Contributor

Unfortunately, when I do this, it removes the yellow outline around the parcel and the cyan fill remains. 

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Paul,

  So that tells me that the cyan fill is Not from the search widget then. Do you have something in your code that shows the popup or calls the feature layer views highlight method do you?

0 Kudos
PaulMcCord
Occasional Contributor

I've combed through my code, but I don't see anywhere where I'm showing popups or calling the feature layer views highlight method. In fact, I'm intentionally staying away from popups since I'm showing the parcel attribute information in a sidebar that's part of the application.

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Paul,

   Are you using the FeatureForm widget or any other widget that might produce a highlight?

0 Kudos
PaulMcCord
Occasional Contributor

I'm only using the Search widget.

Something that I've noticed is that right when I start revising my search after initially making a search, the cyan shading is removed. Here are a couple of screen shots to show you what I mean.

In this screenshot, I searched for 500 Griswold, which returned my symbology which I'm calling from my own function (the yellow border) as well as the cyan fill.

Search with correct address

In the below screenshot, I've removed the 'd' from Griswold, and it immediately removes the cyan fill:

Revised search

Is this a clue for why the cyan fill is being applied?

Also,

I have a process that removes the entire parcel layer when the user zooms out too far. When I do this when the cyan fill is on the map, it is removed when I reach the level where the parcel layer is removed from the map. When I zoom back in (which puts the parcel layer back on the map), the cyan fill does not return... the parcel layer is added back to the map with the yellow outline for the selected parcel, but there is no cyan object. Before I zoom out to remove the parcel layer, I run console.log(view.layerView.length)and get a value of '2'. When I zoom out and then back in, which removes the cyan object but places the parcel layer and yellow outline back on the map, I still get a value of 2 when running console.log(view.layerView.length). So, when I run console.log() the first time and I'm returned a value of '2', the cyan object is not part of that count.

0 Kudos
PaulMcCord
Occasional Contributor

Hi Robert,

I'm returning to this issue today after taking a break from it. I still have not found a solution. One additional thing that I've discovered is that when I use the 'X' to clear my search result from the map, it removes the search object. This again makes me think that the issue is related to the Search widget.

If we've reached a dead end, is there another resource I should try aside from Geonet? Would calling ESRI tech support be an option? I still need to figure out a way to get this cyan object off from the map since it's confusing for the user.

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Paul,

  Yes, tech support is your next step.

0 Kudos
PaulMcCord
Occasional Contributor

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
        }
    });
RyanSutcliffe
Occasional Contributor II

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]

0 Kudos