Book Image

OpenLayers 3.x Cookbook - Second Edition

By : J. Langley, Antonio Santiago
Book Image

OpenLayers 3.x Cookbook - Second Edition

By: J. Langley, Antonio Santiago

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 (9 chapters)
8
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:

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...