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

131
2
Jump to solution
06-03-2020 03:09 AM
Highlighted
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

Reply
0 Kudos
1 Solution

Accepted Solutions
Highlighted
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

Reply
0 Kudos
2 Replies
Highlighted
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

Reply
0 Kudos
Highlighted
MVP Esteemed Contributor

Christian,

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