setMapCursor with custom image

[PaulHuppé]

Hi,

I want to change the cursor to use a custom image. When I use something like:

mymap.setMapCursor("crosshair");

I see a crosshair icon on the map.  If I try the following:

mymap.setMapCursor("url(/myproject/images/mycursor.png),auto");

it does nor change the cursor. Why? I tried a PNG, a GIF and a CUR file with no success.

As anyone used a custom image for a cursor?

Thanks,
Paul

[PaulHuppé]

Hi,
No replies yet. Has anyone tried this?
Paul

[bbieb]

Hi Paul,
I have not used the setMapCursor method but have had the success with setting cursor on the map container node.
brian

      //set cursor so users know what is going on when the use the mouse wheel!
      var mapNode = dom.byId("map_container");
      on(map, 'zoom', function(e){
        if(e.zoomFactor >= 1) { //scroll in
            domStyle.set(mapNode,{"cursor": "url(js/images/zoom-in.gif), url(js/images/zoom-in.ico), auto"});
        } else if (e.zoomFactor < 1) { //scroll out
            domStyle.set(mapNode,{"cursor": "url(js/images/zoom-out.gif), url(js/images/zoom-out.ico), auto"});
        }
      });      
      on(map, 'zoom-end', function(e){
          domStyle.set(mapNode,{"cursor": "default"});
      });

[PaulHuppé]

Hi Brian,

I just tried with:

      var mapNode = dom.byId(mapid + "_holder_container");
      domStyle.set(mapNode,{"cursor": "crosshair"});

which changes the cursor to a small crosshair as expected, and with

      var mapNode = dom.byId(mapid + "_holder_container");
      domStyle.set(mapNode,{"cursor": "url(http://geogratis.gc.ca/geogratis/images/crosshairs.gif), auto"});

which should have used the image, but it does not.

[bbieb · Accepted solution]

Hi Paul,
I did try with your url and it didn't work.  Your gif is 5000x5000 pixels, I think that is the problem.  I do see it coming back to the browser but not displaying.  I created a 25x25 pixel red gif and tried again. It worked as expected.  I did Google cursor size and Firefox ignores anything over 128x128 pixels.
brian

[PaulHuppé]

Hi Brian,

Ok, maybe it is the size. I did not know there was a size limit. My user wanted crosshairs that would cover the whole map from top to bottom and side to side.  That is why I had created this large image.  I wonder if there is a way to achieve this?

Paul

[PaulHuppé]

Hi,

I just tried making a new cursor that is 128x128 pixels and that works.

Paul

[bbieb]

Here is a jQuery example to have full screen crosshairs.  I could see this being of value.  Google  "crosshair full screen javascript" for other examples.
brian

http://jsfiddle.net/j08691/9DRxT/1/

[KenBuja]

Paul,

Don't forget to click the check mark in the post that best answered your question. This will help others searching on this topic.