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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<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.14/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>

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close