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?

  • 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 – Pravin Kumar singh Feb 29 '16 at 18:58

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);

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
  • thank you @pavlos. I tried your way. But I can't still see zooming rectangle – atemiz88 Oct 30 '15 at 15:42
  • when initialising your map, do you use the renderer option???? And if yes what do you asign there? – pavlos Oct 30 '15 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 Oct 31 '15 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 Nov 1 '15 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 Nov 1 '15 at 15:19

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, privacy policy and cookie policy

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