OpenLayers - Equal Earth grid with Proj4js




OpenLayers map using Proj4js and Equal Earth tile grid.

HTML:

<div id='map'></div>
<pre id="mouse-position"></pre>

Javascript:

proj4.defs('EPSG:8857', '+proj=eqearth +lon_0=0 +x_0=0 +y_0=0 +R=6371008.7714 +units=m +no_defs +type=crs');
ol.proj.proj4.register(proj4);

const extent = [-17243959.06, -17243959.06, 17243959.06, 17243959.06];
const projection = ol.proj.get('EPSG:8857');
projection.setGlobal(true);
projection.setExtent(extent);
projection.setWorldExtent([-90, -180, 90, 180]);

const resolutions = [
  134718.43015625, 67359.215078125, 33679.6075390625, 16839.80376953125, 8419.901884765624, 4209.950942382812, 2104.975471191406, 1052.487735595703, 526.2438677978515, 263.12193389892576, 131.56096694946288, 65.78048347473144, 32.89024173736572, 16.44512086868286, 8.22256043434143, 4.111280217170715, 2.0556401085853575, 1.0278200542926788, 0.5139100271463394, 0.2569550135731697, 0.12847750678658484, 0.06423875339329242, 0.03211937669664621, 0.016059688348323106, 0.008029844174161553
];

var mvt = new ol.layer.VectorTile({
  source: new ol.source.VectorTile({
    format: new ol.format.MVT(),
    tileGrid: new ol.tilegrid.TileGrid({
      extent: extent,
      resolutions: resolutions,
      tileSize: 256
    }),
    tilePixelRatio: 16,
    url: 'https://assets.bbox.earth/tiles/ne_extracts_8857/ne_countries/{z}/{x}/{y}.pbf',
    projection: projection,
  })
});

var map = new ol.Map({
  layers: [mvt],
  target: 'map',
  view: new ol.View({
    center: [0, 0],
    projection: projection,
    zoom: 1
  })
});

const mousePositionControl = new ol.control.MousePosition({
  coordinateFormat: ol.coordinate.createStringXY(4),
  projection: 'EPSG:4326',
  className: 'custom-mouse-position',
  target: document.getElementById('mouse-position'),
});
map.getControls().extend([mousePositionControl]);

Header:

<script src="https://cdn.jsdelivr.net/npm/ol@10/dist/ol.js"></script>
<link href="https://cdn.jsdelivr.net/npm/ol@10/ol.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/proj4@2/dist/proj4.min.js"></script>