0

When I take this code directly from the ESRI Leaflet webpage and put it into JSFiddle it works great. All the layers from the ArcGIS server show up.

However, when I paste this exact code into a text file and make an HTML page with it, then open it with Chrome, Explorer, etc. none of the authenticated ArcGIS layers show up, only the basemap. Why is this happening?

    <html>
<head>
  <meta charset="utf-8" />
  <title>ArcGIS Server username/password</title>
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />

  <!-- Load Leaflet from CDN -->
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
  integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
  crossorigin=""/>
  <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
  integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
  crossorigin=""></script>


  <!-- Load Esri Leaflet from CDN -->
  <script src="https://unpkg.com/esri-leaflet@2.4.1/dist/esri-leaflet.js"
  integrity="sha512-xY2smLIHKirD03vHKDJ2u4pqeHA7OQZZ27EjtqmuhDguxiUvdsOuXMwkg16PQrm9cgTmXtoxA6kwr8KBy3cdcw=="
  crossorigin=""></script>





  <style>
    body { margin:0; padding:0; }
    #map { position: absolute; top:0; bottom:0; right:0; left:0; }
  </style>
</head>
<body>

<div id="map"></div>

<script>
  // workaround for old ie
  if (!window.location.origin) {
    window.location.origin = window.location.protocol + '//' + window.location.hostname + (window.location.port ? ':' + window.location.port : '');
  }

  var map = L.map('map').setView([34.089, -116.865], 9);
  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
    }).addTo(map);

    dl.on('authenticationrequired', function (e) {
      serverAuth(function (error, response) {
        if (error) {
          return;
        }

        e.authenticate(response.token);
      });
    });
  });
</script>

</body>
</html>
cabesuon
  • 4,860
  • 2
  • 15
  • 24
Swing
  • 1
  • 2
  • Are you opening your HTML page from file system? Have you tried opening it through a local server? The referrer might also play a role. – ghybs Jun 28 '20 at 06:45
  • Any errors on your [console](https://developer.mozilla.org/en-US/docs/Tools/Web_Console)? – IvanSanchez Jun 28 '20 at 10:03
  • I am opening the file from within my local windows environment, not from a server. I would like to be able to do this, as I ultimately want to run this from within a FileMaker form, not from a web server. Do you know how the referrer could be checked, and if so, how could I find a workaround to not use a server? I did not receive any errors from my console. – Swing Jun 28 '20 at 22:17

0 Answers0