Hello,
First, let me say that I am NOT a pro developer, but wanted to see if this problem might have a solution. I'm developing a javascript web map and am including a hover-pop up function. However, I'm experiencing a "blocking" effect by the hovering pop up. This "blocking" effect of the pop up is preventing the pop up from appearing for underlying features.
I added this screenshot to help convey what I'm trying to explain with "blocking"
Rice_GIS_0-1663251430828.png The pop seems to block the pop up from opening the new pop up for the other feature behind it.
Code for the hover function is attached. Is there a way to add a code for the map to "listen" for features that might be underneath the pop up? Thank you in advance!
//Setup Hover Pop up
function changeCursor(response) {
if (response.results.length > 0) {
document.getElementById("viewDiv").style.cursor = "pointer";
} else {
document.getElementById("viewDiv").style.cursor = "default";
}
}
function getGraphics(response) {
view.graphics.removeAll();
if (response.results.length > 0) {
var graphic = response.results[0].graphic;
graphic.symbol = {
type: "simple-fill",
style: "none",
outline: { // autocasts as new SimpleLineSymbol()
color: "orange",
width: 1
}
}
view.graphics.add(graphic);
}
}
function showPopup(response) {
view.popup.close();
if (response.results.length > 0) {
view.popup.open({
title:response.results[0].graphic.attributes.NAME + ' County',
content: 'Number of Sensitive Species: ' + response.results[0].graphic.attributes.FREQUENCY,
location: response.results[0].graphic.geometry.centroid
});
}
}
view.when(function () {
view.whenLayerView(layer).then(function (lview) {
watchUtils.whenFalseOnce(lview, "updating", function () {
// Set up a click event handler and retrieve the screen x, y coordinates
view.on("pointer-move", function (evt) {
var screenPoint = {
x: evt.x,
y: evt.y
};
// the hitTest() checks to see if any graphics in the view
// intersect the given screen x, y coordinates
view.hitTest(screenPoint)
.then(function (response) {
changeCursor(response);
getGraphics(response);
showPopup(response);
});
});
});
});
});
const legend = new Legend({ view: view });
// Expand widget to expand and contract the legend widget
const legendExpand = new Expand({
expandTooltip: "Show Legend",
expanded: false,
view: view,
content: legend,
});