Reproject xyz-tilelayer to Mollweide

Question

As OpenLayers supports raster reprojection I would like to make it reproject xyz-tilelayers e.g. from OSM, Mercator projection to Mollweide projection (ESRI:53009).

From this example I took the necessary code snippets for using Mollweide projection, although in the example vector data is used.

I do not understand why the extent is set to [-9009954.605703328, -9009954.605703328, 9009954.605703328, 9009954.605703328], but it seems to work as the whole world is displayed.

In my case, reprojection itself seems to work, too, but all I get is a limited view of the world:

Furthermore, tiles disappear completely on some panning and zooming (out) interactions.

What am I doing wrong?

var projCode = 'ESRI:53009';
proj4.defs(projCode, '+proj=moll +lon_0=0 +x_0=0 +y_0=0 +a=6371000 +b=6371000 +units=m no_defs');              
var mollweide = new ol.proj.Projection({
        code: projCode,
        extent: [-9009954.605703328, -9009954.605703328, 9009954.605703328, 9009954.605703328],
        worldExtent: [-179, -89.99, 179, 89.99]           
});

var map = new ol.Map({
        target: 'map',
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM()
            })
        ],
        view: new ol.View({
            center: [10,10],
            projection: mollweide,
            zoom: 0
        })
});

Answer 1

Starting from the Raster Reprojection Tutorial I found that the projection parameters you are using are for Mollweide Sphere.

The Reprojection Example uses parameters for World Mollweide (ESRI:54009). Combining this example with OpenStreetMap Reprojection Example you can get a working reprojected map to Mollweide.

See this codepen or the following code from the pen:

var projCode = 'ESRI:54009';

proj4.defs('ESRI:54009', '+proj=moll +lon_0=0 +x_0=0 +y_0=0 +datum=WGS84 ' +
          '+units=m +no_defs');
var proj54009 = ol.proj.get('ESRI:54009');
proj54009.setExtent([-18e6, -9e6, 18e6, 9e6]);

var map = new ol.Map({
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    })
  ],
  target: 'map',
  view: new ol.View({
    projection: projCode,
    center: [0, 0],
    zoom: 2
  })
});