mapbox-gl-draw icon indicating copy to clipboard operation
mapbox-gl-draw copied to clipboard

Polygon draw mode last vertex click catch before draw.create is fired

Open crow7m opened this issue 6 years ago • 2 comments

Thank you for support and good project. Just trying to prevent polygon creation in case if his area is bigger than n square meters. Events used:

  1. draw.render, there I am able to calculate polygon area.
  2. map.on(click) listener I can with this layer id "gl-draw-polygon-and-line-vertex-halo-active.hot". So i now when vertex is clicked(suppose to close polygon);

---------Actual behavior ------- After click on last vertex with event.StopPropagation() and event.PreventDefault() polygon is being created and added to map, 'draw.create' being fired with feature data.

---------Expected behavior-------- Prevent polygon creation, and addition to map on last vertex click, if some condition returns false

Thank you for your support.

crow7m avatar Dec 31 '19 15:12 crow7m

Found Working workaround, will appreciate any feedback.

map.on("draw.render", function(e) {
  switch (turf.getType(feature)) {
    // if polygon draw action
    case "Polygon":
      if (
        feature.geometry.coordinates.length > 0 &&
        feature.geometry.coordinates[0].length > 3
      ) {
        var area = ruler.area(feature.geometry.coordinates);
        var label;
        let drawPolyCirclesLayers = {
          layerHalo: "gl-draw-polygon-and-line-vertex-active.hot",
          layerCircle: "gl-draw-polygon-and-line-vertex-halo-active.hot"
        };
        if (area >= 9000000000) {
          label = "Polygon area is too large";
          labelFeatures.push(
            turf.centroid(feature, {
              type: "area",
              label: label
            })
          );
          // Hide circle vertex layers, in order to prevent click and polygon drawing finish
          MapLayersService.hideLayers(map, drawPolyCirclesLayers);
          // Change line and fill color to give user visual feedback
          map.setPaintProperty(
            "gl-draw-polygon-stroke-active.hot",
            "line-color",
            "#000000"
          );
          map.setPaintProperty(
            "gl-draw-polygon-fill.hot",
            "fill-color",
            "#000000"
          );
        } else {
          label = window.numeral(area).format("0,0.0a") + "m²";
          labelFeatures.push(
            turf.centroid(feature, {
              type: "area",
              label: label
            })
          );
          // show vertex layers
          MapLayersService.showLayers(map, drawPolyCirclesLayers);
          // set default valid polygon style
          map.setPaintProperty(
            "gl-draw-polygon-stroke-active.hot",
            "line-color",
            "#D20C0C"
          );
          map.setPaintProperty(
            "gl-draw-polygon-fill.hot",
            "fill-color",
            "#D20C0C"
          );
        }
      }
      break;
  }
});

So the logic is : instead of disable draw or custom mode extend, it is possible to just hide vertex in order to prevent last click( where the actually draw happens). Hope this helps someone else

crow7m avatar Jan 02 '20 08:01 crow7m

@kkaefer , sorry to bother you, however the workaround of hiding circles layers of polygon didn't help, and if i just do click twica at same position polygon is being closed event thoughts the area is to big, so the event is being triggered not by click on circle, could you please let me know how can i prevent it from being closed based on some condition, thank you for support

crow7m avatar Jan 13 '20 10:01 crow7m