Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<html>
​
<head>
  <meta charset="utf-8" />
  <title>Project and display a tile 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:28992","+proj=sterea +lat_0=52.1561605555556 +lon_0=5.38763888888889 +k=0.9999079 +x_0=155000 +y_0=463000 +ellps=bessel +towgs84=565.4171,50.3319,465.5524,1.9342,-1.6677,9.1019,4.0725 +units=m +no_defs +type=crs",
      {
        origin: [-30515500, 31112399.999999993],
        resolutions: [
          3251.206502413005,
          1625.6032512065026,
          812.8016256032513,
          406.40081280162565,
          203.20040640081282,
          101.60020320040641,
          50.800101600203206,
          25.400050800101603,
          12.700025400050801,
          6.350012700025401,
          3.1750063500127004,
          1.5875031750063502,
        ]
      }
    );
​
    const map = L.map("map", {
      crs: crs
    }).setView([51.92, 5.2], 3);
​
    // 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/nSZVuSZjHpEZZbRo/arcgis/rest/services/Historische_tijdreis_2023/MapServer",
        maxZoom: 11,
        minZoom: 0
      })
      .addTo(map);
  </script>
</body>
​
</html>
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
gr-mapspro
0viewers