The OpenLayers preview

We will now explore the features of the Layer Preview section. From this section, you can learn to access the data configured in GeoServer in several different ways. One of the most useful is the OpenLayers preview. OpenLayers is a powerful JavaScript library that is widely used to build web-mapping applications. GeoServer includes a simple template application that lets you look at a map with one layer represented. Consider the following steps:

1. Open the Layer Preview page, and then locate USA Population in the layer list:

1. When you click on the OpenLayers link, a new browser window is shown. It contains a map of the United States of America colored according to a number of people living in each state:

1. Play with the map to explore the capabilities of OpenLayers. You can zoom in and out using the plus and minus buttons on the left side or with the scroll wheel of your mouse. Pressing on the map and dragging it in a direction, you can shift the area of view that is panning the map. If you press the ... button on the top portion of the map, some new options are made available. Consider the following screenshot snippet:

1. Starting from the left, you find a control to change the WMS version used by OpenLayers to send GetMap requests to GeoServer. The list contains the 1.1.1 and 1.3.0 versions; this may be useful if you want to be sure that the layer is properly working with both. The Tiling control lets you switch between the Single Tile mode, that is, a single image is produced each time you request a map, and the Tiled mode. The latter splits the map into several requests and may be useful to increase the performance of the map. Let's open the Styles control and choose a different one by default. If you choose pophatch, the layout of the map suddenly changes. Consider the following screenshot:

1. We will explore styles in detail in Chapter 6, Styling Your Layers. The last two controls on the right side are to set the width and height of your map canvas to a specific size.

Did you enjoy this first taste of web mapping? OpenLayers is somewhat similar to Google Maps; it allows you to embed maps into a web application and lets users interact with them.

In the previous steps, you had a gentle introduction to the capabilities of OpenLayers. It's probably the most used and known JavaScript framework specifically designed to work with spatial data and maps. You can visit the project home page at https://openlayers.org, where you will find a lot of tutorials and information about the project. GeoServer still uses an old version of the framework; you can find information about it at http://openlayers.org/two.