Display Layers provided in Mercator projection

TimeScan over Prague in the EPSG:3857

Recently we needed to display layers provided only in the Mercator projection but using the standard WMS parameter schema. The final URL looks like this:


The prerequisities for this example is the proj4 and the Web World Wind in the version 0.9.0. In the example I am using bundled version of proj4 exposing proj4 into the global space. It isn’t best practice, but it will get the job done. You can include the proj4js from cdnjs: https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.4.4/proj4.js

The Web World Wind already contains support for the layers projected in the EPSG:3857 projection. The relevant class is MercatorTiledImageLayer. This Layer handles the reprojection of the received imagery and correct size of the sector to ask for in the WGS84 space. To support layers with the schema shown above, the only missing thing is to provide mapSizeForLevel() function in the extended Layer and the URL Builder that reprojects the sector coordinates to the EPSG:3857 ones.

If you want to understand more about how this is done. There are two key parts that differs from standard layers. The createTile function which transforms the Sector to the size which represents the EPSG:3857 tiles in the WGS84 projection.

The second part is reprojecting the received imagery from the EPSG:3857 to WGS84


Most of the code in the URL Builder is the same as in WmsUrlBuilder. It creates the URL containing standard WMS parameters such as Service, Method and all the others that are supported. If you need custom params update the URL Builder.

EOX Sentinel-2 Layer over Prague

The code relevant to this use case with Mercator is the transform function. It receives the coordinates of the sector to display in the WGS84 projection and using proj4 libray reprojects them to the EPSG:3857 projection. What follows is full implementation of a builder that can be directly used.


This layer is more of a convenience class which bundle together the implementation of mapSizeForLevel and creation of the MercatorUrlBuilder. It is a working implementation in the ES6 though, so you can directly use it in your project.

This way you should be able to use such layers with even limited understanding of the underlying projections and math, if that is not what you are interested in.



I always try to find answers to the complex questions. Now exploring the world of Mainframes in the Broadcom inc.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Jakub Balhar

I always try to find answers to the complex questions. Now exploring the world of Mainframes in the Broadcom inc.