nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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

Find more posts tagged with

Accepted answers

bbieb

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

crosshairs.gif

All comments

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.

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/

PaulHuppé

Hi,

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

Paul

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

bbieb

crosshairs.gif

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

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,
No replies yet. Has anyone tried this?
Paul

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.