How to change cursor on the map when using SketchViewModel

[BradBarnell]

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

[BenElan]

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

[BradBarnell]

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

[IvanGatchik]

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

                            }

                        }

                    }

                }

            }