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?

3 Answers 3


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, 2018 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, 2018 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, 2018 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, 2020 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, 2020 at 23:43

For OpenLayers 7.1.0 the condition is the folowing:

condition: (e) => e.originalEvent.buttons === 1

And even higher OL

condition: (e) => {
          const pointerEvent = e.activePointers[0];
          if (pointerEvent.buttons === 1) {
            return true;
          } else {
            return false;

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.