You can create and display a popup that displays attribute information from a map service. To learn how to work with map services and dynamic map layers, go to the API reference.
<html>
<head>
<meta charset="utf-8" />
<title>Display a popup (dynamic map layer)</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<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.10/dist/esri-leaflet.js"></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>
<div id="map"></div>
<script>
const map = L.map("map", {
minZoom: 3
}).setView([38.5, -96.8], 5);
const wildfireRisk = L.esri
.dynamicMapLayer({
url: "https://apps.fs.usda.gov/arcx/rest/services/RDW_Wildfire/RMRS_WildfireHazardPotential_2014/MapServer",
// server response content type can be either 'json' (default) or 'image'
f: "image"
})
.addTo(map);
wildfireRisk.bindPopup(function (error, featureCollection) {
if (error || featureCollection.features.length === 0) {
return false;
} else {
return "Risk Level: " + featureCollection.features[0].properties["Raster.CLASS_DESC"];
}
});
</script>
</body>
</html>