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

707
2
Jump to solution
06-03-2020 03:09 AM
ChristianBischof
Esri Contributor

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

0 Kudos
1 Solution

Accepted Solutions
ChristianBischof
Esri Contributor
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

View solution in original post

0 Kudos
2 Replies
ChristianBischof
Esri Contributor
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

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Christian,

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