Working with extents

In a WebGIS application, it is especially feasible to have controls to zoom into various extents. Users are used to the luxury of zooming in to a layer or a feature to the maximum extent with a single click. In this example, called ch06_extent, we will implement such zooming capabilities. We will create a tool to zoom into the validity extent of the current projection, one for zooming into the selected layer, and the other to zoom into the selected feature. First, let's make some CSS rules for our new tools:

.toolbar .ol-zoom-extent button {
    background-image: url(../../res/button_zoom_extent.png);
}
.toolbar .ol-zoom-layer button {
    background-image: url(../../res/button_zoom_layer.png);
}
.toolbar .ol-zoom-selected button {
    background-image: url(../../res/button_zoom_selected.png);
}

Creating a zoom control

There is a built-in control in OpenLayers 3 to zoom into various extents. However, the main weakness of ol.control.ZoomToExtent lies in its static nature...