esri-leaflet
Version:
Leaflet plugins for consuming ArcGIS Online and ArcGIS Server services.
219 lines (188 loc) • 10.3 kB
HTML
<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]> <html class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class="not-ie"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<title>L.esri.Layers.TiledMapLayer | Esri Leaflet</title>
<meta name="description" content="Esri Leaflet">
<meta name="viewport" content="width=device-width">
<!--[if lt IE 9]>
<script src="//cdn.jsdelivr.net/html5shiv/3.7.2/html5shiv-printshiv.js"></script>
<![endif]-->
<!-- google fonts -->
<link href='//fonts.googleapis.com/css?family=Vollkorn:400italic,700italic,400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="//brick.a.ssl.fastly.net/Source+Code+Pro:300">
<link href='//fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<!-- stylesheet -->
<link rel="stylesheet" href="../../css/style.css">
<!-- leaflet -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/leaflet/0.7.7/leaflet.css" />
<!-- require combined leaflet, esri leaflet and jsdelivr-rum -->
<script src="//cdn.jsdelivr.net/leaflet/0.7.7/leaflet.js"></script>
<!--script src="//cdn.jsdelivr.net/leaflet.esri/1.0.3/esri-leaflet.js"></script-->
<script src="../../js/esri-leaflet-src.js"></script>
<script src="//cdn.jsdelivr.net/jsdelivr-rum/latest/jsdelivr-rum.min.js"></script>
<!-- 'livereload' for development -->
<script src="//localhost:35729/livereload.js"></script>
<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-44963317-3', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->
</head>
<body>
<div class="page-content ">
<div class="container">
<a class="site-nav" href="../../" class="left logo">Esri Leaflet</a>
<nav class="right">
<a class="site-nav" href="../../examples/">Examples</a>
<a class="site-nav" href="../../api-reference/">API Reference</a>
<a class="site-nav" href="../../download/">Download</a>
<a class="site-nav" href="https://github.com/Esri/esri-leaflet">View on GitHub</a>
</nav>
</div>
<div id="background-map" class="background-map"></div>
<div class="container white">
<aside class="sidebar">
<h5>L.esri.Layers</h5>
<nav>
<a href="../../api-reference/layers/basemap-layer.html">BasemapLayer</a>
<a href="../../api-reference/layers/feature-layer.html">FeatureLayer</a>
<a href="../../api-reference/layers/tiled-map-layer.html">TiledMapLayer</a>
<a href="../../api-reference/layers/dynamic-map-layer.html">DynamicMapLayer</a>
<a href="../../api-reference/layers/image-map-layer.html">ImageMapLayer</a>
<a href="../../api-reference/layers/clustered-feature-layer.html">ClusteredFeatureLayer</a>
<a href="../../api-reference/layers/heatmap-feature-layer.html">HeatmapFeatureLayer</a>
</nav>
<h5>L.esri.Tasks</h5>
<nav>
<a href="../../api-reference/tasks/query.html">Query</a>
<a href="../../api-reference/tasks/find.html">Find</a>
<a href="../../api-reference/tasks/identify-features.html">Identify Features</a>
<a href="../../api-reference/tasks/identify-image.html">Identify Image</a>
<a href="../../api-reference/tasks/task.html">Task</a>
</nav>
<h5>Misc.</h5>
<nav>
<a href="../../api-reference/request.html">Request</a>
<a href="../../api-reference/util.html">Util</a>
<a href="../../api-reference/events.html">Events</a>
</nav>
<h5>Base Classes</h5>
<nav>
<a href="../../api-reference/services/image-service.html">ImageService</a>
<a href="../../api-reference/services/feature-layer.html">FeatureLayerService</a>
<a href="../../api-reference/services/map-service.html">MapService</a>
<a href="../../api-reference/services/service.html">Service</a>
</nav>
</aside>
<div class="main-content">
<h1 id="l-esri-layers-tiledmaplayer">L.esri.Layers.TiledMapLayer</h1>
<p>Inherits from <a href="http://leafletjs.com/reference.html#tilelayer"><code>L.TileLayer</code></a></p>
<p>Access tiles from ArcGIS Online and ArcGIS Server as well as visualize and identify features.</p>
<p>Is you have Feature Services published in ArcGIS Online you can create a static set of tiles using your Feature Service. You can find details about that process in the <a href="http://doc.arcgis.com/en/arcgis-online/share-maps/publish-tiles.htm#ESRI_SECTION1_F68FCBD33BD54117B23232D41A762E89">ArcGIS Online Help</a></p>
<p><strong>Your map service must be published using the Web Mercator Auxiliary Sphere tiling scheme (WKID 102100/3857) and the default scale options used by Google Maps, Bing Maps and <a href="http://resources.arcgis.com/en/help/arcgisonline-content/index.html#//011q00000002000000">ArcGIS Online</a>. Esri Leaflet will not support any other spatial reference for tile layers.</strong></p>
<h3 id="constructor">Constructor</h3>
<table>
<thead>
<tr>
<th>Constructor</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code class="nobr">L.esri.tiledMapLayer(<nobr class="param"><span><Object></span> <code>options</code></nobr>)</code></td>
<td>The <code>options</code> parameter can accept the same options as <a href="http://leafletjs.com/reference.html#tilelayer"><code>L.ImageOverlay</code></a>. You also must pass a <code>url</code> key in your <code>options</code>.</td>
</tr>
</tbody>
</table>
<h3 id="options">Options</h3>
<p><code>L.esri.TiledMapLayer</code> also accepts all <a href="http://leafletjs.com/reference.html#tilelayer-options"><code>L.TileLayer</code></a> options.</p>
<table>
<thead>
<tr>
<th>Option</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
<p><code>url</code> | <code>String</code> | | <em>Required</em> URL of the <a href="http://resources.arcgis.com/en/help/arcgis-rest-api/#/Map_Service/02r3000000w2000000">Map Service</a> with a tile cache.
| <code>correctZoomLevels</code> | <code>Boolean</code> | <code>true</code> | If your tiles were generated in web mercator but at non-standard zoom levels this will remap then to the standard zoom levels.
| <code>zoomOffsetAllowance</code> | <code>Number</code> | <code>0.1</code> | If <code>correctZoomLevels</code> is enabled this controls the amount of tolerance if the difference at each scale level for remapping tile levels.
| <code>proxy</code> | <code>String</code> | <code>false</code> | URL of an <a href="https://developers.arcgis.com/javascript/jshelp/ags_proxy.html">ArcGIS API for JavaScript proxy</a> or <a href="https://github.com/Esri/resource-proxy">ArcGIS Resource Proxy</a> to use for proxying POST requests. |
| <code>useCors</code> | <code>Boolean</code> | <code>true</code> | Dictates if the service should use CORS when making GET requests. |
| <code>token</code> | <code>String</code> | <code>null</code> | Will use this token to authenticate all calls to the service.</p>
<h3 id="methods">Methods</h3>
<p><code>L.esri.BasemapLayer</code> inherits all methods from <a href="http://leafletjs.com/reference.html#tilelayer"><code>L.TileLayer</code></a>.</p>
<table>
<thead>
<tr>
<th>Method</th>
<th>Returns</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>authenticate(<String> token)</code></td>
<td><code>this</code></td>
<td>Authenticates this service with a new token and runs any pending requests that required a token.</td>
</tr>
<tr>
<td><code>metadata(<Function> callback, <Object> context)</code></td>
<td><code>this</code></td>
<td>
Requests metadata about this Feature Layer. Callback will be called with <code>error</code> and <code>metadata</code>.
<pre class="js"><code>featureLayer.metadata(function(error, metadata){
console.log(metadata);
});</code></pre>
</td>
</tr>
<tr>
<td><code>identify()</code></td>
<td><code>this</code></td>
<td>
Returns a new <a href="/api-reference/tasks/identify-features.html"><code>L.esri.services.IdentifyFeatures</code></a> object that can be used to identify features on this layer. Your callback function will be passed a GeoJSON FeatureCollection with the results or an error.
<pre class="js"><code>featureLayer.identify()
.at(latlng, latlngbounds, 5)
.run(function(error, featureCollection){
console.log(featureCollection);
});</code></pre>
</td>
</tr>
</tbody>
</table>
<h3 id="events">Events</h3>
<p><code>L.esri.TiledMapLayer</code> fires all <a href="http://leafletjs.com/reference.html#tilelayer"><code>L.TileLayer</code></a> events.</p>
<h3 id="example">Example</h3>
<pre><code class="language-js"><span class="keyword">var</span> map = L.map(<span class="string">'map'</span>).setView([<span class="number">37.7614</span>, -<span class="number">122.3911</span>], <span class="number">12</span>);
L.esri.tiledMapLayer(<span class="string">"http://services.arcgisonline.com/ArcGIS/rest/services/USA_Topo_Maps/MapServer"</span>, {
maxZoom: <span class="number">15</span>
}).addTo(map);</code></pre>
<p><a href="http://github.com/esri/esri-leaflet/edit/master/site/source/pages/api-reference/layers/tiled-map-layer.md">Edit this page on GitHub</a></p>
</div>
<div style='clear:both;'></div>
</div>
<div class="container centered-text">
<p class="copyright">Esri Leaflet is a project from the <a href="http://pdx.esri.com">Esri PDX R&D Center</a> and the <a href="https://github.com/Esri/esri-leaflet/graphs/contributors">Esri Community</a></p>
</div>
</div>
<script src="../../js/script.js"></script>
</body>
</html>