Change Mouse cursor on hover over feature only?

victhomas · ‎03-04-2020

Hello everyone! I'd put together some code below to see if I can change the mouse cursor into a hand Only when hover over the feature. It only work when I remove the basemap( comment it out). If not comment out the basemap (line 71) when instantiating the Map object, the hand cursor appear everywhere, even when not hovering over the feature. Any advice on how to get the hand cursor to appear Only when hovering over the point feature? TIA!

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>GeoJSONLayer - 4.14</title>

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>
	
    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.14/esri/themes/light/main.css"
    />
    <script src="https://js.arcgis.com/4.14/"></script>
    <script>
      require([
        "esri/Map",
        "esri/layers/GeoJSONLayer",
        "esri/views/MapView",
		"esri/core/watchUtils"
      ], function(Map, GeoJSONLayer, MapView, watchUtils) {
	  
		const url = "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson";
		
        const template = {
          title: "Earthquake Info",
          content: "Magnitude {mag} {type} hit {place} on {time}",
          fieldInfos: [
            {
              fieldName: "time",
              format: {
                dateFormat: "short-date-short-time"
              }
            }
          ]
        };

        const renderer = {
          type: "simple",
          field: "applicant_id",
          symbol: {
            type: "simple-marker",
            color: "orange",
			size: 10,
            outline: {
              color: "white"
            }
          }
        };

        const geojsonLayer = new GeoJSONLayer({
          url: url,
          copyright: "USGS Earthquakes",
          popupTemplate: template,
          renderer: renderer //optional
        });

        const map = new Map({
          basemap: "gray-vector",
          layers: [geojsonLayer]
        });

        const view = new MapView({
          container: "viewDiv",
          center: [-123.718273, 45.309011],
          zoom: 8,
          map: map
        });
		
		function changeMouseCursor(response) 
		{
			if (response.results.length > 0) {
			  document.getElementById("viewDiv").style.cursor = "pointer";
			} else {
			  document.getElementById("viewDiv").style.cursor = "default";
			}
		}

		function getNewGraphics(response) {
			view.graphics.removeAll();
			if (response.results.length > 0) {
			  var graphic = response.results[0].graphic;
			  graphic.symbol = 
			  {
				type: "simple-marker",
				style: "circle",
				color: [ 17, 114, 212, 0.3 ],
				outline: 
				{ // autocasts as new SimpleLineSymbol()
				  color: "blue",
				  width: 2
				}
			  }
			  view.graphics.add(graphic);
			}
		}
		
		view.when(function () {
			view.whenLayerView(geojsonLayer).then(function (lview) {
			  watchUtils.whenFalseOnce(lview, "updating", function () {
				// Set up a click event handler and retrieve the screen x, y coordinates
				view.on("pointer-move", function (evt) {
					var screenPoint = {
						x: evt.x,
						y: evt.y
					};
					view.hitTest(screenPoint)
					.then(function (response) {
					  changeMouseCursor(response);
					  getNewGraphics(response);
					});
				});
			  });
			});
		});
		
      });
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
  </body>
</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

RobertScheitlin__GISP · ‎03-05-2020

Vic,

Because the basemap has reference layers that will appear in the hittest results as graphics.

Here is the solution. Check if the results graphic layer is of type geojson.

      function changeMouseCursor(response) {
        if (response.results.length > 0 && response.results[0].graphic.layer.type === "geojson") {
          document.getElementById("viewDiv").style.cursor = "pointer";
        } else {
          document.getElementById("viewDiv").style.cursor = "default";
        }
      }‍‍‍‍‍‍‍

View solution in original post

RobertScheitlin__GISP · ‎03-05-2020

Vic,

Because the basemap has reference layers that will appear in the hittest results as graphics.

Here is the solution. Check if the results graphic layer is of type geojson.

      function changeMouseCursor(response) {
        if (response.results.length > 0 && response.results[0].graphic.layer.type === "geojson") {
          document.getElementById("viewDiv").style.cursor = "pointer";
        } else {
          document.getElementById("viewDiv").style.cursor = "default";
        }
      }‍‍‍‍‍‍‍

victhomas · ‎03-05-2020

thank you!