UNPKG

esri-leaflet

Version:

Leaflet plugins for consuming ArcGIS Online and ArcGIS Server services.

258 lines (230 loc) 11.2 kB
<!DOCTYPE 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>Request | 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-request">L.esri.Request</h1> <p>Generic methods for GET and POST requests to ArcGIS Online or ArcGIS Server resources. These methods will handle serializing the input parameters and parsing of the response, making them available in a callback function via a response and error property similar to Node JS.</p> <p>GET requests will be made with <code>XMLHttpRequest</code> (via CORS) if the browser supports it and will fallback to JSONP. POST requests will always be made with <code>XMLHttpRequest</code> (via CORS) but the <a href="https://developers.arcgis.com/javascript/jshelp/ags_proxy.html">ArcGIS API for JavaScript proxy</a> and the <a href="https://github.com/Esri/resource-proxy">ArcGIS Resource Proxy</a> are support via <a href="../api-reference/services/service.html"><code>L.esri.Services.Service</code></a>.</p> <p>If you are using a version of ArcGIS Server before 10.1 your server does not support CORS by default. Either enable CORS support on your server, documentation is available at <a href="http://enable-cors.org/">http://enable-cors.org/</a>. If you cannot or do not want to enable CORS on your server the following code will make all requests utilize JSONP.</p> <pre><code class="language-js">L.esri.get = L.esri.Request.get.JSONP;</code></pre> <h3 id="l-esri-request-url-params-callback-">L.esri.request(url, params, callback);</h3> <p>Executues a GET or POST via <code>XMLHttpRequest</code> or JSONP request depending on the capabilities of the browser and the length of the request. GET is used when the browser supports CORS and the request url is less then 2000 characters. POST is used when the browser supports CORS and the request exceeds 2000 characters. JSONP is used when the request is less then 2000 characters and the browser does not support CORS.</p> <h4 id="params">Params</h4> <table> <thead> <tr> <th>Param</th> <th>Value</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><code>url</code></td> <td><code>String</code></td> <td>The URL to request.</td> </tr> <tr> <td><code>params</code></td> <td><code>Object</code></td> <td>The parameters to send as a query string.</td> </tr> <tr> <td><code>callback</code></td> <td><code>Function</code></td> <td>Function to run when the request completes, will be passed an <code>error</code> and <code>response</code>.</td> </tr> <tr> <td><code>context</code></td> <td><code>Object</code></td> <td>Optional function context for the callback.</td> </tr> </tbody> </table> <h4 id="example">Example</h4> <pre><code class="language-js">L.esri.request(<span class="string">'http://services.arcgis.com/rOo16HdIMeOBI4Mb/arcgis/rest/services/Heritage_Trees_Portland/FeatureServer/0'</span>, {}, <span class="function"><span class="keyword">function</span><span class="params">(error, response)</span>{</span> <span class="keyword">if</span>(error){ console.log(error); } <span class="keyword">else</span> { console.log(response.name); } });</code></pre> <h3 id="l-esri-get-url-params-callback-">L.esri.get(url, params, callback)</h3> <p>Execute a GET request via `XMLHttpRequest&#39; (via CORS) or JSON depending on what is available in the browser.</p> <p><strong>Note</strong>: ArcGIS Server before 10.1 does not have CORS support enabled by default. You can either enable CORS on your server or tell Esri Leaflet to always make JSONP requests with <code>L.esri.get = L.esri.Request.get.JSONP;</code> After you load Esri leaflet, but before calling your own scripts.</p> <h4 id="params">Params</h4> <table> <thead> <tr> <th>Param</th> <th>Value</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><code>url</code></td> <td><code>String</code></td> <td>The URL to request.</td> </tr> <tr> <td><code>params</code></td> <td><code>Object</code></td> <td>The parameters to send as a query string.</td> </tr> <tr> <td><code>callback</code></td> <td><code>Function</code></td> <td>Function to run when the request completes, will be passed <code>error</code> and <code>response</code>.</td> </tr> <tr> <td><code>context</code></td> <td><code>Object</code></td> <td>Optional function context for the callback.</td> </tr> </tbody> </table> <h4 id="example">Example</h4> <pre><code class="language-js">L.esri.get(<span class="string">'http://services.arcgis.com/rOo16HdIMeOBI4Mb/arcgis/rest/services/Heritage_Trees_Portland/FeatureServer/0'</span>, {}, <span class="function"><span class="keyword">function</span><span class="params">(error, response)</span>{</span> <span class="keyword">if</span>(error){ console.log(error); } <span class="keyword">else</span> { console.log(response.name); } });</code></pre> <h3 id="l-esri-post-url-params-callback-">L.esri.post(url, params, callback)</h3> <p>Execute a POST request via `XMLHttpRequest&#39; (via CORS).</p> <p>This request is made via <code>XMLHttpRequest</code> which cannot make cross domain requests in IE 8 and 9. Esri Leaflet supports both the <a href="https://developers.arcgis.com/javascript/jshelp/ags_proxy.html">ArcGIS API for JavaScript proxy</a> and the <a href="https://github.com/Esri/resource-proxy">ArcGIS Resource Proxy</a> which can be hosted on your server and used with the <a href="../api-reference/services/service.html"><code>L.esri.Services.Service</code></a> classes to work around this issue.</p> <table> <thead> <tr> <th>Param</th> <th>Value</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><code>url</code></td> <td><code>String</code></td> <td>The URL to request.</td> </tr> <tr> <td><code>params</code></td> <td><code>Object</code></td> <td>The parameters to send as a query string.</td> </tr> <tr> <td><code>callback</code></td> <td><code>Function</code></td> <td>Function to run when the request completes, will be passed <code>error</code> and <code>response</code>.</td> </tr> <tr> <td><code>context</code></td> <td><code>Object</code></td> <td>Optional function context for the callback.</td> </tr> </tbody> </table> <h4 id="example">Example</h4> <pre><code class="language-js">L.esri.post(<span class="string">'http://services.arcgis.com/rOo16HdIMeOBI4Mb/arcgis/rest/services/Heritage_Trees_Portland/FeatureServer/0'</span>, {}, <span class="function"><span class="keyword">function</span><span class="params">(error, response)</span>{</span> <span class="keyword">if</span>(error){ console.log(error); } <span class="keyword">else</span> { console.log(response.name); } });</code></pre> <p><a href="http://github.com/esri/esri-leaflet/edit/master/site/source/pages/api-reference/request.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&amp;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>