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

Disable popup on web component feature search

JaredPilbeam2

I can't seem to disable the popup on the search component for a feature layer. Here is a simple sample. To recreate my problem search "man". Click MANHATTAN under town. There's a popup on this feature I can't get rid of.

I've been looking and trying all the relevant properties I can find for both the arcgis-search and arcgis-features to disable the popup. Nothing worked sofar. I've included popup-disabled in the arcgis-map component too. Is there a way to stop the popup in the code and not on the feature itself in AGOL?

EDIT: I should add in my actual app I have other feature layers that I want popups enabled so I can't really disable them in the arcgis-map component.

Find more posts tagged with

Accepted answers

MatthewDriscoll

'popupEnabled: false' should work fine. You place it in the individual search component, the other layers should not be affected.

search.sources = [
  {
    layer: muni,
    searchFields: ["NAME"],
    displayField: "NAME",
    exactMatch: false,
    outFields: ["NAME"],
    name: "Town",
    placeholder: "search by town",
    popupEnabled: false   // ******
  },
  {
    name: "ArcGIS World Geocoding Service",
    placeholder: "example: Nuuk, GRL",
    singleLineFieldName: "SingleLine",
    apiKey: "YOUR_ACCESS_TOKEN",
    url: "https://geocode-api.arcgis.com/arcgis/rest/services/World/GeocodeServer",
    popupEnabled: false
  }
];

All comments

MatthewDriscoll

Glad to help. I also tried that and didn't get the results I expected. No worries, these exercises help me keep up with things outside my normal day to day stuff.

JaredPilbeam2

Sorry to put you through that. Your first response worked. I swore I tried that.

MatthewDriscoll

I got a chance to play around with this and saw what you are talking about. It looks like you are using a popup in AGOL, and using that SAME layer for your search in the SDK. The SDK will assign the popupEnable globally to that layer. You created a bit of a mess mixing the two on the same layer. The only way I could figure out is to disable all popups, then recreating the popup all over again. I have a feeling it will buggy, AGOL settings might keep trying to re-enter the chat.

    view.map.add(muni);

    const search = document.querySelector("arcgis-search");
    await search.componentOnReady();

    search.sources = [{
      layer: muni,
      searchFields: ["NAME"],
      displayField: "NAME",
      exactMatch: false,
      outFields: ["NAME"],
      name: "Town",
      placeholder: "search by town",
      popupEnabled: false   
    }];

    // Stop ALL popups.
    view.popup.autoOpenEnabled = false;

    // Track when search is happening
    let fromSearch = false;

    search.addEventListener("arcgisSearchSelectResult", async (event) => {
      fromSearch = true;

      const result = event.detail.result;

      await view.goTo(result.extent || result.feature.geometry);

    });

    // Kill popup AFTER it appears
    reactiveUtils.when(
      () => view.popup?.visible === true,
      () => {
        if (fromSearch) {
          view.popup.visible = false;  
          fromSearch = false;
        }
      }
    );

    // restore popup
    view.on("click", async (event) => {
      const hit = await view.hitTest(event);

      const result = hit.results.find(r => r.graphic.layer === muni);

      if (result) {
        view.popup.open({
          features: [result.graphic],
          location: event.mapPoint
        });
      }
    });

MatthewDriscoll

'popupEnabled: false' should work fine. You place it in the individual search component, the other layers should not be affected.

search.sources = [
  {
    layer: muni,
    searchFields: ["NAME"],
    displayField: "NAME",
    exactMatch: false,
    outFields: ["NAME"],
    name: "Town",
    placeholder: "search by town",
    popupEnabled: false   // ******
  },
  {
    name: "ArcGIS World Geocoding Service",
    placeholder: "example: Nuuk, GRL",
    singleLineFieldName: "SingleLine",
    apiKey: "YOUR_ACCESS_TOKEN",
    url: "https://geocode-api.arcgis.com/arcgis/rest/services/World/GeocodeServer",
    popupEnabled: false
  }
];

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

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