Search code examples
reactjsopenlayers

Openlayers draw poylgon remove double click option


I am building a UI using Openlayers 4. The request I have received is to not allow the user to double click to complete the current .Draw interaction. I have manages this on the LineString by using the maxPoints option and only allowing the user to draw straight lines (as per my requirements).

I need to do the same thing with the Polygon but cannot get it to work. I have tried using the finishCondition but this does not help.

Is this something that can be done in Openlayers?

JS Fiddle is throwing massive errors on my machine at the minute, I'll add an example as soon as I can.

EDIT

Here is a basic jsfiddle. You can toggle the return boolean from finishCondition, when set to true the single and double click end the polygon drawing. When set to false the drawing cannot end.

I need to find the codtion that will allow me to return false if the user double clicks and true otherwise.


Solution

  • Ok, after a bit of further investigation I have found a solution, shown in this jsfiddle.

    I have used the on drawstart event to calculate and set the coordinate of the first point in the polygon, in the finishCondition I find the current pixel it is at, then using that to see if it is within 10px of the clicked point, if it is end the polygon if not then keep drawing.

    I am happy if anyone out there can show me a more elegant way to do this, but for now this seems to do the trick.