Stop flashing of graphic on mouse pointer hovering

251
2
Jump to solution
07-12-2021 12:10 PM
victhomas
New Contributor III

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>
0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

@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>

View solution in original post

2 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

@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>

View solution in original post

victhomas
New Contributor III

Thank you Robert

0 Kudos