Esri · jwasilgeo · Jan 17, 2020 · Jan 17, 2020 · Jan 17, 2020
diff --git a/.gitignore b/.gitignore
@@ -33,6 +33,9 @@ debug/*.js
 debug/*.json
 debug/archive/
 !debug/sample.html
+!debug/sample-dynamic-map-layer.html
+!debug/sample-dynamic-map-layer-server-auth.html
+!debug/sample-image-map-layer.html
 
 # Docs Build
 site/build

diff --git a/debug/sample-dynamic-map-layer-server-auth.html b/debug/sample-dynamic-map-layer-server-auth.html
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset=utf-8 />
+  <title>Esri Leaflet Debugging Sample</title>
+  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
+
+  <!-- Load Leaflet -->
+  <link rel="stylesheet" href="../node_modules/leaflet/dist/leaflet.css" />
+  <script src="../node_modules/leaflet/dist/leaflet-src.js"></script>
+
+  <!-- Load Esri Leaflet from source-->
+  <script src="../dist/esri-leaflet-debug.js"></script>
+
+  <style>
+    body {
+      margin: 0;
+      padding: 0;
+    }
+
+    #map {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      right: 0;
+      left: 0;
+    }
+
+    #info-pane {
+      position: absolute;
+      top: 10px;
+      right: 10px;
+      z-index: 1000;
+      padding: 1em;
+      background: white;
+    }
+  </style>
+</head>
+
+<body>
+
+  <div id="map"></div>
+  <div id="info-pane" class="leaflet-bar">
+    <label>
+      sample application for debugging a <pre>L.esri.dynamicMapLayer</pre>
+    </label>
+  </div>
+
+  <script>
+    /*
+    make a copy of this file in the same folder if you'd like git to ignore your local changes
+    */
+    var map = L.map('map').setView([40, -100], 4);
+    L.esri.basemapLayer('Topographic').addTo(map);
+
+    function serverAuth(callback) {
+      L.esri.post('https://sampleserver6.arcgisonline.com/arcgis/tokens/generateToken', {
+        username: 'user1',
+        password: 'user1',
+        f: 'json',
+        expiration: 86400,
+        client: 'referer',
+        referer: window.location.origin
+      }, callback);
+    }
+
+    serverAuth(function (error, response) {
+      if (error) {
+        return;
+      }
+
+      var dl = L.esri.dynamicMapLayer({
+        url: 'https://sampleserver6.arcgisonline.com/arcgis/rest/services/Wildfire_secure_ac/MapServer',
+        opacity: 1,
+        token: response.token,
+        f: 'json' // or test optional 'image'
+      })
+        .bindPopup(function (error, featureCollection) {
+          // to help test the identify task
+          if (error || featureCollection.features.length === 0) {
+            return false;
+          } else {
+            return 'Description: ' + featureCollection.features[0].properties.Description;
+          }
+        })
+        .addTo(map);
+
+      dl.on('authenticationrequired', function (e) {
+        serverAuth(function (error, response) {
+          if (error) {
+            return;
+          }
+
+          e.authenticate(response.token);
+        });
+      });
+    });
+  </script>
+
+</body>
+
+</html>
diff --git a/debug/sample-dynamic-map-layer.html b/debug/sample-dynamic-map-layer.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset=utf-8 />
+  <title>Esri Leaflet Debugging Sample</title>
+  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
+
+  <!-- Load Leaflet -->
+  <link rel="stylesheet" href="../node_modules/leaflet/dist/leaflet.css" />
+  <script src="../node_modules/leaflet/dist/leaflet-src.js"></script>
+
+  <!-- Load Esri Leaflet from source-->
+  <script src="../dist/esri-leaflet-debug.js"></script>
+
+  <style>
+    body {
+      margin: 0;
+      padding: 0;
+    }
+
+    #map {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      right: 0;
+      left: 0;
+    }
+
+    #info-pane {
+      position: absolute;
+      top: 10px;
+      right: 10px;
+      z-index: 1000;
+      padding: 1em;
+      background: white;
+    }
+  </style>
+</head>
+
+<body>
+
+  <div id="map"></div>
+  <div id="info-pane" class="leaflet-bar">
+    <label>
+      sample application for debugging a <pre>L.esri.dynamicMapLayer</pre>
+    </label>
+  </div>
+
+  <script>
+    /*
+    make a copy of this file in the same folder if you'd like git to ignore your local changes
+    */
+    var map = L.map('map').setView([40, -100], 4);
+    L.esri.basemapLayer('Topographic').addTo(map);
+
+    L.esri.dynamicMapLayer({
+      url: 'https://sampleserver6.arcgisonline.com/arcgis/rest/services/Wildfire_secure_ac2/MapServer',
+      opacity: 0.7,
+
+      // to test with a token, create one at the same server as used in the url param above, i.e.
+      // https://sampleserver6.arcgisonline.com/arcgis/tokens/
+      // and for the HTTP referer value you can use the local dev sever URL
+      // an example user/pass for the same server is available at https://esri.github.io/esri-leaflet/examples/arcgis-server-auth.html
+
+      // token: 'paste in here',
+
+      f: 'json' // or test optional 'image'
+    })
+      .bindPopup(function (error, featureCollection) {
+        // to help test the identify task
+        if (error || featureCollection.features.length === 0) {
+          return false;
+        } else {
+          return 'Description: ' + featureCollection.features[0].properties.Description;
+        }
+      })
+      .addTo(map);
+  </script>
+
+</body>
+
+</html>
diff --git a/debug/sample-image-map-layer.html b/debug/sample-image-map-layer.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset=utf-8 />
+  <title>Esri Leaflet Debugging Sample</title>
+  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
+
+  <!-- Load Leaflet -->
+  <link rel="stylesheet" href="../node_modules/leaflet/dist/leaflet.css" />
+  <script src="../node_modules/leaflet/dist/leaflet-src.js"></script>
+
+  <!-- Load Esri Leaflet from source-->
+  <script src="../dist/esri-leaflet-debug.js"></script>
+
+  <style>
+    body {
+      margin: 0;
+      padding: 0;
+    }
+
+    #map {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      right: 0;
+      left: 0;
+    }
+
+    #info-pane {
+      position: absolute;
+      top: 10px;
+      right: 10px;
+      z-index: 1000;
+      padding: 1em;
+      background: white;
+    }
+  </style>
+</head>
+
+<body>
+
+  <div id="map"></div>
+  <div id="info-pane" class="leaflet-bar">
+    <label>
+      sample application for debugging a <pre>L.esri.imageMapLayer</pre>
+    </label>
+  </div>
+
+  <script>
+    /*
+    make a copy of this file in the same folder if you'd like git to ignore your local changes
+    */
+    var map = L.map('map').setView([43.65, -79.38], 12);
+    L.esri.basemapLayer('Topographic').addTo(map);
+
+    L.esri.imageMapLayer({
+      url: 'https://sampleserver6.arcgisonline.com/arcgis/rest/services/Toronto/ImageServer',
+      opacity: 0.7,
+
+      // to test with a token, create one at the same server as used in the url param above, i.e.
+      // https://sampleserver6.arcgisonline.com/arcgis/tokens/
+      // and for the HTTP referer value you can use the local dev sever URL
+      // an example user/pass for the same server is available at https://esri.github.io/esri-leaflet/examples/arcgis-server-auth.html
+
+      // token: 'paste in here',
+
+      f: 'image' // or test optional 'json'
+    })
+      .bindPopup(function (error, identifyResults) {
+        // to help test the identify task
+        if (error || !identifyResults.pixel) {
+          return false;
+        } else {
+          return 'Pixel values: ' + identifyResults.pixel.properties.value + ' (B, G, R, NIR)';
+        }
+      })
+      .addTo(map);
+  </script>
+
+</body>
+
+</html>
diff --git a/src/Layers/DynamicMapLayer.js b/src/Layers/DynamicMapLayer.js
@@ -20,10 +20,6 @@ export var DynamicMapLayer = RasterLayer.extend({
     this.service = mapService(options);
     this.service.addEventParent(this);
 
-    if ((options.proxy || options.token) && options.f !== 'json') {
-      options.f = 'json';
-    }
-
     Util.setOptions(this, options);
   },
 
@@ -179,21 +175,35 @@ export var DynamicMapLayer = RasterLayer.extend({
       this.service.request('export', params, function (error, response) {
         if (error) { return; } // we really can't do anything here but authenticate or requesterror will fire
 
-        if (this.options.token && response.href) {
-          response.href += ('?token=' + this.options.token);
+        if (params.token && response.href) {
+          // append token
+          response.href += ('?token=' + params.token);
         }
-        if (this.options.proxy && response.href) {
-          response.href = this.options.proxy + '?' + response.href;
+
+        if (params.proxy && response.href) {
+          // prepend proxy
+          response.href = params.proxy + '?' + response.href;
         }
+
         if (response.href) {
           this._renderImage(response.href, bounds);
         } else {
           this._renderImage(response.imageData, bounds, response.contentType);
         }
       }, this);
     } else {
+      // if not 'json', then 'image' is the only other valid value for params.f
+      // (this.options.f should be equal to 'image' if the default 'json' value was not used)
       params.f = 'image';
-      this._renderImage(this.options.url + 'export' + Util.getParamString(params), bounds);
+
+      var url = this.options.url + 'export' + Util.getParamString(params);
+
+      if (params.proxy) {
+        // prepend proxy
+        url = params.proxy + '?' + url;
+      }
+
+      this._renderImage(url, bounds);
     }
   }
 });

diff --git a/src/Layers/ImageMapLayer.js b/src/Layers/ImageMapLayer.js
@@ -165,6 +165,10 @@ export var ImageMapLayer = RasterLayer.extend({
       params.token = this.service.options.token;
     }
 
+    if (this.options.proxy) {
+      params.proxy = this.options.proxy;
+    }
+
     if (this.options.renderingRule) {
       params.renderingRule = JSON.stringify(this.options.renderingRule);
     }
@@ -180,17 +184,32 @@ export var ImageMapLayer = RasterLayer.extend({
     if (this.options.f === 'json') {
       this.service.request('exportImage', params, function (error, response) {
         if (error) { return; } // we really can't do anything here but authenticate or requesterror will fire
-        if (this.options.token) {
-          response.href += ('?token=' + this.options.token);
+
+        if (params.token) {
+          // append token
+          response.href += ('?token=' + params.token);
         }
-        if (this.options.proxy) {
-          response.href = this.options.proxy + '?' + response.href;
+
+        if (params.proxy) {
+          // prepend proxy
+          response.href = params.proxy + '?' + response.href;
         }
+
         this._renderImage(response.href, bounds);
       }, this);
     } else {
+      // if not 'json', then 'image' is the only other valid value for params.f
+      // (this.options.f should be equal to 'image' if the optional 'json' value was not used)
       params.f = 'image';
-      this._renderImage(this.options.url + 'exportImage' + Util.getParamString(params), bounds);
+
+      var url = this.options.url + 'exportImage' + Util.getParamString(params);
+
+      if (params.proxy) {
+        // prepend proxy
+        url = params.proxy + '?' + url;
+      }
+
+      this._renderImage(url, bounds);
     }
   }
 });