ArcGIS Image Services and Leaflet

I’ve become a big fan of Leaflet for putting maps on the web. It gives me most of what I need without much of what I don’t and is fairly easily extended, as shown by the impressive work of Jason Sanford.

A while back, Dave Bouwman blogged about work he and the team at DTS Agile had done extending Leaflet to support ArcGIS Server layers. Given that there are a lot of ArcGIS Servers out there, this is a good thing to have. Thanks to section 4(f) of the Esri Web Services Terms of Use, it’s less useful for use with ArcGIS Online, but that’s probably the topic of another post.

I recently had the need to use an ArcGIS Server image service with a Leaflet app. Specifically, I was using the USGS NAIP image service. This service is available as a WMS, which works perfectly well with Leaflet, but I needed to take advantage of some of the capabilities of the Esri service, such being able to set the interpolation method.

The API signature for interacting with an image service is somewhat different from that of a dynamic map service with ArcGIS Server so I took the DTS AgsDynamicLayer class and modified to an AgsImageLayer class. Because the image service does some raster operations on the fly, it can be a little slower than a standard tiled or dynamic service. As a result, I’d recommend only going this route if you need to allow your users to fiddle with some options. For most production web-mapping applications, you’ll probably want to stick with tiles.

It seemed kind of silly to fork the DTS code for one class so I sent it to Dave, who was gracious enough to accept it. Thanks to DTS for their work, which made my life much easier. Since they have day jobs, too, I’m not sure when it will appear so I thought I’d post it here as well in case someone may find it useful. Most of the code came over from the DTS class, with modifications I needed to work with image services. With apologies for the length, here it is:

//Class for interacting with ArcGIS Server image services
//Bill Dollins - Zekiah Technologies
//Modified from AgsDynamicLayer.js by DTSAgile

