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

3192
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
1 Solution

Accepted Solutions
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
        }
    });

View solution in original post

18 Replies
RobertScheitlin__GISP
MVP Emeritus

Paul,

   The search widgets graphic is orange when the 

resultGraphicEnabled: true

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

0 Kudos
PaulMcCord
Occasional Contributor

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?

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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

0 Kudos
PaulMcCord
Occasional Contributor

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.

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Paul,

   Have you tried view.graphics.removeAll()?

0 Kudos
PaulMcCord
Occasional Contributor

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.

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Paul,

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

0 Kudos
PaulMcCord
Occasional Contributor

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:

Result graphic details

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Then try

resultGraphic.layer.removeAll();

0 Kudos