Chris,
Here is a smooth mouse over example. The big takeaway is to check if you are still over the same graphic in the pointer-move event and if you are then do nothing.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
<title>PopupTemplate - use functions to set content - 4.15</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/themes/light/main.css" />
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script src="https://js.arcgis.com/4.15/"></script>
<script>
var populationChange;
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/Layer",
"esri/widgets/Feature"
], function (Map, MapView, Layer, Feature) {
var map = new Map({
basemap: "dark-gray"
});
var view = new MapView({
container: "viewDiv",
map: map,
zoom: 7,
center: [-87, 34]
});
Layer.fromPortalItem({
portalItem: {
id: "e8f85b4982a24210b9c8aa20ba4e1bf7"
}
}).then(function (layer) {
layer.outFields = ["*"];
map.add(layer);
view.when().then((_) => {
const graphic = {
geometry: view.center,
popupTemplate: {
content: "Mouse over features to show details..."
}
};
const feature = new Feature({
graphic,
view
});
view.ui.add(feature, "top-right");
view.whenLayerView(layer).then((layerView) => {
let highlight, lResult = {attributes:{NAME:null}};
view.on("pointer-move", (event) => {
view.hitTest(event).then(({
results
}) => {
const result = results[0];
if (result) {
if(result.graphic.layer.id === layer.id){
if(lResult.attributes.NAME !== result.graphic.attributes.NAME){
highlight && highlight.remove();
highlight = layerView.highlight(result.graphic);
feature.graphic = result.graphic;
lResult = result.graphic;
}
}
}else{
highlight && highlight.remove();
feature.graphic = graphic
}
});
});
});
});
var popupTemplate = {
title: "Population in {NAME}",
outFields: ["*"],
content: populationChange,
fieldInfos: [{
fieldName: "POP2010",
format: {
digitSeparator: true,
places: 0
}
},
{
fieldName: "POP10_SQMI",
format: {
digitSeparator: true,
places: 2
}
},
{
fieldName: "POP2013",
format: {
digitSeparator: true,
places: 0
}
},
{
fieldName: "POP13_SQMI",
format: {
digitSeparator: true,
places: 2
}
}
]
};
layer.popupTemplate = popupTemplate;
function populationChange(feature) {
var div = document.createElement("div");
var upArrow =
'<svg width="16" height="16" ><polygon points="14.14 7.07 7.07 0 0 7.07 4.07 7.07 4.07 16 10.07 16 10.07 7.07 14.14 7.07" style="fill:green"/></svg>';
var downArrow =
'<svg width="16" height="16"><polygon points="0 8.93 7.07 16 14.14 8.93 10.07 8.93 10.07 0 4.07 0 4.07 8.93 0 8.93" style="fill:red"/></svg>';
var diff =
feature.graphic.attributes.POP2013 - feature.graphic.attributes.POP2010;
var pctChange = (diff * 100) / feature.graphic.attributes.POP2010;
var arrow = diff > 0 ? upArrow : downArrow;
div.innerHTML =
"As of 2010, the total population in this area was <b>" +
feature.graphic.attributes.POP2010 +
"</b> and the density was <b>" +
feature.graphic.attributes.POP10_SQMI +
"</b> sq mi. As of 2013, the total population was <b>" +
feature.graphic.attributes.POP2013 +
"</b> and the density was <b>" +
feature.graphic.attributes.POP13_SQMI +
"</b> sq mi. <br/> <br/>" +
"Percent change is " +
arrow +
"<span style='color: " +
(pctChange < 0 ? "red" : "green") +
";'>" +
pctChange.toFixed(3) +
"%</span>";
return div;
}
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>