leaflet custom projections

by John Doe

HTML

<script src="https://unpkg.com/[email protected]/dist/leaflet-src.js"></script>
<link rel="stylesheet" href="https://kartena.github.io/Proj4Leaflet/lib/leaflet/leaflet.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.10.0/proj4.js"></script>
<script src="https://kartena.github.io/Proj4Leaflet/src/proj4leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-ajax/2.1.0/leaflet.ajax.min.js"></script>
<div id="map"></div>

CSS

#map {
	outline: none;
	position: absolute;
	left: 0;
	bottom: 0;
	top: 0;
	width: 100%;
	background-color: rgb(84, 200, 196);
}

JavaScript

var crs = new L.Proj.CRS('ESRI:53009', '+proj=moll +lon_0=0 +x_0=0 +y_0=0 +a=6371000 +b=6371000 +units=m +no_defs',
{resolutions: [65536, 32768, 16384, 8192, 4096, 2048]
});

const map = new L.map('map', {
		crs: crs,
    center: [57.74, 11.94],
    zoom: 1,
    minZoom: 0,
    continuousWorld: true,
    worldCopyJump: false
});

const world_borders_inside = L.geoJson.ajax('https://raw.githubusercontent.com/johan/world.geo.json/master/countries.geo.json', {
  style: {
  	//crs: crsR,
    fillOpacity: 1,
    fillColor: 'rgb(10, 118, 50)',
    stroke: false,
    color: 'rgb(130, 218, 210)',
    opacity: 1
  }
}).addTo(map);