Book Image

OpenLayers 3.x Cookbook - Second Edition

By : Peter J. Langley, Antonio Santiago Perez
Book Image

OpenLayers 3.x Cookbook - Second Edition

By: Peter J. Langley, Antonio Santiago Perez

Overview of this book

OpenLayers 3 is one of the most important and complete open source JavaScript mapping libraries today. Throughout this book, you will go through recipes that expose various features of OpenLayers 3, allowing you to gain an insight into building complex GIS web applications. You will get to grips with the basics of creating a map with common functionality and quickly advance to more complicated solutions that address modern challenges. You will explore into maps, raster and vector layers, and styling in depth. This book also includes problem solving and how-to recipes for the most common and important tasks.
Table of Contents (14 chapters)
OpenLayers 3.x Cookbook Second Edition
About the Authors
About the Reviewer

Using the keyboard to pan or zoom

Users of your mapping application may feel more comfortable navigating around the map with the use of a keyboard. This may also fulfill some accessibility requirements of the app. For whatever reason, we'll demonstrate how to add and customize keyboard control for a map.

The source code of this recipe can be found in ch04/ch04-keyboard-pan-zoom/.

How to do it…

To enable the arrow keys to pan and the plus and minus keys to zoom, follow these steps:

  1. Create an HTML file and include the OpenLayers dependencies and a div element for the map.

  2. Create a custom JavaScript file and set up both keyboard interactions, as follows:

    var keyboardPan = new ol.interaction.KeyboardPan({
      duration: 90,
      pixelDelta: 256
    var keyboardZoom = new ol.interaction.KeyboardZoom({
      duration: 90
  3. Instantiate and configure the map, making sure to add the keyboard interactions:

    new ol.Map({
      view: new ol.View({
        zoom: 10,
        center: [-12987415, 3851814]
      target: 'js-map'...