[GIS] Leaflet / Mapbox.js: incorrect Popup offset using divIcon with CSS class

Question

I'm having an error which I can't seem to find elsewhere online with Leaflet / mapbox.js regarding the offset of a popup from a marker's custom icon which has been set with L.divIcon and using a CSS class to style:

Here's the invocation of the L.divIcon:

var icon = L.divIcon({
  'iconSize': [30, 40],
  'iconAnchor': [15, 40],
  'className': 'mapview-marker-icon'
})

The CSS class also has the width and height set:

.mapview-marker-icon {
  box-sizing: border-box;
  display: block;
  width: 30px;
  height: 40px;
  padding: 0;
  margin: -40px 0 0 -15px;
  background-color: transparent;
  border-width: 0;
  transform-origin: bottom center;
}

One thing I've found is that if I don't set the iconSize and the iconAnchor in the JS, then the marker's icon is overridden by mapbox.js / Leaflets's CSS styles applied directly to the element (mapbox.js documentation suggests that iconSize and iconAnchor can be set via CSS classes and don't need to be set in JS):

(note: I was also playing with display props to block and inline-block to see if that changed anything. It didn't.)

When I use L.mapbox.marker.icon the popup offset is correct:

var icon = L.mapbox.marker.icon({
    'marker-size': 'large',
    'marker-color': '#000'
})

Is there something I'm missing on the CSS or JS side of things? The popup is applied using L.Marker.bindPopup().

Answer 1

I think you're just forgetting about the popupAnchor option of L.Icon/L.DivIcon.