esri-leaflet

<!DOCTYPE html>      <html class="not-ie">  <head> <meta charset="utf-8"> <title>L.esri.Layers.ImageMapLayer | 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-layers-imagemaplayer">L.esri.Layers.ImageMapLayer</h1>  <p>Render and visualize Image Services from ArcGIS Online and ArcGIS Server.</p> <p>Image Services provide access to raster data through a web service.</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.imageMapLayer(<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#imageoverlay"><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.ImageMapLayer</code> also accepts all the options you can pass to <a href="http://leafletjs.com/reference.html#imageoverlay"><code>L.ImageOverlay</code></a>.</p> <table> <thead> <tr> <th>Option</th> <th>Type</th> <th>Default</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><code>url</code></td> <td><code>String</code></td> <td></td> <td><em>Required</em> URL of the <a href="http://resources.arcgis.com/en/help/arcgis-rest-api/#/Image_Service/02r3000000q8000000/">Image Service</a>.</td> </tr> <tr> <td><code>format</code></td> <td><code>String</code></td> <td><code>'jpegpng'</code></td> <td>Output format of the image.</td> </tr> <tr> <td><code>f</code></td> <td><code>String</code></td> <td><code>'image'</code></td> <td>Server response content type.</td> </tr> <tr> <td><code>opacity</code></td> <td><code>Number</code></td> <td><code>1</code></td> <td>Opacity of the layer. Should be a value between 0 and 1.</td> </tr> <tr> <td><code>position</code></td> <td><code>String</code></td> <td><code>'front'</code></td> <td>Position of the layer relative to other overlays.</td> </tr> <tr> <td><code>proxy</code></td> <td><code>String</code></td> <td><code>false</code></td> <td>URL of an <a href="https://developers.arcgis.com/javascript/jshelp/ags_proxy.html">ArcGIS API for JavaScript proxies</a> or <a href="https://github.com/Esri/resource-proxy">ArcGIS Resource Proxies</a> to use for proxying POST requests.</td> </tr> <tr> <td><code>bandIds</code></td> <td><code>String</code></td> <td><code>undefined</code></td> <td>If there are multiple bands, you can specify which bands to export.</td> </tr> <tr> <td><code>noData</code></td> <td><code>Number</code></td> <td><code>undefined</code></td> <td>The pixel value representing no information.</td> </tr> <tr> <td><code>noDataInterpretation</code></td> <td><code>String</code></td> <td><code>undefined</code></td> <td>Interpretation of the <code>noData</code> setting.</td> </tr> <tr> <td><code>pixelType</code></td> <td><code>String</code></td> <td><code>undefined</code></td> <td>Leave <code>pixelType</code> as unspecified, or <code>UNKNOWN</code>, in most exportImage use cases, unless such <code>pixelType</code> is desired. Possible values: <code>C128</code>, <code>C64</code>, <code>F32</code>, <code>F64</code>, <code>S16</code>, <code>S32</code>, <code>S8</code>, <code>U1</code>, <code>U16</code>, <code>U2</code>, <code>U32</code>, <code>U4</code>, <code>U8</code>, <code>UNKNOWN</code>.</td> </tr> <tr> <td><code>useCors</code></td> <td><code>Boolean</code></td> <td><code>true</code></td> <td>If this service should use CORS when making GET requests.</td> </tr> <tr> <td><code>renderingRule</code></td> <td><code>Object</code></td> <td><code>undefined</code></td> <td>A JSON representation of a <a href="http://resources.arcgis.com/en/help/arcgis-rest-api/#/Raster_function_objects/02r3000000rv000000/">raster function</a></td> </tr> <tr> <td><code>mosaicRule</code></td> <td><code>Object</code></td> <td><code>undefined</code></td> <td>A JSON representation of a <a href="http://resources.arcgis.com/en/help/arcgis-rest-api/#/Mosaic_rule_objects/02r3000000s4000000/">mosaic rule</a></td> </tr> </tbody> </table> <h3 id="methods">Methods</h3> <table> <thead> <tr> <th>Method</th> <th>Returns</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><code>bringToBack()</code></td> <td><code>this</code></td> <td>Redraws this layer below all other overlay layers.</td> </tr> <tr> <td><code>bringToFront()</code></td> <td><code>this</code></td> <td>Redraws this layer above all other overlay layers.</td> </tr> <tr> <td><code>bindPopup(<nobr class="param"><span><Function></span> <code>fn</code></nobr>, <nobr class="param"><span><<a href="http://leafletjs.com/reference.html#popup-options">PopupOptions</a>></span> <code>popupOptions</code></nobr>)</code></td> <td><code>this</code></td> <td> Uses the provided function to create a popup that will identify pixel value(s) whenever the map is clicked. Your function will be passed an object with a <code>pixel</code> property that is a <a href="http://geojson.org/geojson-spec.html#point">GeoJSON Point</a> with the pixel value(s) at the clicked location and should return the appropriate HTML. If you do not want to open the popup when there are no results, return <code>false</code>. <pre class="js"><code> imageMapLayer.bindPopup( function(err, identifyResults, response){ var value = results.pixel.properties.value; return (value) ? 'Pixel value: ' + value : false; });</code></pre> NOTE: by default, if the layer has a mosaic rule applied, then the same rule will be applied to the identify request. Conversely, if the layer has a rendering rule applied, that rule is <strong>NOT</strong> applied to the layer so that that the raw pixel value can be returned. If you need specific control over how these rules (and/or other identify parameters) are passed to the identify service, use <a href="../../api-reference/tasks/identify-image.html"><code>L.esri.Tasks.IdentifyImage</code></a>. </td> </tr> <tr> <td><code>unbindPopup()</code></td> <td><code>this</code></td> <td>Removes a popup previously bound with <code>bindPopup</code>.</td> </tr> <tr> <td><code>getOpacity()</code></td> <td><code>Float</code></td> <td>Returns the current opacity of the layer.</td> </tr> <tr> <td><code>setOpacity(<nobr class="param"><span><Float></span> <code>opacity</code></nobr>)</code></td> <td><code>this</code></td> <td>Sets the opacity of the layer.</td> </tr> <tr> <td><code>getTimeRange()</code></td> <td><code>Array</code></td> <td>Returns the current time range being used for rendering.</td> </tr> <tr> <td><code>setTimeRange(<nobr class="param"><span><Date></span> <code>from</code></nobr>, <nobr class="param"><span><Date></span> <code>to</code></nobr>)</code></td> <td><code>this</code></td> <td>Redraws the layer with the passed time range.</td> </tr> <tr> <td><code>getBandIds()</code></td> <td><code>String</code></td> <td>Returns the current band value(s).</td> </tr> <tr> <td><code>setBandIds(<nobr class="param"><span><Array></span> <code>bandIds</code></nobr> or <nobr class="param"><span><String></span> <code>bandIds</code></nobr>)</code></td> <td><code>this</code></td> <td>Specify a single band to export, or you can change the band combination (red, green, blue) by specifying the band number.</td> </tr> <tr> <td><code>getNoData()</code></td> <td><code>String</code></td> <td>Returns the current no data value.</td> </tr> <tr> <td><code>setNoData(<nobr class="param"><span><Array></span> <code>noData</code></nobr> or <nobr class="param"><span><Number></span> <code>noData</code></nobr>, <nobr class="param"><span><String></span> <code>noDataInterpretation</code></nobr>)</code></td> <td><code>this</code></td> <td>Specify a single value, or an array of values to treat as no data. No data will values will be rendered transparent.<br />The optional <code>noDataInterpretation</code> can be either <code>esriNoDataMatchAny</code> | <code>esriNoDataMatchAll</code>. The default is <code>esriNoDataMatchAny</code> when <code>noData</code> is a number, and <code>esriNoDataMatchAll</code> when noData is an array. See <a href="http://resources.arcgis.com/en/help/arcgis-rest-api/#/Export_Image/02r3000000wm000000/">Image Service Export Image documentation</a> for more details</td> </tr> <tr> <td><code>getNoDataInterpretation()</code></td> <td><code>String</code></td> <td>Returns the current no data interpretation value.</td> </tr> <tr> <td><code>getPixelType()</code></td> <td><code>String</code></td> <td>Returns the current pixel type.</td> </tr> <tr> <td><code>setPixelType(<nobr class="param"><span><String></span> <code>pixelType</code></nobr>)</code></td> <td><code>this</code></td> <td>The pixel type, also known as data type, pertains to the type of values stored in the raster, such as signed integer, unsigned integer, or floating point. Possible values: <code>C128</code>, <code>C64</code>, <code>F32</code>, <code>F64</code>, <code>S16</code>, <code>S32</code>, <code>S8</code>, <code>U1</code>, <code>U16</code>, <code>U2</code>, <code>U32</code>, <code>U4</code>, <code>U8</code>, <code>UNKNOWN</code>.</td> </tr> <tr> <td><code>authenticate(<nobr class="param"><span><String></span> <code>token</code></nobr>)</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(<nobr class="param"><span><Function></span> <code>callback</code></nobr>, <nobr class="param"><span><Object></span> <code>context</code></nobr>)</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>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> imageService.query() .within(latlngbounds) .run(function(error, featureCollection, response){ console.log(featureCollection); });</code></pre> </td> </tr> <tr> <td><code>getRenderingRule()</code></td> <td><code>Object</code></td> <td>Returns the current rendering rule of the layer.</td> </tr> <tr> <td><code>setRenderingRule(<nobr class="param"><span><Object></span> <code>renderingRule</code></nobr>)</code></td> <td><code>this</code></td> <td>Redraws the layer with the passed rendering rule.</td> </tr> <tr> <td><code>getMosaicRule()</code></td> <td><code>Object</code></td> <td>Returns the current mosaic rule of the layer.</td> </tr> <tr> <td><code>setMosaicRule(<nobr class="param"><span><Object></span> <code>mosaicRule</code></nobr>)</code></td> <td><code>this</code></td> <td>Redraws the layer with the passed mosaic rule.</td> </tr> </tbody> </table> <h3 id="events">Events</h3> <table> <thead> <tr> <th>Event</th> <th>Data</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><code>loading</code></td> <td><a href="../../api-reference/events.html#loading-event"><<code>LoadingEvent</code>></a></td> <td>Fires when new features start loading.</td> </tr> <tr> <td><code>load</code></td> <td><a href="../../api-reference/events.html#load-event"><<code>LoadEvent</code>></a></td> <td>Fires when all features in the current bounds of the map have loaded.</td> </tr> </tbody> </table> <p><code>L.esri.Layers.ImageMapLayer</code> also fires all <a href="../../api-reference/services/image-service.html"><code>L.esri.Services.ImageService</code></a> events.</p> <h3 id="example">Example</h3> <h4 id="simple-image-layer">Simple Image Layer</h4> <pre><code class="language-js"><span class="keyword">var</span> map = L.map(<span class="string">'map'</span>).setView([ <span class="number">38.83</span>,-<span class="number">98.5</span>], <span class="number">7</span>); L.esri.basemapLayer(<span class="string">'Gray'</span>).addTo(map); <span class="keyword">var</span> url = <span class="string">"http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/World/MODIS/ImageServer"</span>; L.esri.imageMapLayer(url, { opacity : <span class="number">0.25</span> }).addTo(map);</code></pre> <h4 id="infrared-image-layer-using-bandids-property">Infrared image layer using bandIds property</h4> <pre><code class="language-js"><span class="keyword">var</span> map = L.map(<span class="string">'map'</span>).setView([<span class="number">43.50</span>, -<span class="number">120.23</span>], <span class="number">7</span>); L.esri.basemapLayer(<span class="string">'Imagery'</span>).addTo(map); L.esri.imageMapLayer(<span class="string">'http://imagery.oregonexplorer.info/arcgis/rest/services/NAIP_2011/NAIP_2011_Dynamic/ImageServer'</span>) .setBandIds(<span class="string">'3,0,1'</span>) .addTo(map);</code></pre> <p><a href="http://github.com/esri/esri-leaflet/edit/master/site/source/pages/api-reference/layers/image-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>