Changing the Cursor

Question

Just wondering if I can change the cursor shown over the whole map object?

I've tried setting the css style ("cursor: pointer;") but to no avail...

Answer 1

This seems to work for me; haven't checked in all browsers, and could probably be made more sophisticated for when cursor over widgets.

<style type="text/css">
/* CSS code to support polylines in Internet Explorer  */
v\:* { behavior:url(#default#VML); }

/* style for the crosshair over map */
#mapDiv div { cursor:crosshair;}

/* corrects cursor in infobox */
.MMInfoBox div { cursor:auto !important;}

</style>

#mapDiv is the id of the <div> where map is constructed.

Answer 2

Cheers Ross - that works in itself, but what I actually need to do is change the cursor dynamically.  So I tried:

document.getElementById('mapDiv').style.cursor='crosshair';

but that has no effect...

Answer 3

See, y'didna say what you really wanted ;)

Examine the CSS that works
   #mapDiv div { cursor:crosshair;}
see that its not just applying the cursor to the mapDiv, its explicitly applying it to the nested divs
How you replicate that in javascript is outside the scope of this group, one approach might be to dynamically switch mini stylesheets.

Answer 4

Ah - got ya.  My CSS knowledge being a bit rubbish again... will investigate further, cheers Ross!

Answer 5

Right, this works!:

  var divs = document.getElementById('mapDiv').getElementsByTagName('div');
  for (var i = 0; i < divs.length; i++) {
    divs[i].style.cursor='crosshair';
  }

The only remaining little issue is teh product of this and my "how to make lines un-clickable" thread... the cursor goes from crosshair to pointy-finger over existing polylines, as they are clickable...

Answer 6

And to sort that...

  var shapes = document.getElementById('mapviewer').getElementsByTagName('shape');
  for (var i = 0; i < shapes.length; i++) {
    shapes[i].style.cursor='crosshair';
  }

The polylines are shapes, not divs.

Think I'm there!

Answer 7

One more teenie thing I'm stuck on... how to change it back!

I tried

divs[i].style.cursor='url(http://s0.cdn.multimap.com/API_RES/1.2.187/i/grab.cur), hand';

which is passable, but the hand is no longer animated as it is originally...

Answer 8

The polylines are shapes, not divs.

Caution : what polys are in the DOM is browser dependent, due to different browser drawing technologies (SVG/VML/Canvas)
I think you'll have to work harder for a cross-browser solution.

Have you tried cursor:auto for "restoration"

Answer 9

Ah yes, I found this out to my (negligible) peril when I tried it in firefox.  Have had to add the following to deal with that:

  var paths = document.getElementById('mapviewer').getElementsByTagName('path');
  for (var i = 0; i < paths.length; i++) {
    paths[i].style.cursor='crosshair';
  }


"Auto" for restoration gives me a pointer, I'm afraid.

I've also noticed that the
cursor='url(http://s0.cdn.multimap.com/API_RES/1.2.187/i/grab.cur), hand';
does not work in Firefox - the cursor remains as a crosshair.

Edit - last point is because it's "-moz-grab" in firefox...


    var divs = document.getElementById('mapviewer').getElementsByTagName('div');
    for (var i = 0; i < divs.length; i++) {
      divs[i].style.cursor='url(http://s0.cdn.multimap.com/API_RES/1.2.187/i/grab.cur), -moz-grab';
    }