esri-leaflet

<!DOCTYPE html>      <html class="not-ie">  <head> <meta charset="utf-8"> <title>L.esri.Services.MapService | Esri Leaflet</title> <meta name="description" content="Esri Leaflet"> <meta name="viewport" content="width=device-width">   <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'>  <link rel="stylesheet" href="../../css/style.css">  <link rel="stylesheet" href="//cdn.jsdelivr.net/leaflet/0.7.7/leaflet.css" />  <script src="//cdn.jsdelivr.net/leaflet/0.7.7/leaflet.js"></script>  <script src="../../js/esri-leaflet-src.js"></script> <script src="//cdn.jsdelivr.net/jsdelivr-rum/latest/jsdelivr-rum.min.js"></script>  <script src="//localhost:35729/livereload.js"></script>  <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>  </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-services-mapservice">L.esri.Services.MapService</h1> <p>Inherits from <a href="../../api-reference/services/service.html"><code>L.esri.Service</code></a></p> <p><code>L.esri.Services.MapService</code> is an abstraction for interacting with Map Services running on ArcGIS Online and ArcGIS Server that allows you to make requests to the API, as well as query and identify published features.</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.Services.mapService(<nobr class="param"><span><Object></span> <code>options</code></nobr>)</code></td> <td><code>options</code> for configuring the ArcGIS Server or ArcGIS Online map service you would like to consume. <code>Options</code> includes a <code>url</code> parameter which refers to the ArcGIS Server or ArcGIS Online service you would like to consume.</td> </tr> </tbody> </table> <h3 id="options">Options</h3> <p><code>L.esri.Services.MapService</code> accepts all <a href="../../api-reference/services/service.html"><code>L.esri.Services.Service</code></a> options.</p> <h3 id="events">Events</h3> <p><code>L.esri.Services.MapService</code> fires all <a href="../../api-reference/services/service.html"><code>L.esri.Services.service</code></a> events.</p> <h3 id="methods">Methods</h3> <table> <thead> <tr> <th>Method</th> <th>Returns</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><code>query()</code></td> <td><code>this</code></td> <td> Returns a new <a href="../../api-reference/tasks/query.html"><code>L.esri.Tasks.Query</code></a> object that can be used to query this service. <pre class="js"><code>mapService.query() .layer(0) .within(latlngbounds) .run(function(error, featureCollection, response){ console.log(featureCollection); });</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.html"><code>L.esri.Tasks.Identify</code></a> object that can be used to identify features contained within this service. <pre class="js"><code>mapService.identify() .on(map) .at(latlng) .run(function(error, featureCollection, response){ console.log(featureCollection) });</code></pre> </td> </tr> <tr> <td><code>find()</code></td> <td><code>this</code></td> <td> Returns a new <a href="../../api-reference/tasks/find.html"><code>L.esri.Tasks.Find</code></a> object that can be used to find features by text. <pre class="js"><code>mapService.find() .layers('18') .text('Colorado') .fields('name') .run(function(error, featureCollection, response){ console.log(featureCollection) });</code></pre> </td> </tr> </tbody> </table> <h3 id="example">Example</h3> <h4 id="identify-task">Identify task</h4> <pre><code class="language-js"><span class="keyword">var</span> map = <span class="keyword">new</span> L.Map(<span class="string">'map'</span>).setView([ <span class="number">45.543</span>, -<span class="number">122.621</span> ], <span class="number">5</span>); <span class="keyword">var</span> service = L.esri.Services.mapService(<span class="string">'http://sampleserver6.arcgisonline.com/arcgis/rest/services/WorldTimeZones/MapServer'</span>); service.identify() .on(map) .at([<span class="number">45.543</span>, -<span class="number">122.621</span>]) .layers(<span class="string">'visible:1'</span>) .run(<span class="function"><span class="keyword">function</span><span class="params">(error, featureCollection, response)</span>{</span> console.log(<span class="string">"UTC Offset: "</span> + featureCollection.features[<span class="number">0</span>].properties.ZONE); });</code></pre> <h4 id="find-task">Find task</h4> <pre><code class="language-js"><span class="keyword">var</span> service = L.esri.Services.mapService({ url: <span class="string">'http://services.nationalmap.gov/arcgis/rest/services/govunits/MapServer'</span> }); service.find() .layers(<span class="string">'18'</span>) .searchText(<span class="string">'Colorado'</span>) .searchFields(<span class="string">'GNIS_NAME'</span>) .run(<span class="function"><span class="keyword">function</span><span class="params">(error, featureCollection, response)</span>{</span> console.log(<span class="string">'Found GNIS ID: '</span> + featureCollection.features[<span class="number">0</span>].properties.GNIS_ID + <span class="string">' for the state of '</span> + featureCollection.features[<span class="number">0</span>].properties.STATE_NAME); });</code></pre> <p><a href="http://github.com/esri/esri-leaflet/edit/master/site/source/pages/api-reference/services/map-service.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>