Draw Area Selection - Active

[Ryllau]

Hello! I am running into a few issue with the DrawAreaSelection active function. I hope you can provide some clarity if this is a known bug or potentially an issue with my implementation.

1. The rect drag feature does not create the proper rectangle progress lines. When clicking and dragging, nothing appears on the map. When you release the mouse, a single line is drawn on the map or could be a box with very weird dimensions, either way it does not match the initial click and drag rectangle. However, I am able to click in markers to make a polygon.

2. I want to set the draw-panel-help element to a different message by using document.getElementById('draw-panel-help').textContent but this does not seem to work when using active. This works fine in the onButtonActivate function.

[keul]

Hi @Ryllau

for 1: a codesandbox/codepen example can help to reproduce, with details about browser and OS used. Keep also in mind (it's documented somewhere) that rect drawing is not working on mobile (yet?)

for 2: what you mean with "when using active"?

[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).

I set the 'active' function in the DrawAreaSelection configuration (to begin drawing on start) and by doing so the click-drag rectangle doesn't seem to function properly.

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: () => {},
  active: () => {}
}).setPosition("topright");

map.addControl(areaSelection);

[keul]

Hi @Ryllau, codesandbox is a good tool exactly because you can fork my example above and apply changes yourself, then give me the URL of the fork 😃

I will take a look, unluckily I'm quite busy so it will take some time

[Ryllau]

No worries! I am not sure if this is a quick and easy change but maybe when the active:() => {} function is used reuse/simulate the same logic as if the button was selected.

I think the trouble is when you try to click-drag a rectangle on active because the leaflet map is not locked, so it cannot drag the rectangle.