Creating Polygons at High Zoom Levels

[Ryllau]

Sorry for the spam!

I noticed that when zoomed in at level 25+ in leaflet, things get a little weird with the polygons. The click and drag rectangle does not align with the rect-progress-lines and the polygon markers do not create the correction polygon.

zoom level 25

zoom level 23

zoom level 20

[keul]

Hi @Ryllau, are you able to provide a codesandbox/codepen example of the issue?

[Ryllau]

I am not too sure how to use codesandbox/codepen but I referenced your codesandbox and made modifications to the index.js below (if you copy and paste the code below into your codesandbox you should be able to replicate). When you zoom very far in you can begin to see the issues stated above.

My custom tiles that I use for my Leaflet map are rendered at this zoom level which is why I have been running into this issue.

This could also be an underlying issue with Leaflet polygons at this zoom level -- but I am not sure.

Mac OS Monterey v12.3 on Google Chrome v102.0.5

const map = L.map("map").setView([51.505, -0.09], 6);

L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
  attribution:
    '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
  maxNativeZoom: 19,
  maxZoom: 30,
  minZoom: 5
}).addTo(map);


const areaSelection = new DrawAreaSelection({
  onPolygonReady: (polygon, control) => {
    let geojsonFg = L.geoJSON(polygon.toGeoJSON(), {
      style: {
        opacity: 0.5,
        fillOpacity: 0.2,
        color: "red"
      }
    });
    geojsonFg.addTo(map);
    control.deactivate();
  },
  onButtonActivate: () => {
    document.getElementById("draw-panel-help").textContent =
      "draw!";
  },
  onButtonDeactivate: () => {}
}).setPosition("topright");

map.addControl(areaSelection);

[keul]

@Ryllau I confirm the issue, reproduced.