Shop popup on hover and unselect selected feature

Vakhtang_Zubiashvili · ‎02-29-2024

Hello Guyz,

I have changed click event to mouseover in this sample, here on mouse hover view goes to feature. Two thing i want to do are:

1) Open popup for selected feature, i tried view.openPopup({}), but i think i have missing something.

2) Deselect selected feature after mouse out on button.

this two thing, i think it will help others too in the future.

Thanks

JoelBennett · ‎02-29-2024

This probably has what you need to accomplish what you're trying to do, or at least get you closer to it anyways:

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>
      Highlight point features | Sample | ArcGIS Maps SDK for JavaScript 4.29
    </title>

    <link rel="stylesheet" href="https://js.arcgis.com/4.29/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.29/"></script>
    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }

      #paneDiv {
        position: absolute;
        bottom: 40px;
        width: 100%;
        text-align: center;
        background-color: transparent;
        color: white;
      }

      .esri-button-overwrite {
        width:auto;
        display: table-cell;
        margin: 4px;
        background-color: white;
        color: #0079c1;
      }
    </style>
    <script>
      require(["esri/Map", "esri/WebScene", "esri/views/SceneView"], (
        Map,
        WebScene,
        SceneView
      ) => {
        // load webscene from portal item
        const webScene = new WebScene({
          portalItem: {
            // autocasts as new PortalItem()
            id: "475a7161ed194460b5b52654e29581a2"
          }
        });

        const view = new SceneView({
          map: webScene,
          container: "viewDiv",
          // set highlightOptions like color and fillOpacity
          highlightOptions: {
            color: [255, 241, 58],
            fillOpacity: 0.4
          }
        });

        // these two highlight handlers are used for selection and hovering over features
        let highlightSelect;

        webScene.when(() => {
          // get layer from webScene
          const stationLayer = webScene.layers.getItemAt(1);

          // highlight is set on the layerView, so we need to detect when the layerView is ready
          view.whenLayerView(stationLayer).then((layerView) => {
            // creates the query that will be used to obtain the features needed for the highlight
            const queryStations = stationLayer.createQuery();
            // features that are passed in the highlight function need to have an `objectID`
            // if the query is built using `new Query()` then `queryStations.outFields = ["objectID"]` should be set

            const buttons = document.querySelectorAll("button");
            for (let i = 0, button = null; (button = buttons[i]); i++) {
              button.addEventListener("mouseover", onClick);
              button.addEventListener("mouseout", onMouseOut);
            }

            function onClick(event) {
              queryStations.where = `nom='${event.target.innerText}'`;
              stationLayer.queryFeatures(queryStations).then((result) => {
                if (typeof view.popup?.clear == "function") {
                  view.popup.close();
                  view.popup.clear();
                }

                // if a feature is already highlighted, then remove the highlight
                if (highlightSelect) {
                  highlightSelect.remove();
                  highlightSelect = null;
                }

                // the feature to be highlighted
                const feature = result.features[0];

                view.openPopup({ features: [feature] });

                // use the objectID to highlight the feature
                highlightSelect = layerView.highlight(
                  feature.attributes["OBJECTID"]
                );
/*
                      // center the feature
                      view
                        .goTo(
                          {
                            target: feature.geometry,
                            tilt: 70,
                            zoom: 16
                          },
                          {
                            duration: 2000,
                            easing: "in-out-expo"
                          }
                        )
                        .catch((error) => {
                          if (error.name != "AbortError") {
                            console.error(error);
                          }
                        });
*/
              });
            }

            function onMouseOut(evt) {
              if (typeof view.popup?.clear == "function") {
                view.popup.close();
                view.popup.clear();
              }

              if (highlightSelect) {
                highlightSelect.remove();
                highlightSelect = null;
              }
            }
          });
        });
      });
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
    <div id="paneDiv" class="esri-widget">
      <h3>Subway stations</h3>
      <button class="esri-button esri-button-overwrite">Valmy</button>
      <button class="esri-button esri-button-overwrite">
        St-Jean Vieux Lyon
      </button>
      <button class="esri-button esri-button-overwrite">Charpennes</button>
      <button class="esri-button esri-button-overwrite">Sans souci</button>
      <button class="esri-button esri-button-overwrite">Hôtel de Ville</button>
      <button class="esri-button esri-button-overwrite">Garibaldi</button>
    </div>
  </body>
</html>

