Change Mouse cursor on hover over feature only?

2993
2
Jump to solution
03-04-2020 10:08 PM
victhomas
New Contributor III

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>
Tags (2)
0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

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

2 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

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
New Contributor III

thank you!

0 Kudos