topic Re: Remove Result Graphic following Search - ArcGIS API for JS v4.16 in ArcGIS JavaScript Maps SDK Questions

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

PaulMcCord — Fri, 10 Dec 2021 20:06:22 GMT

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

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

RobertScheitlin__GISP — Mon, 27 Jul 2020 14:25:23 GMT

Paul,

The search widgets graphic is orange when the

resultGraphicEnabled: true

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

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

PaulMcCord — Mon, 27 Jul 2020 14:49:46 GMT

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?

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

RobertScheitlin__GISP — Mon, 27 Jul 2020 14:57:16 GMT

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

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

PaulMcCord — Mon, 27 Jul 2020 16:00:41 GMT

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.

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

RobertScheitlin__GISP — Mon, 27 Jul 2020 16:05:31 GMT

Paul,

Have you tried view.graphics.removeAll()?

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

PaulMcCord — Mon, 27 Jul 2020 17:13:53 GMT

view.graphics.removeAll() doesn't remove it from the map view. When I console.log view.graphics.length, there are no graphics even before I try to remove any graphics. I'm at a loss as to why this graphic is appearing and how to remove it.

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

RobertScheitlin__GISP — Mon, 27 Jul 2020 17:15:57 GMT

Paul,

Have you tried to see if the Seach widgets resultGraphic is a graphic or is it null?

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

PaulMcCord — Fri, 10 Dec 2021 20:06:25 GMT

Here's my process that runs after the Search tool executes. I put this process together to center the Map View on the result.

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
        selectedParcel = event.result.feature
        createHighlightedParcel();

        //Opens Parcel Info Panel and places results in panel
        if ($("#parcelInfoPanel").css("visibility") === "hidden"){
            console.log("in the show pacel info panel function")
            showParcelInfoPanel();  //Reveals panel with parcel information
        }
        console.log(selectedParcel)
        populateParcelPanel(selectedParcel);  //Grabs parcel information from parcel features for the parcel panel
    })‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

I'm grabbing the result of the search in the second line.

Then, when I unpack that object it the console, by clicking on target, then resultGraphic, the value of resultGraphic is an object. Here is a screenshot of my console:

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

RobertScheitlin__GISP — Mon, 27 Jul 2020 17:37:09 GMT

Then try

resultGraphic.layer.removeAll();

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

PaulMcCord — Mon, 27 Jul 2020 17:51:55 GMT

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

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

RobertScheitlin__GISP — Mon, 27 Jul 2020 18:06:50 GMT

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?

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

PaulMcCord — Mon, 27 Jul 2020 18:46:52 GMT

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.

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

RobertScheitlin__GISP — Mon, 27 Jul 2020 19:17:27 GMT

Paul,

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

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

PaulMcCord — Mon, 27 Jul 2020 19:25:50 GMT

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.

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

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.

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

PaulMcCord — Thu, 30 Jul 2020 12:57:29 GMT

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.

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

RobertScheitlin__GISP — Thu, 30 Jul 2020 13:03:28 GMT

Paul,

Yes, tech support is your next step.

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

PaulMcCord — Fri, 10 Dec 2021 20:06:28 GMT

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

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

RyanSutcliffe — Tue, 21 Jun 2022 18:57:38 GMT

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]