1

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:

Incorrect Popup positioning, set to marker icon's anchor point

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):

I was also playing with <code>display</code> props to <code>block</code> and <code>inline-block</code> to see if that changed anything. It didn't.

(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'
})

Ideal Popup position, except want to use with custom <code>L.divIcon</code>

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

Improve this question

1 Answer 1

Reset to default
1

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

Improve this answer
2
  • Ah ha, there you go. I thought perhaps it wasn't an option since the documentation on mapbox.js didn't mention that property explicitly (they specify that icon takes icon options and divIcon takes divIcon options). Should have checked Leaflet documentation...
    – Matt Scheurich
    Commented Jun 16, 2016 at 12:32
  • 1
    Yeah, but the L.DivIcon options inherit from the L.Icon options. This is reflected in the Leaflet 1.0.0 docs, but might not be reflected in other docs.
    – IvanSanchez
    Commented Jun 16, 2016 at 12:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.