CODEWITHSUNDEEP
javascriptleafletmapbox
vampireLady
vampireLady

Reputation: 137

MapBox: Markers not showing clickable cursor on mouseover

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?

Upvotes: 2

Views: 5319

Answers (5)

colmo007
colmo007

Reputation: 38

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

Upvotes: 0

bennybensen
bennybensen

Reputation: 95

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

.marker svg {
  cursor: pointer;
}

Upvotes: 0

Tim
Tim

Reputation: 4661

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

Upvotes: 0

PeterN
PeterN

Reputation: 86

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 compared the default leaflet.css with the default mapbox.css and leaflet includes this 

.leaflet-clickable {
    cursor: pointer;
    }

while mapbox does not.

Upvotes: 7

robg
robg

Reputation: 41

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

Upvotes: 4

Related Questions