Fetch feature data on pointer-move event to label on hover?

ChristianBischof — Wed, 03 Jun 2020 10:09:57 GMT

Hey I'm struggling with fetching feature data from a feature layer on pointer-move event. I'd like to fetch the feature data over which the mouse pointer is currently hovering.

I have a country and a feature layer which represents its states. The goal is to give the state over which the mouse pointer is hovering a striking fill colour eg. red and display its name on some kind of label/tooltip.

I'm grateful for any suggestions and code snippets.

Thanks in advance

Re: Fetch feature data on pointer-move event to label on hover?

ChristianBischof — Sun, 12 Dec 2021 06:28:32 GMT

view
          .when()
          .then(function () {
            return flStreckenausbau.when();
          })
          .then(function (layer) {
            return view.whenLayerView(layer);
          })
          .then(function (layerView) {
            view.on("pointer-move", handlerClick);

            function handlerClick(event) {
              view.popup
                .fetchFeatures({ x: event.x, y: event.y })
                .then(function (response) {
                  // Access the response from fetchFeatures
                  response.allGraphicsPromise.then(function (graphics) {
                    controlTooltip(graphics[0], event);
                  });
                });
            }
            var currentName;
            function controlTooltip(graphic, e) {
              var tooltip = document.getElementById("nametooltip");
              if (graphic !== undefined) {
                var name = graphic.attributes.Namen;
                //prevent tooltip from "wiggling" around by only changing the x and y values whenever a new feature is hovered
                if (currentName !== name) {
                  tooltip.style.top = "" + e.y + "px";
                  tooltip.style.left = "" + e.x + "px";
                }
                tooltip.style.display = "inline-block";
                tooltip.style.visibility = "visible";
                tooltip.style.position = "absolute";
                tooltip.style.backgroundColor = "#fff";
                tooltip.style.padding = "10px";
                tooltip.style.borderRadius = "5px";
                tooltip.style.fontFamily = "sans-serif";
                tooltip.style.fontWeight = "bold";
                tooltip.style.boxShadow = "2px 2px 1px #88888888";
                tooltip.innerHTML = name;
                currentName = name;
              } else if (graphic == undefined) {
                tooltip.style.display = "none";
                tooltip.style.visibility = "hidden";
              }
            }
          });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

 <body>
    <div id="viewDiv"></div>
    <div id="statetooltip">
      <div id="name"></div>
    </div>
  </body>‍‍‍‍‍‍‍‍‍‍‍‍‍‍

This is what I came up with.

For some reason I had to use the view.popup.fetchFeatures method because the view.hitTest method didn't get me all the attributes (and I knew there had to be more than two). If anybody can tell me why this is/was happening or give a suggestion on how to improve my code feel free to contribute

Re: Fetch feature data on pointer-move event to label on hover?

RobertScheitlin__GISP — Fri, 05 Jun 2020 13:11:26 GMT

Christian,

When you add your feature layer to the map make sure you specify the outFields that you want returned.

topic Re: Fetch feature data on pointer-move event to label on hover? in ArcGIS JavaScript Maps SDK Questions

Fetch feature data on pointer-move event to label on hover?

Re: Fetch feature data on pointer-move event to label on hover?

Re: Fetch feature data on pointer-move event to label on hover?