Time for action – integrating GeoServer and OpenLayers

Once again, let's dive into the source code and see how OpenLayers works with GeoServer:

1. Open chapter7/index.html in your favorite browser.

2. Click on the OpenLayers Basic Map example:

   

3. Open chapter7/openlayers/geoserverbase/index.html and /chapter7/openlayers/geoserverbase/map.js. The index.html file is very similar to the previous one. The difference is the loading of the OpenLayers API code:

   <script type="text/javascript" src="http://openlayers.org/api/2.12/OpenLayers.js"></script>

4. The map.js file is quite different. First we define the map options, that is, bounds and projection:

   var map;
   
   function mapinitialize() {
       var bounds = new OpenLayers.Bounds(
           -180.0, -90.0, 180.0, 90.0
           );
   
       var options = {
           maxExtent: bounds,
           projection: 'EPSG:4326',
           units: 'degrees'
       };

5. Then we create a new map object:

       map = new OpenLayers.Map('map', options);

6. Create a new layer object and define its...