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.

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.

  • 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 '15 at 11:08
  • 1
    To tell browser your HTML tag is focusable, see developer.mozilla.org/en-US/docs/Web/API/HTMLElement/tabIndex – Jonatas Walker Sep 21 '15 at 12:36

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.