I am using OpenLayers 3.9.0. I Want to add and remove dragZoom and dragBox interactions in OpenLayers 3 map dynamically.

<button id='box'>dragBox</button>

var dragBox = new ol.interaction.DragBox({
            condition: ol.events.condition.always,
            style: new ol.style.Style({
                stroke: new ol.style.Stroke({
                    color: [0, 0, 255, 1]

In jQuery for button click event:


When this event triggered using button the cursor and the box are not at same position.

Displaced mouse position

So why does this is happen, and how can we overcome this?

1 Answer 1


I found the solution

It is due to the change of the size of map container externally. It is fixed by adding the function to update the map size whenever the size of the map container(div) has changed externally


This function updates the size of the map container dynamically. So the pointer points exactly

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.