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>
