Esri Leaflet

Non-mercator projection

Using non mercator tiles with L.esri.Layers.TiledMapLayer with the Proj4Leaflet plugin.

This demo should be implemented at your own risk. Esri Leaflet only supports tiles that have been published in Web Mercator Auxiliary Sphere tiling scheme (WKID 102100/3857) at the default scales and resolutions. Strong knowledge of projections, spatial references and tiling schemes is required for this.

<html>
<head>
  <meta charset=utf-8 />
  <title>Non-mercator projection</title>
  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />

  <!-- Load Leaflet from CDN-->
  <link rel="stylesheet" href="//cdn.jsdelivr.net/leaflet/0.7.3/leaflet.css" />
  <script src="//cdn.jsdelivr.net/leaflet/0.7.3/leaflet.js"></script>

  <!-- Load Esri Leaflet from CDN -->
  <script src="//cdn.jsdelivr.net/leaflet.esri/1.0.3/esri-leaflet.js"></script>

  <style>
    body { margin:0; padding:0; }
    #map { position: absolute; top:0; bottom:0; right:0; left:0; }
  </style>
</head>
<body>

<script src="//cdnjs.cloudflare.com/ajax/libs/proj4js/2.0.0/proj4.js"></script>
<script src="https://cdn.rawgit.com/kartena/Proj4Leaflet/0.7.0/src/proj4leaflet.js"></script>

<div id="map"></div>

<script>
  /*
    create new Proj4Leaflet CRS:
    1. Proj4 and WKT definitions can be found at sites like http://epsg.io
    2. appropriate values to supply to the resolution and origin constructor options can be found in the ArcGIS Server RESTful tile server endpoint (ex: http://mapserv.utah.gov/arcgis/rest/services/BaseMaps/Terrain/MapServer)
  */
  var crs = new L.Proj.CRS('EPSG:26912', '+proj=utm +zone=12 +ellps=GRS80 +datum=NAD83 +units=m +no_defs', {
    origin: [-5120900, 9998100],
    resolutions: [
      4891.96999883583,
      2445.98499994708,
      1222.99250010583,
      611.496250052917,
      305.748124894166,
      152.8740625,
      76.4370312632292,
      38.2185156316146,
      19.1092578131615,
      9.55462890525781,
      4.77731445262891,
      2.38865722657904,
      1.19432861315723,
      0.597164306578613,
      0.298582153289307
    ]
  });

  var map = L.map('map', {
    crs: crs
  }).setView([40.381, -111.859], 5);

  /*
    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: 'http://mapserv.utah.gov/arcgis/rest/services/BaseMaps/Terrain/MapServer',
    maxZoom: 14,
    minZoom: 0,
    continuousWorld: true,
    attribution: 'State of Utah'
  }).addTo(map);
</script>

</body>
</html>