Table of Contents for
OpenLayers 3.x Cookbook - Second Edition
OpenLayers 3.x Cookbook - Second Edition
Published by
Packt Publishing, 2016
- Cover
- Table of Contents
- OpenLayers 3.x Cookbook Second Edition
- OpenLayers 3.x Cookbook Second Edition
- Credits
- About the Authors
- About the Reviewer
- www.PacktPub.com
- Preface
- What you need for this book
- Who this book is for
- Sections
- Conventions
- Reader feedback
- Customer support
- 1. Web Mapping Basics
- Creating a simple fullscreen map
- Playing with the map's options
- Managing the map's stack layers
- Managing the map's controls
- Moving around the map view
- Restricting the map's extent
- 2. Adding Raster Layers
- Using Bing imagery
- Using OpenStreetMap imagery
- Adding WMS layers
- Changing the zoom effect
- Changing layer opacity
- Buffering the layer data to improve map navigation
- Creating an image layer
- Setting the tile size in WMS layers
- 3. Working with Vector Layers
- Adding a GML layer
- Adding a KML layer
- Creating features programmatically
- Exporting features as GeoJSON
- Reading and creating features from a WKT
- Using point features as markers
- Removing or cloning features using overlays
- Zooming to the extent of a layer
- Adding text labels to geometry points
- Adding features from a WFS server
- Using the cluster strategy
- Reading features directly using AJAX
- Creating a heat map
- 4. Working with Events
- Creating a side-by-side map comparator
- Implementing a work-in-progress indicator for map layers
- Listening for the vector layer features' events
- Listening for mouse or touch events
- Using the keyboard to pan or zoom
- 5. Adding Controls
- Adding and removing controls
- Working with geolocation
- Placing controls outside the map
- Drawing features across multiple vector layers
- Modifying features
- Measuring distances and areas
- Getting feature information from a data source
- Getting information from a WMS server
- 6. Styling Features
- Styling layers
- Styling features based on geometry type
- Styling based on feature attributes
- Styling interaction render intents
- Styling clustered features
- 7. Beyond the Basics
- Working with projections
- Creating a custom control
- Selecting features by dragging out a selection area
- Transitioning between weather forecast imagery
- Using the custom OpenLayers library build
- Drawing in freehand mode
- Modifying layer appearance
- Adding features to the vector layer by dragging and dropping them
- Making use of map permalinks
- Index
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/.
To enable the arrow keys to pan and the plus and minus keys to zoom, follow these steps:
- Create an HTML file and include the OpenLayers dependencies and a
divelement for the map. - 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 }); - 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', layers: [ new ol.layer.Tile({source: new ol.source.Stamen({ layer: 'terrain' })}) ], interactions: ol.interaction.defaults().extend([ keyboardPan, keyboardZoom ]), keyboardEventTarget: document });
We've enabled full panning and zooming control directly from the keyboard in a small amount of code. Let's dive right in with the details.
var keyboardPan = new ol.interaction.KeyboardPan({
duration: 90,
pixelDelta: 256
});Both keyboard events are part of the OpenLayers ol.interaction object, which houses a whole host of interactions—DragPan and PinchRotate to name a few. We've customized some properties of the panning interaction, namely duration (in milliseconds) and pixelDelta (the amount of pixels the map moves in a single pan).
The similar keyboard zoom interaction has been passed a custom duration of 90 ms, as well. The keyboard zoom interaction has a delta property that accepts a number representing the quantity of zoom levels to execute per zoom alteration.
There are two specific map configuration properties that we'll look over next:
interactions: ol.interaction.defaults().extend([
keyboardPan, keyboardZoom
]),
keyboardEventTarget: documentAn instance of an OpenLayers map already comes with a variety of interactions enabled, of which KeyboardPan and KeyboardZoom are actually included. However, we've decided to customize the settings of these interactions, which are easily achieved by extending the array of the default interactions with the two modified keyboard ones.
By default, the keyboard events responsible for panning and zooming are only processed by OpenLayers if the map element (the div element containing the map) has focus. This means that the DOM element must have a tabindex property with a numeric value. This is easy enough to do, but, as our map is fullscreen, we have specified that the event target for keyboard events is the whole web page (document) via the map property, keyboardEventTarget. So, as long as the browser window has focus, keyboard interaction will work without the need to manually focus on the map DOM element by tabbing around.
Both keyboard interactions have a getActive method that can be called to determine whether or not the interaction is currently enabled.