Time for action – using custom projection with WMS sources

In this part, we will see how to display the WMS image coming from the authority responsible for geology maps in France, the BRGM (equivalent to USGS to simplify):

Let's copy the usual template into the sandbox directory but do not forget to include, in this case, the reference to Proj4js JavaScript library before the ol3.js file.

Go within the <script> tag and declare the additional projection for local projection, in this case, Lambert 93, an official projection for France:

proj4.defs("EPSG:2154","+proj=lcc +lat_1=49 +lat_2=44 +lat_0=46.5 +lon_0=3 +x_0=700000 +y_0=6600000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs");

Declare the extent and the projection reusing your knowledge about declaring custom projection:

var extent = [-378305.81, 6093283.21, 1212610.74, 7186901.68];
var projection = ol.proj.get('EPSG:2154');
projection.setExtent(extent);

Declare an array with one layer using a source providing a WMS-projected web service in EPSG:2154, the EPSG code for Lambert 93:

var layers = [new ol.layer.Image({
  source: new ol.source.ImageWMS({
    url: 'http://geoservices.brgm.fr/geologie',
    attributions: [new ol.Attribution({
      html: '&copy; ' +
        'BRGM (French USGS equivalent)'
      })
    params: {
      'LAYERS': 'SCAN_F_GEOL1M',
      'VERSION': '1.1.1'
    },
    extent: extent
  })
})

Declare the map and the view with its center and zoom:

var map = new ol.Map({
  layers: layers,
  target: 'map',
  view: new ol.view({
    projection: projection,
    center: [495520.187986, 6587896.855407],
    zoom: 2
  })
});

Open the file in the browser and you should see the following screenshot:

What just happened?

We reused the custom projection by first declaring the Proj4js projection declaration and its extent. We recommend that you visit the website http://epsg.io to better understand how to get the extent and the meaning of the second parameter in from the proj4.defs function.

Then, we used our raster WMS knowledge to create the layer. Analyzing the network can be useful to remind you about the relationship between the WMS source layer declaration and the backend web server delivering the image. You can look in particular at getCapabilities, to inspect the available projections and the layers name you may change, if you want to play with the sample. The most important part to understand is to set the projection in the map view projection parameter. How can we deduce this? We understood that because in all the code, we never set any projection at the layer or source level. We should mention that Proj4js is not needed for maps, as long as they do not need any client-side transforms.

Using our example, a minimal case can be achieved replacing previous projection declarations by only declaring a projection, with units and code parameters like below:

var projection = new ol.proj.Projection({
  code: 'EPSG:2154',
  units: 'm'
});

Have a go hero – applying a raster projection on your own

When someone reviews someone else job, it seems to be quite easy but reusing the same method for your own case is not the same, and will help you to really understand it.

So, we will ask you to complete a simple job:

Find local projections for your country by visiting your national mapping agency, if available or sort out projections using the recommended website, http://epsg.io.
Find web services that provide WMS in your local projection. Search engines or Geodata portals can help you. Do not forget to use the getCapabilities operation to get a layer's name or projections available for the data. If you don't find public web services using local projections for your country, to complete the assessment, explore other countries local projections web services.
Find the extent and the code you will need to make your map with local projections.
Copy the previous example to readapt it and not reinvent the wheel.

Never forget to inspect the Network panel to help you if you encounter web services issues. You may also need to use the DOM renderer within the map; it helps you to inspect the url call. With the default canvas renderer, images are assembled in the background and you can't get the WMS URL that can help you.

To find the open data portals, the main entry for America is https://www.data.gov. For Europe, you should visit http://publicdata.eu. For a worldwide overview, go at http://datacatalogs.org, a website for A Comprehensive List of Open Data Catalogs from Around the World. To grasp the state of OpenData in your country, you can visit Global Open Data Index at http://global.census.okfn.org. It's a website maintained by the community to make surveys about each country's open data initiative. The focus is mainly on the type of open data datasets available.

After inspecting how to work with custom projection using raster layers, it's time to see vector reprojection. We already reviewed how to manipulate vector but not explaining further how to manage vector projections. Let's see a bit about them.

Previous Chapter

Time for action – reprojecting extent

Next Chapter

Time for action – reprojecting geometries in vector layers

Table of Contents for OpenLayers 3 : Beginner's Guide

Time for action – using custom projection with WMS sources

What just happened?

Have a go hero – applying a raster projection on your own

Table of Contents for
OpenLayers 3 : Beginner's Guide