topic Re: setMapCursor with custom image in ArcGIS JavaScript Maps SDK Questions

setMapCursor with custom image

PaulHuppé — Tue, 25 Feb 2014 11:28:56 GMT

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

Re: setMapCursor with custom image

PaulHuppé — Thu, 27 Feb 2014 14:17:29 GMT

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

Re: setMapCursor with custom image

bbieb — Sat, 11 Dec 2021 10:32:01 GMT

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

Re: setMapCursor with custom image

PaulHuppé — Sat, 11 Dec 2021 10:32:04 GMT

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.

Re: setMapCursor with custom image

bbieb — Fri, 28 Feb 2014 12:35:41 GMT

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

Re: setMapCursor with custom image

PaulHuppé — Fri, 28 Feb 2014 12:48:14 GMT

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

Re: setMapCursor with custom image

PaulHuppé — Fri, 28 Feb 2014 14:30:02 GMT

Hi,

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

Paul

Re: setMapCursor with custom image

bbieb — Fri, 28 Feb 2014 14:42:50 GMT

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/

Re: setMapCursor with custom image

KenBuja — Fri, 28 Feb 2014 17:23:03 GMT

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.