Let's follow the component's self-explaining name to try out it behaviour :
First, duplicate the code from the previous
ol.interaction.defaults
sample.Then, make changes in the
interactions
block in theol.Map
object as follows:var map = new ol.Map({ ... interactions: ol.interaction.defaults({ shiftDragZoom: false }).extend([new ol.interaction.DragRotateAndZoom()]), ... });
Finally, open your browser and drag while maintaining the keyboard on the Shift key.
First, as it can conflict with ol.interaction.DragRotateAndZoom
, we deactivated the shiftDragZoom
interaction by setting it to false
. We chose this option, but it was also possible to change the key to activate the function using the condition
property.
You also saw the now-common pattern to add interactions to existing default interaction using an array within the extend block. Practically, you also learned how to use the behavior.
Now, let's jump to...