You can project a non-Mercator dynamic map layer using L.esri.Tiled and the Proj4Leaflet plugin. This sample builds on the "Project and display a tile layer" sample.
<html>
<head>
<meta charset="utf-8" />
<title>Project and display a dynamic map layer</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" crossorigin=""></script>
<!-- Load Esri Leaflet from CDN -->
<script src="https://unpkg.com/esri-leaflet@3.0.12/dist/esri-leaflet.js"></script>
<style>
html,
body,
#map {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #323232;
}
</style>
</head>
<body>
<!-- Proj4 and Proj4Leaflet -->
<script src="https://unpkg.com/proj4@2.4.3"></script>
<script src="https://unpkg.com/proj4leaflet@1.0.1"></script>
<div id="map"></div>
<script>
/* create new Proj4Leaflet CRS:
1. Proj4 and WKT definitions can be found at sites like https://epsg.io, https://spatialreference.org/ or by using gdalsrsinfo https://www.gdal.org/gdalsrsinfo.html
2. Appropriate values to supply to the resolution and origin constructor options can be found in the ArcGIS Server tile server REST endpoint (ex: https://tiles.arcgis.com/tiles/qHLhLQrcvEnxjtPr/arcgis/rest/services/OS_Open_Background_2/MapServer).
3. The numeric code within the first parameter (ex: `27700`) will be used to project the dynamic map layer on the fly
*/
const crs = new L.Proj.CRS(
"EPSG:27700",
"+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717 +x_0=400000 +y_0=-100000 +ellps=airy +towgs84=446.448,-125.157,542.06,0.15,0.247,0.842,-20.489 +units=m +no_defs",
{
origin: [-5781523.997920001, 4883853.592504997],
resolutions: [
132291.9312505292,
66145.9656252646,
26458.386250105836,
19843.789687579378,
13229.193125052918,
6614.596562526459,
2645.8386250105837,
1322.9193125052918,
661.4596562526459,
264.5838625010584,
132.2919312505292,
66.1459656252646,
26.458386250105836,
19.843789687579378,
13.229193125052918,
6.614596562526459,
2.6458386250105836,
1.3229193125052918,
0.6614596562526459
]
}
);
const map = L.map("map", {
crs: crs
}).setView([53.386, -2.319], 7);
// The min/maxZoom values provided should match the actual cache thats been published. This information can be retrieved from the service endpoint directly.
L.esri
.tiledMapLayer({
url: "https://tiles.arcgis.com/tiles/qHLhLQrcvEnxjtPr/arcgis/rest/services/OS_Open_Background_2/MapServer",
maxZoom: 19,
minZoom: 6
})
.addTo(map);
// Dynamic map layers are projected by ArcGIS Server itself before the image is retrieved
L.esri
.dynamicMapLayer({
url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/WorldTimeZones/MapServer",
layers: [0],
opacity: 0.4
})
.addTo(map);
</script>
</body>
</html>