topic Re: Stop flashing of graphic on mouse pointer hovering in ArcGIS JavaScript Maps SDK Questions

Stop flashing of graphic on mouse pointer hovering

victhomas — Mon, 12 Jul 2021 19:10:53 GMT

Hello all,

Looking for ways to stop the flashing of color while inside of a feature when hover over it. Mouse pointer over the feature, it changes color, but then if I move the mouse pointer/cursor while still inside of the feature it flashes. It looks like its restarting the change of the graphic color over and over again. Is there to just persist the color when hovering over the feature without it flashing? Thanks.

Below is the sample code.

<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.20/esri/themes/light/main.css" /> <script src="https://js.arcgis.com/4.20/"></script> <script> require(["esri/Map", "esri/views/MapView", "esri/layers/FeatureLayer"], (Map, MapView, FeatureLayer) => { const markerSym = { type: "simple", symbol:{ type: "simple-marker", style: "circle", color: [108, 199, 143], size: 11, outline: { color: "blue", width: 1 } } }; const brewLayer = new FeatureLayer({ url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/BreweriesCA/FeatureServer/0", renderer: markerSym, visible: true }) let map = new Map({ basemap: "topo-vector", layers: brewLayer }); let view = new MapView({ container: "viewDiv", map: map, zoom: 8, center: [-116.1118, 33.17233] }); view.when(() => { view.on("pointer-move", evt => { view.graphics.removeAll(); view.hitTest(evt).then(response => { if (response.results.length > 0 ) { let graphic = response.results[0].graphic; graphic.symbol = { type: "simple-marker", style: "circle", color: [25, 97, 73], size: 11, outline: { color: "white", width: 1 } } view.graphics.add(graphic); } }) }); }) }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>

Re: Stop flashing of graphic on mouse pointer hovering

RobertScheitlin__GISP — Mon, 12 Jul 2021 19:42:44 GMT

@victhomas Here is the fix for that.

<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.20/esri/themes/light/main.css" /> <script src="https://js.arcgis.com/4.20/"></script> <script> require(["esri/Map", "esri/views/MapView", "esri/layers/FeatureLayer"], (Map, MapView, FeatureLayer) => { const markerSym = { type: "simple", symbol:{ type: "simple-marker", style: "circle", color: [108, 199, 143], size: 11, outline: { color: "blue", width: 1 } } }; const brewLayer = new FeatureLayer({ url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/BreweriesCA/FeatureServer/0", renderer: markerSym, visible: true }) let map = new Map({ basemap: "topo-vector", layers: brewLayer }); let view = new MapView({ container: "viewDiv", map: map, zoom: 8, center: [-116.1118, 33.17233] }); view.when(() => { let lastFID = null; view.on("pointer-move", evt => { view.hitTest(evt).then(response => { if (response.results.length > 0 ) { if(lastFID === response.results[0].graphic.attributes["FID"]){ return; } view.graphics.removeAll(); let graphic = response.results[0].graphic; graphic.symbol = { type: "simple-marker", style: "circle", color: [25, 97, 73], size: 11, outline: { color: "white", width: 1 } } lastFID = graphic.attributes["FID"]; view.graphics.add(graphic); } }) }); }) }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>

Re: Stop flashing of graphic on mouse pointer hovering

victhomas — Sun, 18 Jul 2021 02:19:05 GMT

Thank you Robert