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.
<html>
<head>
<meta charset="utf-8" />
<title>Access premium content</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<!-- Load CSS-->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" crossorigin=""></script>
<!-- Load Esri Leaflet from CDN -->
<script src="https://unpkg.com/esri-leaflet@3.0.12/dist/esri-leaflet.js"></script>
<!-- Load Esri Leaflet Vector from CDN -->
<script src="https://unpkg.com/esri-leaflet-vector@4.2.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 type="module">
import { ArcGISIdentityManager } from "https://cdn.skypack.dev/@esri/arcgis-rest-request@4.1.1";
const clientID = "KFC3PHhZDSVXDKSC";
let accessToken;
const callbacks = [];
const w = parent.document.URL.split("/");
const callbackPage = `${w[0]}//${w[2]}/esri-leaflet/oauth/callback.html`;
const signInButton = document.getElementById("sign-in");
let trafficLayer;
const map = L.map("map").setView([34.045, -118.195], 13);
L.esri.Vector.vectorBasemapLayer("arcgis/streets-night", {
apikey: apiKey
}).addTo(map);
const getAuth = () => {
return ArcGISIdentityManager.beginOAuth2({
clientId: clientID,
redirectUri: callbackPage
});
};
signInButton.addEventListener("click", (e) => {
getAuth().then((idManager) => {
accessToken = idManager.token;
trafficLayer = L.esri
.dynamicMapLayer({
url: "https://traffic.arcgis.com/arcgis/rest/services/World/Traffic/MapServer",
token: accessToken
})
.addTo(map);
trafficLayer.on("authenticationrequired", (e) => {
getAuth().then((idManager) => {
e.authenticate = idManager.token;
});
});
});
e.preventDefault();
});
</script>
</body>
</html>