Project and display a feature layer

You can project a feature layer using non-Mercator tiles using L.esri.TiledMapLayer and the Proj4Leaflet plugin.

Use dark colors for code blocksCopy
<html>
  <head>
    <meta charset="utf-8" />
    <title>Project and display a feature 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>
    <!-- Load shapeMarkers from CDN -->
    <script src="https://unpkg.com/leaflet-shape-markers@1.0.6"></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);

      // feature layers will be requested in WGS84 (4326) and reprojected
      L.esri
        .featureLayer({
          url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/WorldTimeZones/MapServer/0",
          where: "POP_RANK < 5",
          pointToLayer(geojson, latlng) {
            return L.shapeMarkers.diamondMarker(latlng, 5, {
              color: "#0099FF",
              weight: 2
            });
          }
        })
        .addTo(map);
    </script>
  </body>
</html>