Note that adding and removing a highlight is redundant because the popup adds its own highlight as well. Therefore, in order to get rid of the popup's highlight, I added code to close the popup as well. I also commented out the part where the view zooms to the selected feature...otherwise, the popup would always appear over top of the feature, effectively hiding it.

View solution in original post

JoelBennett · ‎02-29-2024

This probably has what you need to accomplish what you're trying to do, or at least get you closer to it anyways:

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>
      Highlight point features | Sample | ArcGIS Maps SDK for JavaScript 4.29
    </title>

    <link rel="stylesheet" href="https://js.arcgis.com/4.29/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.29/"></script>
    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }

      #paneDiv {
        position: absolute;
        bottom: 40px;
        width: 100%;
        text-align: center;
        background-color: transparent;
        color: white;
      }

      .esri-button-overwrite {
        width:auto;
        display: table-cell;
        margin: 4px;
        background-color: white;
        color: #0079c1;
      }
    </style>
    <script>
      require(["esri/Map", "esri/WebScene", "esri/views/SceneView"], (
        Map,
        WebScene,
        SceneView
      ) => {
        // load webscene from portal item
        const webScene = new WebScene({
          portalItem: {
            // autocasts as new PortalItem()
            id: "475a7161ed194460b5b52654e29581a2"
          }
        });

        const view = new SceneView({
          map: webScene,
          container: "viewDiv",
          // set highlightOptions like color and fillOpacity
          highlightOptions: {
            color: [255, 241, 58],
            fillOpacity: 0.4
          }
        });

        // these two highlight handlers are used for selection and hovering over features
        let highlightSelect;

        webScene.when(() => {
          // get layer from webScene
          const stationLayer = webScene.layers.getItemAt(1);

          // highlight is set on the layerView, so we need to detect when the layerView is ready
          view.whenLayerView(stationLayer).then((layerView) => {
            // creates the query that will be used to obtain the features needed for the highlight
            const queryStations = stationLayer.createQuery();
            // features that are passed in the highlight function need to have an `objectID`
            // if the query is built using `new Query()` then `queryStations.outFields = ["objectID"]` should be set

            const buttons = document.querySelectorAll("button");
            for (let i = 0, button = null; (button = buttons[i]); i++) {
              button.addEventListener("mouseover", onClick);
              button.addEventListener("mouseout", onMouseOut);
            }

            function onClick(event) {
              queryStations.where = `nom='${event.target.innerText}'`;
              stationLayer.queryFeatures(queryStations).then((result) => {
                if (typeof view.popup?.clear == "function") {
                  view.popup.close();
                  view.popup.clear();
                }

                // if a feature is already highlighted, then remove the highlight
                if (highlightSelect) {
                  highlightSelect.remove();
                  highlightSelect = null;
                }

                // the feature to be highlighted
                const feature = result.features[0];

                view.openPopup({ features: [feature] });

                // use the objectID to highlight the feature
                highlightSelect = layerView.highlight(
                  feature.attributes["OBJECTID"]
                );
/*
                      // center the feature
                      view
                        .goTo(
                          {
                            target: feature.geometry,
                            tilt: 70,
                            zoom: 16
                          },
                          {
                            duration: 2000,
                            easing: "in-out-expo"
                          }
                        )
                        .catch((error) => {
                          if (error.name != "AbortError") {
                            console.error(error);
                          }
                        });
*/
              });
            }

            function onMouseOut(evt) {
              if (typeof view.popup?.clear == "function") {
                view.popup.close();
                view.popup.clear();
              }

              if (highlightSelect) {
                highlightSelect.remove();
                highlightSelect = null;
              }
            }
          });
        });
      });
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
    <div id="paneDiv" class="esri-widget">
      <h3>Subway stations</h3>
      <button class="esri-button esri-button-overwrite">Valmy</button>
      <button class="esri-button esri-button-overwrite">
        St-Jean Vieux Lyon
      </button>
      <button class="esri-button esri-button-overwrite">Charpennes</button>
      <button class="esri-button esri-button-overwrite">Sans souci</button>
      <button class="esri-button esri-button-overwrite">Hôtel de Ville</button>
      <button class="esri-button esri-button-overwrite">Garibaldi</button>
    </div>
  </body>
</html>

Note that adding and removing a highlight is redundant because the popup adds its own highlight as well. Therefore, in order to get rid of the popup's highlight, I added code to close the popup as well. I also commented out the part where the view zooms to the selected feature...otherwise, the popup would always appear over top of the feature, effectively hiding it.

Vakhtang_Zubiashvili · ‎03-03-2024

Thank you very much, this is exactly what i wanted 3>