I change the symbol on a point FeatureLayer (that has a popupTemplate) on hover (using pointer-move, hitTest and view.graphics). For some reason, I get 2 features found in the popup on click. Seems like it is picking up the hover graphic I added to view.graphics. Any suggestions as to why? Using 4.18. Thanks.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="description" content="CDO v3 Demo">
<title>CDO v3 Demo</title>
<style>
html, body, #mapContainer {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#info {
top: 15px;
left: 75px;
position: absolute;
z-index: 99;
border-radius: 6px;
border: 2px solid gray;
color: gray;
background: white;
padding: 10px;
opacity: 0.65;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/css/main.css">
<link rel="stylesheet" href="https://js.arcgis.com/4.18/dijit/themes/claro/claro.css">
<script src="https://js.arcgis.com/4.18/"></script>
<script>
require([
"esri/Graphic",
"esri/geometry/Point",
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"dojo/dom",
"dojo/domReady!"
], function (
Graphic,
Point,
Map,
MapView,
FeatureLayer,
dom
) {
var map = new Map({
basemap: "topo"
});
var view = new MapView({
container: "mapContainer",
map: map,
center: [-84, 35],
zoom: 7,
background: {
color: '#EFEFEF'
},
constraints: {
rotationEnabled: false
}
});
// pseudo data
const data = [
{"id": "CLT", "name": "CHARLOTTE", "latitude": 35.336944, "longitude": -80.885},
{"id": "ATL", "name": "ATLANTA", "latitude": 33.36333, "longitude": -84.56583},
{"id": "NSH", "name": "NASHVILLE", "latitude": 35.98, "longitude": -86.661944},
{"id": "GRE", "name": "GREER", "latitude": 34.88306, "longitude": -82.22028},
{"id": "KNX", "name": "KNOXVILLE", "latitude": 36.16833, "longitude": -83.40194}
]
var features = [];
data.forEach(function(value, i) {
var feature = {
geometry: {
type: "point",
x: value.longitude,
y: value.latitude
},
attributes: {
ObjectID: i,
ID: value.id,
Name: value.name,
Latitude: value.latitude,
Longitude: value.longitude
}
};
features.push(feature);
});
const pointRenderer = {
type: "simple",
symbol: {
type: "picture-marker",
url: "images/marker_default.png",
contentType: "image/png",
width: "25px",
height: "36px"
}
};
var template = {
title: "{Name} ({ID})",
content: "<b>Latitide:</b> {Latitude}<br/><b>Longitude:</b> {Longitude}"
};
var featurelayer = new FeatureLayer({
source: features,
renderer: pointRenderer,
objectIDField: "ObjectID",
geometryType: "point",
fields: [{
name: "ObjectID",
alias: "ObjectID",
type: "oid"
},
{
name: "ID",
alias: "ID",
type: "string"
},
{
name: "Name",
alias: "Name",
type: "string"
},
{
name: "Latitude",
alias: "Latitude",
type: "double"
},
{
name: "Longitude",
alias: "Longitude",
type: "double"
}],
outFields: ["*"],
popupTemplate: template
});
map.add(featurelayer);
function changeCursor(response) {
if (response.results.length > 0) {
document.getElementById("mapContainer").style.cursor = "pointer";
} else {
document.getElementById("mapContainer").style.cursor = "default";
}
}
function hoverGraphic(response) {
view.graphics.removeAll();
if (response.results.length > 0) {
let graphic = response.results[0].graphic;
graphic.symbol = {
type: "picture-marker",
url: "images/marker_hover.png",
contentType: "image/png",
width: "25px",
height: "36px"
}
view.graphics.add(graphic);
}
}
view.on("pointer-move", function (evt) {
var screenPoint = {
x: evt.x,
y: evt.y
};
view.hitTest(screenPoint).then(function (response) {
changeCursor(response);
hoverGraphic(response);
});
});
});
</script>
</head>
<body>
<div id="mapContainer"></div>
</body>
</html>
