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

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

                            }

                        }

                    }

                }

            }