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
Solved! Go to Solution.
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
.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
Christian,
When you add your feature layer to the map make sure you specify the outFields that you want returned.