topic Re: How to change cursor on the map when using SketchViewModel in ArcGIS JavaScript Maps SDK Questions

How to change cursor on the map when using SketchViewModel

BradBarnell — Thu, 22 Aug 2019 20:35:33 GMT

Is there any way to change the mouse cursor on the map after activating the SketchViewModel in the latest version of the javascript API? I tried doing it with css with no luck.

viewDiv.style.cursor = "default";

Re: How to change cursor on the map when using SketchViewModel

BenElan — Sun, 12 Dec 2021 00:59:03 GMT

In vanilla JavaScript it would be

document.getElementById("viewDiv").style.cursor = "default";‍

If that doesn't work you could try using jQuery

$('#viewDiv').css( 'cursor', 'default' );‍‍‍‍‍‍‍

jQuery CDN:

<script src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>‍‍‍‍‍‍‍‍‍

Re: How to change cursor on the map when using SketchViewModel

BradBarnell — Fri, 23 Aug 2019 18:42:42 GMT

@Ben Elan - ESRI support says this is not possible without downloading the API javascript and hacking it, so I have given up on doing this.

Re: How to change cursor on the map when using SketchViewModel

IvanGatchik — Wed, 01 Sep 2021 21:21:28 GMT

Here is a bit of a sledgehammer way to force the issue (in typescript, but it should be even simpler in plain javascript):

// set the mapview surface cursor to default

const mapContainer = document.getElementById("map-container");

if (mapContainer) {

for (let i = 0; i < mapContainer.childNodes.length; i++) {

const rootElement = mapContainer.childNodes[i] as Element;

if ((mapContainer.childNodes[i] as Element).classList.contains("esri-view-root")) {

for (let j = 0; j < rootElement.childNodes.length; j++) {

const viewSurface = rootElement.childNodes[j] as Element;

if (viewSurface.classList.contains("esri-view-surface")) {

(viewSurface as HTMLElement).style.cursor = "auto";

}

and to restore your crosshair sketch cursor:

// set the mapview surface cursor to crosshair

const mapContainer = document.getElementById("map-container");

if (mapContainer) {

for (let i = 0; i < mapContainer.childNodes.length; i++) {

const rootElement = mapContainer.childNodes[i] as Element;

if ((mapContainer.childNodes[i] as Element).classList.contains("esri-view-root")) {

for (let j = 0; j < rootElement.childNodes.length; j++) {

const viewSurface = rootElement.childNodes[j] as Element;

if (viewSurface.classList.contains("esri-view-surface")) {

(viewSurface as HTMLElement).style.cursor = "crosshair";

}