Click on the map to identify features from a dynamic map layer. To learn more about querying map services, visit the L.esri.Dynamic in the API reference.
<html>
<head>
<meta charset="utf-8" />
<title>Identifying Features</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.12/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>
<style>
#selectedFeatures {
position: absolute;
top: 10px;
right: 10px;
z-index: 1000;
background: white;
padding: 1em;
}
.leaflet-bar.map-text a {
color: #79bd8f;
display: inline;
}
</style>
<div id="map"></div>
<div id="selectedFeatures" class="leaflet-bar map-text">
Click on the map for <a href="https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer">county info (sublayer 3)</a>
</div>
<script>
const map = L.map("map", {
minZoom: 5
}).setView([38.5, -96.8], 6);
const usaDynamicLayer = L.esri
.dynamicMapLayer({
url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer",
opacity: 1
})
.addTo(map);
let identifiedFeature;
const pane = document.getElementById("selectedFeatures");
map.on("click", function (e) {
pane.innerHTML = "Loading";
if (identifiedFeature) {
map.removeLayer(identifiedFeature);
}
usaDynamicLayer
.identify()
.layers("visible:3") // just the counties sublayer
.on(map)
.at(e.latlng)
.run(function (error, featureCollection) {
if (error) {
return;
}
// make sure at least one feature was identified.
if (featureCollection.features.length > 0) {
identifiedFeature = L.geoJSON(featureCollection.features[0]).addTo(map);
var soilDescription =
featureCollection.features[0].properties.NAME + " County, " + featureCollection.features[0].properties.STATE_NAME;
pane.innerHTML = soilDescription;
} else {
pane.innerHTML = "No features identified.";
}
});
});
</script>
</body>
</html>