Access premium ArcGIS Online content

Access Esri hosted and curated content is ArcGIS Online like traffic maps. You will be asked to authenticate with ArcGIS Online, alternately in your application you can generate a token and pass it in.
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Access premium ArcGIS Online content</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.7.1/dist/leaflet.css"
    integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
    crossorigin=""/>
  <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
    integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
    crossorigin=""></script>

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

  <!-- Load Esri Leaflet Vector from CDN -->
  <script src="https://unpkg.com/esri-leaflet-vector@4.0.0/dist/esri-leaflet-vector.js"
    integrity="sha512-EMt/tpooNkBOxxQy2SOE1HgzWbg9u1gI6mT23Wl0eBWTwN9nuaPtLAaX9irNocMrHf0XhRzT8B0vXQ/bzD0I0w=="
    crossorigin=""></script>

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

<style>
  #auth {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1000;
    background: white;
    padding: 1em;
    box-shadow: 0 1px 5px rgba(0,0,0,0.65);
    border-radius: 4px;
  }

  #auth input {
    display: inline-block;
    border: 1px solid #999;
    font-size: 14px;
    border-radius: 4px;
    height: 28px;
    line-height: 28px;
  }
</style>

<div id="map"></div>
<div id="auth">
  <a href="#" id="sign-in">Add Traffic Layer</a>
</div>

<script>
  var clientID = 'uoiMRafhECiH5uNE';
  var accessToken;
  var callbacks = [];
  var protocol = window.location.protocol;
  var callbackPage = protocol + '//esri.github.io/esri-leaflet/examples/oauth/callback.html';

  var signInButton = document.getElementById('sign-in');

  var trafficLayer;

  var map = L.map('map').setView([34.045, -118.195], 13);

  L.esri.Vector.vectorBasemapLayer('ArcGIS:StreetsNight', {
    apikey: apiKey // Replace with your API key - https://developers.arcgis.com
  }).addTo(map);

  // this function will be called when the oauth process is complete
  window.oauthCallback = function (token) {
    accessToken = token;
    for (var i = 0; i < callbacks.length; i++) {
      callbacks[i](token);
    }
    callbacks = [];
  };
  // this function will open a window and start the oauth process
  function oauth (callback) {
    if (accessToken) {
      callback(accessToken);
    } else {
      callbacks.push(callback);
      window.open('https://www.arcgis.com/sharing/oauth2/authorize?client_id=' + clientID + '&response_type=token&expiration=20160&redirect_uri=' + window.encodeURIComponent(callbackPage), 'oauth-window', 'height=400,width=600,menubar=no,location=yes,resizable=yes,scrollbars=yes,status=yes');
    }
  }

  signInButton.addEventListener('click', function (e) {
    oauth(function (token) {
      trafficLayer = L.esri.dynamicMapLayer({
        url: 'https://traffic.arcgis.com/arcgis/rest/services/World/Traffic/MapServer',
        token: token
      }).addTo(map);
      trafficLayer.on('authenticationrequired', function (e) {
        oauth(function (token) {
          e.authenticate(token);
        });
      });
    });
    e.preventDefault();
  });
</script>

</body>
</html>
Edit this sample on GitHub
Terms