OpenLayers 6 DragZoom Control - how to change condition

Question

in OL 6 I would like to use a button, so a user can click to activate a change for the drag zoom control so it will be available without holding down shift. In https://openlayers.org/en/latest/apidoc/module-ol_interaction_DragZoom-DragZoom.html it lists the option 'condition' to handles this. I could not figure out how to change and set that condition. Any examples how to do this?

Answer 1

Here my example, hope be usefull.

You can change the style with CSS or in your JS.
HTML code:

<style>
    .ol-dragzoom {
      border-color: red !important;
    }
</style>

<div id="map"></div>

<div id="tool-zoom" class="shadow-sm">
  <a id="tool-lupa" class="text-secondary">
    <i class="icono-arg-lupa"></i>
  </a>
</div>

And the JS code:

    var aplica_lupa = function(e) {
        const dragZoom = new ol.interaction.DragZoom({
            condition  : ol.events.condition.always,
        })
        map.addInteraction(dragZoom);
    };

    $("#tool-lupa").on("click",function() { 
        aplica_lupa();
    })

If you are importing OL methods, avoid the "ol.interaction...".
And if you want to change the DragZoom style in your JS, try something like this:

        const dragZoom = new ol.interaction.DragZoom({
            condition  : ol.events.condition.always,
            style      : new ol.style.Style({
               fill       : new ol.style.Fill({
                  color      : 'rgba(255, 255, 255, 0.6)'
               }),
               stroke     : new ol.style.Stroke({
                   color    : '#CD4D64',
                   width    : 3
               })
            })
         });

And other option, with onclick remove interaction:

    const dragZoom = new ol.interaction.DragZoom({
        condition  : ol.events.condition.always,
    })
    var aplica_lupa = function(e) {
        map.addInteraction(dragZoom);
    };
    var remueve_lupa = function(e) {
        map.removeInteraction(dragZoom);
    };

    $('#tool-lupa').bind('click', myHandlerFunction);
    var first = true;
    function myHandlerFunction(e) {
        if(first){
            document.body.style.cursor="all-scroll";
            aplica_lupa();
        }else{
            document.body.style.cursor="default";
            remueve_lupa();
        }
        first = !first;
    }