Project and display a dynamic map layer

You can project a non-Mercator dynamic map layer using L.esri.TiledMapLayer and the Proj4Leaflet plugin. This sample builds on the "Project and display a tile layer" sample.

Use dark colors for code blocksCopy
<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.10/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>