How to change cursor on the map when using SketchViewModel

616
3
08-22-2019 01:35 PM
BradBarnell
New Contributor III

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

Tags (2)
3 Replies
BenElan
Esri Contributor

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>‍‍‍‍‍‍
0 Kudos
BradBarnell
New Contributor III

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

0 Kudos
IvanGatchik
New Contributor

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[ias Element;
                    if ((mapContainer.childNodes[ias Element).classList.contains("esri-view-root")) {
                        for (let j = 0; j < rootElement.childNodes.length; j++{
                            const viewSurface = rootElement.childNodes[jas 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[ias Element;
                    if ((mapContainer.childNodes[ias Element).classList.contains("esri-view-root")) {
                        for (let j = 0; j < rootElement.childNodes.length; j++{
                            const viewSurface = rootElement.childNodes[jas Element;
                            if (viewSurface.classList.contains("esri-view-surface")) {
                                (viewSurface as HTMLElement).style.cursor = "crosshair";
                            }
                        }
                    }
                }
            }
 
0 Kudos