Using openlayers (latest - 4), I have a drawing interaction that draws a circle -

let drawCircle = new ol.interaction.Draw({source: source, type: "Circle"});

Both left mouse and right mouse click have the same behavior with this interaction- they start and stop the drawing of the circle.

I also have a context menu, so I do not want the right click to do anything with the interaction, just the left click.

How do I make this happen?


You can use condition option for ol.interaction.Draw.
when condition meets, drawing will be started.

In your case, drawing should be start with leftclick(which means button code 1)
So, simply add this code into ol.interaction.Draw's option.

condition: function(e) {
  // when the point's button is 1(leftclick), allows drawing
  if (e.pointerEvent.buttons === 1) { 
    return true;
  } else {
    return false;


  • This is correct, but I found out we're using ol3-google-maps which is a custom build of openlayers 4.6.4 that for some reason sends different parameters to the condition function! – user210757 Mar 22 '18 at 22:49
  • Then could you add your code with codepen or fiddle using ol3-google-maps? so I can try to figure out how. – Chase Choi Mar 23 '18 at 0:27
  • 1
    In the minified version pointerEvent is not included as its not considered public api, so I had to use this instead: (e.originalEvent.buttons === 1) – user210757 Mar 23 '18 at 15:36
  • You can simplify this with return e.pointerEvent.buttons === 1 or in ES6 condition: (e) => e.pointerEvent.buttons === 1 – blindguy Sep 25 '20 at 18:28
  • Just want to point out that there is a e.pointerEvent.buttons and a e.pointerEvent.button not sure the exact difference but they have different mappings – blindguy Oct 7 '20 at 23:43

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.