This content has moved to developers.arcgis.com. Please update your bookmarks!
Inherit service symbology
This sample demonstrates how to recreate the symbology defined for feature services in the client automatically. The demo relies on the Esri Leaflet Renderers plugin.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Inherit service symbology</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>
<!-- Load Esri Leaflet Renderers plugin to use feature service symbology -->
<script src="https://unpkg.com/esri-leaflet-renderers@3.0.0"
integrity="sha512-tqY7QUz7UHKLqhBX1SVYBsn6EKeadkSqYXsdj3RbzZdY8jUq1t0Hi+CS7vylbMIM/jcmN4PgelBhiKvCjTJ7GQ=="
crossorigin=""></script>
<style>
body { margin:0; padding:0; }
#map { position: absolute; top:0; bottom:0; right:0; left:0; }
</style>
</head>
<body>
<div id="map"></div>
<script>
var map = L.map('map').setView([37.837, -122.479], 6);
L.esri.Vector.vectorBasemapLayer('OSM:LightGray:Base', {
apikey: apiKey // Replace with your API key - https://developers.arcgis.com
}).addTo(map);
// renderer type: unique value
L.esri.featureLayer({
url: 'https://sampleserver6.arcgisonline.com/arcgis/rest/services/Earthquakes_Since1970/MapServer/0'
}).addTo(map);
</script>
</body>
</html>