I am moving from leaflet+cloudmade to mapbox and have been doing minor rewrites to my code where necessary. I am refreshing my map and in my previous installment it was easiest to add each marker in to it's own layer and then on refresh to remove all layers and redraw the markers.

Here is my current code:

function setLeafletMarker(lat, lng, iconType, popupHTML) {

    popupHTML = typeof popupHTML !== 'undefined' ? popupHTML : "";
    var LamMarker = new L.Marker([lat, lng], { icon: iconType }); //.on('click', markerClick); ;

    markers.push(LamMarker);

    LamMarker.bindPopup(popupHTML);
    map.addLayer(LamMarker);
}

I suspect this has something to do with the problem, which is that when I put my mouse cursor over a marker, it stays as a hand (draggable) instead of changing to be a pointy finger, meaning the marker is clickable. Clicking works fine, but it's not very intuitive. How do I change the hand to pointy finger?

I am moving from leaflet+cloudmade to mapbox and have been doing minor rewrites to my code where necessary. I am refreshing my map and in my previous installment it was easiest to add each marker in to it's own layer and then on refresh to remove all layers and redraw the markers.

Here is my current code:

function setLeafletMarker(lat, lng, iconType, popupHTML) {

    popupHTML = typeof popupHTML !== 'undefined' ? popupHTML : "";
    var LamMarker = new L.Marker([lat, lng], { icon: iconType }); //.on('click', markerClick); ;

    markers.push(LamMarker);

    LamMarker.bindPopup(popupHTML);
    map.addLayer(LamMarker);
}

I suspect this has something to do with the problem, which is that when I put my mouse cursor over a marker, it stays as a hand (draggable) instead of changing to be a pointy finger, meaning the marker is clickable. Clicking works fine, but it's not very intuitive. How do I change the hand to pointy finger?

• javascript
• leaflet
• mapbox

5 Answers 5

Ran into the same problem also. Did a quick check of CSS on the mapbox site, and they seem to fix it using a css rule in their sitewide css file (not map specific). I was able to fix the problem using the same approach, by adding this to my sitewide css.

.leaflet-overlay-pane path,
.leaflet-marker-icon {
  cursor: pointer;
}

I have pared the default leaflet.css with the default mapbox.css and leaflet includes this

.leaflet-clickable {
    cursor: pointer;
    }

while mapbox does not.

One way is you can just add the behavior to the mouseover and mouseout events:

LamMarker.on("mouseover", function(e) {
    document.getElementById('map').style.cursor = "pointer";
}).on("mouseout", function(e) {
    document.getElementById('map').style.cursor = "grab";
});

In the current mapbox api (2022) this works. I'm not sure if there is a smarter way to do this as the docs are terrible in this department.

map.on('mouseover', 'source-id', e => {
  map.getCanvas().style.cursor = 'pointer'
})
map.on('mouseleave', 'source-id', e => {
  map.getCanvas().style.cursor = ''
})

This assumes you are adding a source layer to your map as in this example

If your not using source layers, you can target your marker icon via css

.marker svg {
  cursor: pointer;
}

I had this issue using Svelte. Similar to other answers, I fixed it overwriting the marker's CSS. In the <style> tag I added the following:

:global(.mapboxgl-marker) {
  cursor: pointer;
}