Mapbox- reset a popup offset dynamcally

Question

I have a Mapbox feature layer (with a geoJSON as source) with popups for each marker (with a divIcon). We are resizing the marker icon on different zoom levels (using css). How can I reset the offset of the popup on different zoom levels?

Here is the initial setup of the marker and popup (this all works):

var curOffset = [0,1];

Markers.on('layeradd', function(la) {
  var Icon = la.layer,
  feature = Icon.feature;
  var popupContent = "<some html>"

var popupOptions = {        
    autoPan:true,
    closeButton: false,
    minWidth: 220,
    maxWidth: 220,
    zoomAnimation:true,
    offset: curOffset
  };

 Icon.setIcon(L.divIcon(Iconfeature.properties.icon));

 Markers.bindPopup(popupContent, popupOptions);
});

I tried to reset the offset on a zoom event like so, but it doesn't work:

map.on('zoomend', function(e) {
if (layerOn == true) {
  size = map.getZoom();
  switch (size){
    case 14: console.log("14"); curOffset = [0,5]; break;
     ...
  }
 } 
});

Do I need to close and then open the popup perhaps? I tried something along those lines but I got an error.

I received this suggestion from the a Leaflet Github contributor, but I haven't been able to get this to work either/

'Update the popup.options.offset, then call the private method popup._updatePosition.'

JasonBK JasonBK · Accepted Answer · 2015-12-15T18:44:12

The GitHub Leaflet contributor also suggested looking into just changing the css for the popup on an event..once my co-worker and I found the right rule to modify, it worked:

map.on('zoomend', function(e) {
    switch (size){  // zoom level

    case 14:  $('.leaflet-popup.leaflet-zoom-animated').css('bottom', '-5px'); $('.leaflet-popup .leaflet-zoom-animated').css('left', '-28px'); break;
     ...

I also had to add an additional check in case the layer was turned off during the zoom, with similar code.

Mapbox- reset a popup offset dynamcally

1 Answers