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

ConstructorDescription
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.

OptionTypeDefaultDescription
urlStringRequired URL of the Image Service.
formatString'jpegpng'Output format of the image.
fString'image'Server response content type "json" | "image".
opacityNumber1Opacity of the layer. Should be a value between 0 and 1.
paneStringoverlayPaneThe map pane to render on. This is the preferred technique to control draw order in Leaflet 1.x.
zIndexNumberUsed to refine draw order further (within a map pane).
positionString'front'Legacy option to control draw order. For best results, use pane.
maxZoomNumberClosest zoom level the layer will be displayed on the map.
minZoomNumberFurthest zoom level the layer will be displayed on the map.
bandIdsStringIf there are multiple bands, you can specify which bands to export.
noDataNumberThe pixel value representing no information.
noDataInterpretationStringInterpretation of the noData setting.
pixelTypeStringLeave 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.
renderingRuleObjectA JSON representation of a raster function
mosaicRuleObjectA JSON representation of a mosaic rule
tokenStringIf you pass a token in your options it will be included in all requests to the service.
proxyStringfalseURL of an ArcGIS API for JavaScript proxies or ArcGIS Resource Proxies to use for proxying POST requests.
useCorsBooleantrueIf this service should use CORS when making GET requests.
toDateUsed to filter what is drawn from the service based on a time range.
fromDateUsed to filter what is drawn from the service based on a time range.

Methods

MethodReturnsDescription
bringToBack()thisRedraws this layer below all other overlay layers.
bringToFront()thisRedraws 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()thisRemoves a popup previously bound with bindPopup.
getOpacity()FloatReturns the current opacity of the layer.
setOpacity(<Float> opacity)thisSets the opacity of the layer.
getTimeRange()ArrayReturns the current time range being used for rendering.
setTimeRange(<Date> from, <Date> to)thisRedraws the layer with the passed time range.
getBandIds()StringReturns the current band value(s).
setBandIds(<Array> bandIdsor <String> bandIds)thisSpecify a single band to export, or you can change the band combination (red, green, blue) by specifying the band number.
getNoData()StringReturns the current no data value.
setNoData(<Array> noData or <Number> noData, <String> noDataInterpretation)thisSpecify 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()StringReturns the current no data interpretation value.
getPixelType()StringReturns the current pixel type.
setPixelType(<String> pixelType)thisThe 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)thisAuthenticates 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()ObjectReturns the current rendering rule of the layer.
setRenderingRule(<Object> renderingRule)thisRedraws the layer with the passed rendering rule.
getMosaicRule()ObjectReturns the current mosaic rule of the layer.
setMosaicRule(<Object> mosaicRule)thisRedraws the layer with the passed mosaic rule.
redraw()Used to make a fresh request to the service and draw the response.

Events

EventDataDescription
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

Use dark colors for code blocksCopy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
var map = L.map('map').setView([38.83, -98.5], 7);

L.esri.Vector.vectorBasemapLayer("arcgis/streets", {
  token: "YOUR_ACCESS_TOKEN"
}).addTo(map);

var url = 'https://modis.arcgis.com/arcgis/rest/services/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 band Ids property

Use dark colors for code blocksCopy
1
2
3
4
5
6
7
8
9
10
11
12
var map = L.map('map').setView([43.50, -120.23], 7);

L.esri.Vector.vectorBasemapLayer("arcgis/streets", {
  token: "YOUR_ACCESS_TOKEN"
}).addTo(map);

L.esri.imageMapLayer({
    url: 'https://naip.arcgis.com/arcgis/rest/services/NAIP/ImageServer'
})
.setBandIds('3,0,1')
.addTo(map);
`

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.