1

This is my code in Openlayers 3.9.0

<article id="map" class="map"></article>
<script src='/javascripts/js/ol-debug.js'></script>
    <script>


    var layer = new ol.layer.Tile({
        source: new ol.source.OSM()
    });
    var kbz = new ol.interaction.KeyboardZoom();
    var dr = new ol.interaction.DragRotateAndZoom();

var center = ol.proj.transform([-1.812, 52.443], 'EPSG:4326', 'EPSG:3857');
    var view = new ol.View({
        center: center,
        zoom: 6
    });

    var map = new ol.Map({
        target: 'map',
        layers: [layer],
        view: view
    });


    map.addInteraction(kbz);
    map.addInteraction(dr);

</script>

I just want to pass some extra Interactions to the map after I create it. I get no errors in my console. The weird part is that I can dragRotate, this works fine, but the keyboardZoom does not work. I fail to understand why keyboardZoom fails, or how to fix this.

1 Answer 1

2

ol.interaction.KeyboardZoom() is enabled by default as docs state:

Allows the user to zoom the map using keyboard + and -. Note that, although this interaction is by default included in maps, the keys can only be used when browser focus is on the element to which the keyboard events are attached. By default, this is the map div, though you can change this with the keyboardEventTarget in ol.Map. document never loses focus but, for any other element, focus will have to be on, and returned to, this element if the keys are to function.

To get it working set a tabindex="0" on you map HTML tag so that your map have focus in. You will click on map and then use + and - keys.

2
  • Wait, So if its default I dont need to explicitly add it like var kbz = new ol.interaction.... Why I just click and on the map and then hit + and it will zoom? What is the tabindex=0for? You've lost me. Thanks. I mean, according to the docs, I focus on the map when I click it, why I need the extra tabindex?
    – slevin
    Sep 21, 2015 at 11:08
  • 1
    To tell browser your HTML tag is focusable, see developer.mozilla.org/en-US/docs/Web/API/HTMLElement/tabIndex Sep 21, 2015 at 12:36

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.