In openlayers there are 2 paradigms for drawing features one is to create a "draw interaction" that lets the user draw a feature and the other is to create the geometry and feature yourself--then add it to the layer.

I would like to programmatically start a polygon "interaction" drawing for the user by placing the first point. After which the user will place the remaining points. It therefore must be an "interaction".

This means I must simulate a user click or draw event that the openlayers api accepts as valid.

I've tried..


/*draw being ol.interaction.Draw*/
  • Did you check this? gis.stackexchange.com/questions/160545/… Sep 25, 2017 at 13:38
  • 1
    That question is about programmatic drawing. Not placing points as part of a user draw "interaction". They are very different. I'll try to update the question for clarity.
    – N-ate
    Sep 25, 2017 at 16:32

3 Answers 3


In non minified (ol-debug) version you can use function startDrawing_ (doc is here) which accepts event as a parametr. It uses only coordinates from that event, so it could be replaced by a simple object. Problem is I dont know how is this function named in minified version and also that name could change in time. Also it is not a very clean approach...

var draw = new ol.interaction.Draw({features:new ol.Collection([]), type:"Polygon"});

You can use the ol.interaction.Draw.handleEvent method for that. Its documentation says:

... may actually draw or finish the drawing.

See: ol.interaction.Draw API doc.

  • That fires when there is a user "Draw" event in response to a user's input. It does not allow one to programmatically draw the first point in a user draw "interaction".
    – N-ate
    Sep 25, 2017 at 16:31

You can use this.mapRef is this.$refs.$map if you are working in vue-layers. For pure javascript use "new Draw".

const Draw = this.mapRef.getInteractionById('drawByClick')
Draw.addToDrawing_({ coordinate: [x,y] })

or to start drawing

Draw.startDrawing_({ coordinate: [x,y] })

my specific code that work in vue: pls dont be like me and dont use try catch. just check if drawing has started

try {
        this.mapRef.getInteractionById('drawByClick').addToDrawing_({ coordinate: this.mapRef.$view.getCenter() })
} catch {
        this.mapRef.getInteractionById('drawByClick').startDrawing_({ coordinate: this.mapRef.$view.getCenter() })

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.