ArcGIS JS Map Cursor

[Wade]

How to change my cursor style in ArcGIS API for JS 4.25 with setMapCursor() which is applied in 3.X?

[Egge-JanPollé1]

Version 4.x is a substantial overhaul of the ArcGIS Maps SDK for JavaScript (formerly - until December 2022 - known as the ArcGIS API for JavaScript) and its mapping components.

One major change is the introduction of views (MapViews for 2D and SceneViews for 3D) to separate the map and the way it is displayed:

At 4.0, aMapcan be displayed in 2D or 3D. Because of this, the drawing logic was revised. The Map and Layers no longer handle the drawing logic, instead it is now handled byViews.

(见:Migrating from 3.x to 4.25 | ArcGIS Maps SDK for JavaScript 4.25 > Views)

So, your cursor is no longer linked to the map but to the view.

An example of changing the cursor when a certain condition is met would be something like this:

if (myCondition) { view.cursor = "crosshair"; } else { view.cursor = "auto"; }

HTH,

Egge-Jan

[JoelBennett]

Although the bulk of that is correct, there is no documented "cursor" property for the objects that inheritView, and trying to use it makes no difference for me. I've always had to use view.container.style.cursor, e.g.:

view.container.style.cursor = "progress";

[Egge-JanPollé1]

Yes, you are right: I couldn’t find anything about this cursor-and-view in the docs either. But I can assure you that the above code snippet works for me, and it already does do so for a longtime: if myCondition is met, I get the crosshairs cursor and in all other circumstances the default cursor is showing.

How come? I don’t know. It just works for me, really. Is there someone at theArcGIS Maps SDK for JavaScript teamwho can explain?

[JoelBennett]

Hmm...I'm writing directly in JavaScript with AMD; are you using a different approach?

[Egge-JanPollé1 · Accepted solution]

Hmmm... I am using Notepad++ as my favorite text editor. Can you please have a look at the code sample below? In this working example I do add a custom toggle button to the view.ui and when I click this button the cursor changes. I have tested this on my Windows machine in three major browsers (Chrome/Firefox/Edge). It might not work in IE 11, but I take that for granted...

Can you please tell me whether this example works for you?

Cheers,

Egge-Jan

< !负责人html DOCTYPE html > < > < > <元charset = " utf - 8">  
         

[JoelBennett]

Thanks for going through the trouble of creating and posting that. It turns out it works just fine for me, so I went back to the example I tried before my first post, and found it working, so I was a bit dumbfounded. But then I realized I used a different cursor on this try (progress) than previously (wait). So then I tried it with the "wait" cursor, and it doesn't work in my example or yours.

So in your example, if you change it to:

view.cursor = "wait";

it doesn't work, but if you change it to:

view.container.style.cursor = "wait";

it does work. It makes me wonder how many cursors behave like this? I don't really have the bandwidth to figure it out though, so I'll probably just stick with the latter approach...

[Egge-JanPollé1]

Yeah, that's what we started with: this 'cursor' property of the view is an undocumented feature. (I do not remember how I found out about it... Most probably I copied it from an example by someone else a few years ago...)

But happy to see that my answer is (at least partly) true (for some cursors).

[JoelBennett]

Actually, it wasn't terribly difficult to find out which ones aren't supported. The followingCSS cursorsdon't work with view.cursor, but do with view.container.style.cursor:

• none
• wait
• cell
• text
• vertical-text
• alias
• no-drop
• not-allowed
• all-scroll
• col-resize
• row-resize
• zoom-in
• zoom-out
• url-based (custom) cursors, e.g. "url(https://myServer/myCursors/cursor1.cur),auto"

Most of those nobody would probably ever use, but four of those (one being the url-based) are found in my applications.