Resizing Markers in Leaflet but Keep Same Center Point in Angular

Question

I have taken over an Angular project and having some trouble with the Leaflet JS library. Specifically, there are icons you can click from a toolbar and then click to place them on a map. There is a sidebar menu where you can click the icon size you want - Small (20x20), Medium (41x41), or Large (60x60). The issue is that when changing between sizes, the center point of the placed icon(s) is not maintained. Here is the code that is executed when the Large button is clicked (the Medium size is default when the page loads):

  $(document).on("click", ".largeicon", function () {
    console.log("Large clicked!");
    drawnItems.eachLayer(function (layer) {
      if (layer instanceof L.Marker) {
        if (layer.dragging) {
          type_marker = layer._icon.classList[1];

          L.Icon.Large = L.Icon.Default.extend({
            options: {
              iconSize: new L.Point(60, 60),
              iconUrl: layer.dragging._marker._icon.currentSrc,
              iconRetinaUrl: layer.dragging._marker._icon.currentSrc,
            }
          });

          var large = new L.Icon.Large();
          //console.log("new L.Icon.Large", large);
          if (map.getBounds().contains(layer.getLatLng())) {
            layer.setIcon(large);
            layer._icon.style[L.DomUtil.TRANSFORM + 'Origin'] = '30px 30px 0px';
          }
        }
      }
    });
    L.Icon.Default.prototype.options.iconSize = [60, 60];
    pinsize = 60;
  });
}

And I have a function that (should) properly calculate the new position of the marker so that the same center point is maintained:

function getNewLatLng(style, originalLat, originalLng, newWidth, newHeight) {
  var originalWidth = style["width"].slice(0, -2);
  var originalHeight = style["height"].slice(0, -2);

  var newLat = originalLat - ((newWidth - originalWidth) / 2);
  var newLng = originalLng - ((newHeight - originalHeight) / 2);

  return {
    newLat: newLat,
    newLng: newLng
  };
}

Using console logging, it appears that this method calculates the new offsets correctly, but whenever I click between the Large and Medium sizes, the marker slowly moves across the map with each switch.

Can anyone provide some help/guidance on how I can set the updated marker position so that the same center point is maintained between size changes?

Thank you in advance.

Answer 1

So, after much trial and error, I finally figured out how to keep the same center point of the markers. I needed to update the code to this:

if (map.getBounds().contains(layer.getLatLng())) {
            layer.setIcon(large);
            layer._icon.style[L.DomUtil.TRANSFORM] = "translate3d(" + nc.newX + "px," + nc.newY + "px,0px) rotateZ(0deg)";
            layer._icon.style[L.DomUtil.TRANSFORM + 'Origin'] = '30px 30px 0px';
          }

Afer adding the [L.DomUtil.TRANSFORM] = "translate3d... line, the centers were properly maintained when changing the mark size from any size to any other size.