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.

Dominick · Accepted Answer · 2019-04-08 17:52:30Z

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.

answered Apr 8, 2019 at 17:52

Dominick

4961 gold badge7 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Robert Ruby II Over a year ago

Where di you come up with the nc.newX and nc.newY values?

Dominick Over a year ago

@RobertRubyII This was a project from 2 years ago for a company I no longer work for. Unfortunately I don't remember exactly where those values came from. I believe there was a separate method to calculate what the new point should be, similar to the getNewLatLng method mentioned in the original post. Sorry I couldn't be more helpful.

Collectives™ on Stack Overflow

Resizing Markers in Leaflet but Keep Same Center Point in Angular

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related