Polygon draw mode last vertex click catch before draw.create is fired
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:
- draw.render, there I am able to calculate polygon area.
- 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.
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
@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