L.AgsImageLayer = L.Class.extend({
    includes: L.Mixin.Events,

    options: {
        minZoom: 0,
        maxZoom: 18,
        attribution: '',
        opacity: 1,
        format: 'PNG8',
		bandids: '',
		compressionquality: 0,
		interpolation: 'RSP_NearestNeighbor',
		pixelType: 'U8',

        unloadInvisibleTiles: L.Browser.mobileWebkit

    initialize: function (/*String*/url, /*Object*/options) {
        L.Util.setOptions(this, options);
        this._url = url;

    //public properties that modify the map

	setInterpolation: function (interpolation) {
        this.options.interpolation = interpolation;

    getInterpolation: function () {
        return this.options.interpolation;

    setOpacity: function (opacity) {
        //set it immediately
        if (this._image) {
   = opacity;
            // stupid webkit hack to force redrawing of tiles
   += ' translate(0,0)';
        this.options.opacity = opacity;

    getOpacity: function () {
        return this.options.opacity;

    reset: function () {

    update: function () {
//        var topLeft = this._map.latLngToLayerPoint(this._map.getBounds().getNorthWest()),
//                bottomRight = this._map.latLngToLayerPoint(this._map.getBounds().getSouthEast()),
//                size = bottomRight.subtract(topLeft);

//        L.DomUtil.setPosition(this._image, topLeft);
// = size.x + 'px';
// = size.y + 'px';

        this._image.updating = false;

    show: function () { = 'block'; = 'visible';

    hide: function () { = 'none';

    isVisible: function () {
        return === 'block';

    onAdd: function (map) {
        this._map = map;


        map.on('viewreset', this._reset, this);
        map.on('moveend', this._moveEnd, this);
        map.on('zoomend', this._zoomEnd, this);

    onRemove: function (map) {
        map.getPanes().mapPane.removeChild(this._image);'viewreset', this._reset, this);'moveend', this._moveEnd, this);'zoomend', this._zoomEnd, this);

    _initImage: function () {
        this._image = L.DomUtil.create('img', 'leaflet-image-layer'); = 'hidden'; = this.options.opacity; = 'block';
        //TODO createImage util method to remove duplication        
        L.Util.extend(this._image, {
            onselectstart: L.Util.falseFn,
            onmousemove: L.Util.falseFn,
            onload: this._onImageLoad,
            src: this._getImageUrl(),
            updating: false,
            agsLayer: this,
            map: this._map

    _getImageUrl: function () {
        //construct the export image url
        var bnds = this._map.getBounds();
        var sz = this._map.getSize();
        //bboxsr & imagesr params need to be specified like so to avoid alignment problems on some map services - not sure why
        var bbox = 'bbox=' + bnds.getSouthEast().lng + '%2C' + bnds.getSouthEast().lat + '%2C' + bnds.getNorthWest().lng + '%2C' + bnds.getNorthWest().lat + '&bboxsr=4326&imageSR=3857';
        var size = '&size=' + sz.x + '%2C' + sz.y;
        var format = '&format=' + this.options.format;
        var pixeltype = '&pixelType=' + this.options.pixelType;
		var interpolation = '&interpolation=' + this.options.interpolation;
		//Some of the following parameters are supported by ArcGIS Server Image Services but not implemented here.
		//They have been included as placeholders.
		var nodata = '&noData=';
		var compressionquality = '&compressionQuality=' + this.options.compressionquality;
		var bandids = '&bandIds=' + this.options.bandids;
		var mosaicprops = '&mosaicProperties=';
		var viewpointprops = '&viewpointProperties=';
        var url = this._url + '/exportImage?' + bbox + size + format + pixeltype + nodata + interpolation + compressionquality + bandids + mosaicprops + viewpointprops + '&f=image';
        return url; // this._url + '/export?' + bbox + size + layers + format + transparent + '&f=image';

    _updateLayer: function () {
        if (!this._image.updating) {
            //console.log('Updating layer NW: ' + map.getBounds().getNorthWest());            
            this._image.updating = true;

            //update the src based on the new location
            this._image.src = this._getImageUrl();
            //reset the image location on the map
            //            //hang the info on the image, we'll actually update it onload to make sure we don't reposition it before the new image comes down
            //this doesn't seem to work on mobile
            //            this._image.topLeft = this._map.latLngToLayerPoint(this._map.getBounds().getNorthWest());
            //            var bottomRight = this._map.latLngToLayerPoint(this._map.getBounds().getSouthEast());
            //            this._image.size = bottomRight.subtract(this._image.topLeft);

            var topLeft = this._map.latLngToLayerPoint(this._map.getBounds().getNorthWest()),
                bottomRight = this._map.latLngToLayerPoint(this._map.getBounds().getSouthEast()),
                size = bottomRight.subtract(topLeft);
            L.DomUtil.setPosition(this._image, topLeft);
   = size.x + 'px';
   = size.y + 'px';

    _moveEnd: function () {
        //console.log('in _moveEnd : NW: ' + map.getBounds().getNorthWest());
        //don't set display:none for moves - makes for smoother panning - no flicker
        //oops, that didn't work on mobile
 = 'none';

    _zoomEnd: function () {
        //console.log('in _moveEnd');

        //        //zoom the image...(animate it?)
        //        //L.DomUtil.setPosition(this, this.topLeft);
        //        //debugger;
        //        //it's gonna be something like this but it's not quite right - also will need to get/ calculate the correct factor (using 1.5 below) and change it for zoom out
        //        //and we need to properly calculate the new left and top - just hard coded approximate values below
        // = '-420px';
        // = '-228px';
        // = this._image.width * 1.5 + 'px';
        // = this._image.height * 1.5 + 'px';

        //for now, we'll just do this = 'none';

    _reset: function () {
        if (this._image) {

    _onImageLoad: function () {
        //        //reset the image location on the map - doing it this way does not seem to work on mobile
        //        L.DomUtil.setPosition(this, this.topLeft);
        // = this.size.x + 'px';
        // = this.size.y + 'px';

        //this is the image

        //make sure it's visible and reset the updating flag = 'visible'; = 'block';

        this.updating = false;
This entry was posted in arcgis server, esri, gis and tagged , , , . Bookmark the permalink.

One Response to ArcGIS Image Services and Leaflet

  1. Pingback: ArcGIS Image Services and Leaflet | Geospace |

Comments are closed.