Table of Contents for
OpenLayers 3.x Cookbook - Second Edition

Version ebook / Retour

Cover image for bash Cookbook, 2nd Edition OpenLayers 3.x Cookbook - Second Edition by Antonio Santiago Perez Published by Packt Publishing, 2016
  1. Cover
  2. Table of Contents
  3. OpenLayers 3.x Cookbook Second Edition
  4. OpenLayers 3.x Cookbook Second Edition
  5. Credits
  6. About the Authors
  7. About the Reviewer
  8. www.PacktPub.com
  9. Preface
  10. What you need for this book
  11. Who this book is for
  12. Sections
  13. Conventions
  14. Reader feedback
  15. Customer support
  16. 1. Web Mapping Basics
  17. Creating a simple fullscreen map
  18. Playing with the map's options
  19. Managing the map's stack layers
  20. Managing the map's controls
  21. Moving around the map view
  22. Restricting the map's extent
  23. 2. Adding Raster Layers
  24. Using Bing imagery
  25. Using OpenStreetMap imagery
  26. Adding WMS layers
  27. Changing the zoom effect
  28. Changing layer opacity
  29. Buffering the layer data to improve map navigation
  30. Creating an image layer
  31. Setting the tile size in WMS layers
  32. 3. Working with Vector Layers
  33. Adding a GML layer
  34. Adding a KML layer
  35. Creating features programmatically
  36. Exporting features as GeoJSON
  37. Reading and creating features from a WKT
  38. Using point features as markers
  39. Removing or cloning features using overlays
  40. Zooming to the extent of a layer
  41. Adding text labels to geometry points
  42. Adding features from a WFS server
  43. Using the cluster strategy
  44. Reading features directly using AJAX
  45. Creating a heat map
  46. 4. Working with Events
  47. Creating a side-by-side map comparator
  48. Implementing a work-in-progress indicator for map layers
  49. Listening for the vector layer features' events
  50. Listening for mouse or touch events
  51. Using the keyboard to pan or zoom
  52. 5. Adding Controls
  53. Adding and removing controls
  54. Working with geolocation
  55. Placing controls outside the map
  56. Drawing features across multiple vector layers
  57. Modifying features
  58. Measuring distances and areas
  59. Getting feature information from a data source
  60. Getting information from a WMS server
  61. 6. Styling Features
  62. Styling layers
  63. Styling features based on geometry type
  64. Styling based on feature attributes
  65. Styling interaction render intents
  66. Styling clustered features
  67. 7. Beyond the Basics
  68. Working with projections
  69. Creating a custom control
  70. Selecting features by dragging out a selection area
  71. Transitioning between weather forecast imagery
  72. Using the custom OpenLayers library build
  73. Drawing in freehand mode
  74. Modifying layer appearance
  75. Adding features to the vector layer by dragging and dropping them
  76. Making use of map permalinks
  77. Index

Placing controls outside the map

By default, all the controls are placed on the map. This way, controls, such as Zoom, Attribution, or MousePosition, are rendered on top of the map and over any layer. This is the default behavior, but OpenLayers is flexible enough to allow us to put controls outside the map. In this recipe (source code in ch05/ch05-controls-outside-map), we are going to create a map where the Zoom to Extent and Scale Line controls are placed outside the map and within the sidebar, as you can see in the following screenshot:

Placing controls outside the map

How to do it…

To learn how to customize where the map controls are placed, follow these steps:

  1. Create an HTML file and add the OpenLayers dependencies and div to hold the map. In particular, create a div element for each control within the sidebar markup:
    <div id="js-zoom-extent"></div>
<div id="js-scale-line"></div>
  2. Create a custom JavaScript file and instantiate the map instance with view and a raster tile layer with the Open Street Map source:
    var map = new ol.Map({  
  view: new ol.View({
    zoom: 10,
    center: [4740318, 5344324]
  }),
  target: 'js-map',
  layers: [
    new ol.layer.Tile({source: new ol.source.OSM()})
  ]
});
  3. Create and add the Scale Line control to the sidebar:
    map.addControl(new ol.control.ScaleLine({
  target: document.getElementById('js-scale-line')
}));
  4. Create and add the Zoom to Extent control to the sidebar:
    var zoomToExtent = new ol.control.ZoomToExtent({
  extent: [4684596, 5306182, 4796041, 5382466]
});  
zoomToExtent.setTarget('js-zoom-extent');
map.addControl(zoomToExtent);

How it works…

We've used the Bootstrap CSS framework to style the sidebar content, and much of the HTML has been omitted for brevity. Please take a look at the source code for the complete implementation.

As you can see, adding controls outside of the map is straightforward. We've demonstrated two ways of achieving this. One method is with the target property on the control settings on instantiation, the other way is to use the control's setTarget method. Let's take a closer look at both:

map.addControl(new ol.control.ScaleLine({
  target: document.getElementById('js-scale-line')
}));

The Scale Line control displays rough X-axis distances from the center of view. The target property is used to render the control in a particular area of the web page. The property expects a DOM element, rather than an ID string (which the target property for a map instance would accept). If a target isn't provided, OpenLayers will add the control to the map's overlay container.

var zoomToExtent = new ol.control.ZoomToExtent({
  extent: [4684596, 5306182, 4796041, 5382466]
});

In order to demonstrate a different method of setting target, we need to assign the Zoom to Extent control to a variable, namely zoomToExtent, so that it can be accessed later. By default, the Zoom to Extent control will zoom the map out to the extent property of the view projection. However, we've chosen an arbitrary extent by passing an array of type ol.Extent to the extent property. The ol.Extent array has the following format: [minX, minY, maxX, maxY].

zoomToExtent.setTarget('js-zoom-extent');

Each control has a setTarget method that's inherited from ol.control.Control (the base class for controls). We use this method to set the DOM element that the control will render within. Unlike the target property, you can alternatively provide an ID string like we've done if you prefer to do so.

When using the setTarget method, you must call it before adding the control to the map, or else OpenLayers will render the control to the map's overlay container instead.

We purposely haven't adjusted the class names of these controls, as we wanted to inherit the default CSS styles. However, because these controls are naturally positioned within the map's container, they have some CSS rules that use absolute positioning, so be aware that you'll probably need to modify some styling.

The Scale Line and Zoom to Extent controls have the CSS class names, .ol-scale-line and .ol-zoom-extent, respectively. Use these CSS hooks to override any styling rules as desired. It's most sensible to do this from within a separate CSS file of your own in order to keep the original styling intact (better for reference, maintainability, and extensibility).

See also

  • The Adding and removing controls recipe
  • The Creating a custom control recipe in Chapter 7, Beyond the Basics