Before getting started

For this chapter, we will need exactly one-third of a party library: PROJ4JS. It is included in the code appendix, located at js/proj4js-2.3.10/proj4.js. We will see how this library is not really a third-party application with regard to OpenLayers 3, but rather an optional extension.

Furthermore, we have to modify our base layer as OpenStreetMap only supports Web Mercator, but we need a layer that comes in multiple projections. For this purpose, we utilize Natural Earth's 50m Land layer provided by Boundless's demo GeoServer.

Tip

We use this layer for printing purposes. You can try out NASA's Blue Marble layer (bluemarble) instead; it's truly beautiful.

First, let's make the necessary changes in our init function:

    var map = new ol.Map({
        target: 'map',
        layers: [
            new ol.layer.Tile({
                source: new ol.source.TileWMS({
                    url: 'http://demo.opengeo.org/geoserver/wms',
                    params: {
              ...