3

In ol 3.10, I am trying to use this code to zoom, but it is not displaying my zooming rectangle.

ol.interaction.DragZoom.dragZoom= new ol.interaction.DragZoom ({
  condition: ol.events.condition.always,      
});

What is the possible reason?

1
  • in openlayer v3.13 its creating issue .. please try lower version ...say v3.9.0. I also faced the same issue . Later i found Openlayer3.13 having issue in Style . Thanks Pravin Commented Feb 29, 2016 at 18:58

3 Answers 3

2

They have resolved the bug, now you just need to use this CSS to style your box:

.ol-dragzoom {
  border-color: red;
  border-width: 3px;
  background-color: rgba(255,255,255,0.4);
}
0

did you add the style stuff when initialising???? check this might help

myapp.Navigation.Tools.dragZoomInt = 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    : '#319FD3',
            width    : 3
        })
  })
}); 
5
  • thank you @pavlos. I tried your way. But I can't still see zooming rectangle
    – atemiz88
    Commented Oct 30, 2015 at 15:42
  • when initialising your map, do you use the renderer option???? And if yes what do you asign there?
    – pavlos
    Commented Oct 30, 2015 at 15:47
  • I had some kind of this problem when using 'webgl'. Thats why I am asking. The piece of code you provide seems correct. Though , this is just the tree out of the forest. Unless you provide the whole code or better a fiddle we can not do much to help you.
    – pavlos
    Commented Oct 31, 2015 at 10:55
  • it is usual map init.( or I guess so) var map = new ol.Map({ layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }) ], controls: ol.control.defaults().extend([ new ol.control.ScaleLine({units:'metric', className: 'ol-scale-line', target: document.getElementById('scale-line')}), overviewMapControl, new ol.control.FullScreen() ]), target: 'map', renderer: 'canvas', view: new ol.View({ center: ol.proj.transform([36.0, 39.0],'EPSG:4326', 'EPSG:3857'), zoom: 6 }) }); zoom bounding box has vanished.
    – atemiz88
    Commented Nov 1, 2015 at 8:42
  • Within your code I dont see any interaction. Where do you initialise your interaction?????? check this fiddle jsfiddle.net/p_tsagkis/8o72zgun it is a combination of your code plus I have added the interaction.
    – pavlos
    Commented Nov 1, 2015 at 15:19
0

This worked for me

.ol-dragzoom {
    border: 3px solid red !important;
    background-color: rgba(255,255,255,0.4);
}   

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.