Mapbox- reset a popup offset dynamcally

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.'

Answers


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.


Need Your Help

What is the difference between cross platform app development and hybrid app development?

android ios cross-platform hybrid-mobile-app

I would like to know what exactly is the difference between cross platform app development and hybrid app development. I found different opinions while googling, majority says that the cross platfo...

android game image

android

Can you help me making a touchable image? And when you place it to its correct place, a pop up message will come and displays text. My game is a body parts game that you will be placing the body pa...