How to draw Rectangle and Circle using free hand mouse in openlayers3 ? I know we can draw point, lines, and Polygons. I saw this example: http://openlayers.org/en/master/examples/draw-features.html but I need to draw rectangles and circles too.

  • Do you want to click at the center and then move the mouse to increase the size, or do you want a complete freehand drawing like in the answer below? – Devdatta Tengshe Jan 8 '15 at 12:12
  • yes I need a complete freehand drawing like the answer below but using openalyers3 – Mariam Malak Jan 8 '15 at 12:31

Those who are still looking for solution can view this URL. Here you will get the solution for drawing the circle.

function addInteraction() {
var value = 'Circle';
draw = new ol.interaction.Draw({
  source: source,
  type: /** @type {ol.geom.GeometryType} */ (value)

You can check the following link which describes creating circles in OpenLayers. It doesn't mention which version it uses but perhaps you can adapt and modify it:

There's also a link to a demo which shows the OpenLayers script in action

  • It is openlayers 2 .. I used it to draw different types of polygons before but now I upgrade the website to openlayers 3 so I need to upgrade this code – Mariam Malak Jan 8 '15 at 12:11
  • Ahh ok, I found similar questions concerning freehand drawing in OpenLayers3 here and here but don't know if they are relevant. Hopefully @DevdattaTengshe or others can provide you with a definitive answer. – Joseph Jan 8 '15 at 12:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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