L.esri.ImageMapLayer

Extends L.esri.RasterLayer

Render and visualize Image Services from ArcGIS Online and ArcGIS Server.

Image Services provide access to raster data through a web service.

Constructor

Constructor Description
L.esri.imageMapLayer(<Object> options) The options parameter can accept the same options as L.ImageOverlay. You also must pass a url key in your options.

Options

L.esri.ImageMapLayer also accepts all the options you can pass to L.ImageOverlay.

Option Type Default Description
url String Required URL of the Image Service.
format String 'jpegpng' Output format of the image.
f String 'image' Server response content type "json" | "image".
opacity Number 1 Opacity of the layer. Should be a value between 0 and 1.
pane String overlayPane The map pane to render on. This is the preferred technique to control draw order in Leaflet 1.x.
zIndex Number Used to refine draw order further (within a map pane).
position String 'front' Legacy option to control draw order. For best results, use pane.
maxZoom Number Closest zoom level the layer will be displayed on the map.
minZoom Number Furthest zoom level the layer will be displayed on the map.
bandIds String If there are multiple bands, you can specify which bands to export.
noData Number The pixel value representing no information.
noDataInterpretation String Interpretation of the noData setting.
pixelType String Leave pixelType as unspecified, or UNKNOWN, in most exportImage use cases, unless such pixelType is desired. Possible values: C128, C64, F32, F64, S16, S32, S8, U1, U16, U2, U32, U4, U8, UNKNOWN.
renderingRule Object A JSON representation of a raster function
mosaicRule Object A JSON representation of a mosaic rule
token String If you pass a token in your options it will be included in all requests to the service.
proxy String false URL of an ArcGIS API for JavaScript proxies or ArcGIS Resource Proxies to use for proxying POST requests.
useCors Boolean true If this service should use CORS when making GET requests.
to Date Used to filter what is drawn from the service based on a time range.
from Date Used to filter what is drawn from the service based on a time range.

Methods

Method Returns Description
bringToBack() this Redraws this layer below all other overlay layers.
bringToFront() this Redraws this layer above all other overlay layers.
bindPopup(<Function> fn, <PopupOptions> popupOptions) this 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 pixel property that is a GeoJSON Point 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 false.

imageMapLayer.bindPopup(
  function(err, identifyResults, response){
    var value = results.pixel.properties.value;
    return (value) ? 'Pixel value: ' + value : false;
  });
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 NOT 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 L.esri.IdentifyImage.
unbindPopup() this Removes a popup previously bound with bindPopup.
getOpacity() Float Returns the current opacity of the layer.
setOpacity(<Float> opacity) this Sets the opacity of the layer.
getTimeRange() Array Returns the current time range being used for rendering.
setTimeRange(<Date> from, <Date> to) this Redraws the layer with the passed time range.
getBandIds() String Returns the current band value(s).
setBandIds(<Array> bandIds or <String> bandIds) this Specify a single band to export, or you can change the band combination (red, green, blue) by specifying the band number.
getNoData() String Returns the current no data value.
setNoData(<Array> noData or <Number> noData, <String> noDataInterpretation) this Specify a single value, or an array of values to treat as no data. No data will values will be rendered transparent.
The optional noDataInterpretation can be either esriNoDataMatchAny | esriNoDataMatchAll. The default is esriNoDataMatchAny when noData is a number, and esriNoDataMatchAll when noData is an array. See Image Service Export Image documentation for more details
getNoDataInterpretation() String Returns the current no data interpretation value.
getPixelType() String Returns the current pixel type.
setPixelType(<String> pixelType) this 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: C128, C64, F32, F64, S16, S32, S8, U1, U16, U2, U32, U4, U8, UNKNOWN.
authenticate(<String> token) this Authenticates this service with a new token and runs any pending requests that required a token.
metadata(<Function> callback, <Object> context) this Requests metadata about this Feature Layer. Callback will be called with error and metadata.
featureLayer.metadata(function(error, metadata){
  console.log(metadata);
});
query() this Returns a new L.esri.Query object that can be used to query this service.

imageService.query()
  .within(latlngbounds)
  .run(function(error, featureCollection, response){
    console.log(featureCollection);
});
getRenderingRule() Object Returns the current rendering rule of the layer.
setRenderingRule(<Object> renderingRule) this Redraws the layer with the passed rendering rule.
getMosaicRule() Object Returns the current mosaic rule of the layer.
setMosaicRule(<Object> mosaicRule) this Redraws the layer with the passed mosaic rule.
redraw() Used to make a fresh request to the service and draw the response.

Events

Event Data Description
loading <LoadingEvent> Fires when new features start loading.
load <LoadEvent> Fires when all features in the current bounds of the map have loaded.

L.esri.ImageMapLayer also fires all L.esri.ImageService events.

Example

Simple Image Layer

var map = L.map('map').setView([38.83, -98.5], 7);

L.esri.basemapLayer('Gray').addTo(map);

var url = 'https://sampleserver3.arcgisonline.com/ArcGIS/rest/services/World/MODIS/ImageServer';

L.esri.imageMapLayer({
  url: url,
  opacity: 0.25,
  // only necessary for old versions of ArcGIS Server
  useCors: false
}).addTo(map);

Infrared image layer using bandIds property

var map = L.map('map').setView([43.50, -120.23], 7);

L.esri.basemapLayer('Imagery').addTo(map);

L.esri.imageMapLayer({
  url: 'https://ihttmagery.oregonexplorer.info/arcgis/rest/services/NAIP_2011/NAIP_2011_Dynamic/ImageServer'
})
  .setBandIds('3,0,1')
  .addTo(map);

Edit this page on GitHub