Access premium ArcGIS Online content

You can access Esri hosted and curated content hosted in ArcGIS using OAuth 2.0. To learn more about authentication, visit the Security and authentication chapter in the Mapping APIs and location services guide.

Use dark colors for code blocksCopy
                                                                                                                      
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<html>
  <head>
    <meta charset="utf-8" />
    <title>Access premium content</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css" crossorigin="" />
    <script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js" crossorigin=""></script>

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

    <!-- Load Esri Leaflet Vector from CDN -->
    <script src="https://unpkg.com/esri-leaflet-vector@3.1.3/dist/esri-leaflet-vector.js" crossorigin=""></script>
    <script>
      const apiKey = "YOUR_API_KEY";
    </script>
    <style>
      html,
      body,
      #map {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 14px;
        color: #323232;
      }
    </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 + "../../../static/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
      }).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>

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