Change Mouse cursor on hover over feature only?

victhomas — Sun, 12 Dec 2021 03:27:09 GMT

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

Re: Change Mouse cursor on hover over feature only?

RobertScheitlin__GISP — Sun, 12 Dec 2021 03:27:12 GMT

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";
        }
      }‍‍‍‍‍‍‍

Re: Change Mouse cursor on hover over feature only?

victhomas — Thu, 05 Mar 2020 16:53:42 GMT

thank you!

topic Re: Change Mouse cursor on hover over feature only? in ArcGIS JavaScript Maps SDK Questions

Change Mouse cursor on hover over feature only?

Re: Change Mouse cursor on hover over feature only?

Re: Change Mouse cursor on hover over feature only?