Consuming WMS services with OpenLayers

In this recipe, you will use the MapServer and Geoserver WMS you created in the first two recipes of this chapter using the OpenLayers open-source JavaScript API.

This excellent library help developer to quickly assemble web pages using mapping viewers and features. In this recipe, you will create an HTML page, add an OpenLayers map in it and a bunch of controls in that map for navigation, switch the layers, and identify features of the layers. We will then add to the OpenLayers map the two WMS layers pointing to the PostGIS tables, implemented with MapServer and GeoServer at the beginning of this chapter.

Getting ready

MapServer uses PROJ.4 (https://trac.osgeo.org/proj/) for projection management. This library does not exist by default with the Spherical Mercator projection (EPSG:900913) defined. Such a projection is commonly used by commercial map API providers, such as GoogleMaps, Yahoo! Maps, and Microsoft Bing, that can provide excellent base layers...