FeatureLayer with hover returns extra feature in popup

GWReid — Wed, 10 Feb 2021 15:24:41 GMT

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>

Re: FeatureLayer with hover returns extra feature in popup

UndralBatsukh — Sat, 13 Feb 2021 00:26:40 GMT

Hi there,

Yes it seems to be picking up a graphic added to view.graphics. View handles the popup for the graphics added to the view. Please add the graphic to GraphicsLayer instead. This will ensure that the second graphic is not displayed in the the popup.

Hope this helps,

-Undral

topic FeatureLayer with hover returns extra feature in popup in ArcGIS JavaScript Maps SDK Questions

FeatureLayer with hover returns extra feature in popup

Re: FeatureLayer with hover returns extra feature in popup