Ordering Feature Layers
Controlling the order of feature layers allows greater cartographic control over the rendering of layers beyond the normal tile / polygon / point ordering.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Ordering Feature Layers</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@2.5.0/dist/esri-leaflet.js"
integrity="sha512-ucw7Grpc+iEQZa711gcjgMBnmd9qju1CICsRaryvX7HJklK0pGl/prxKvtHwpgm5ZHdvAil7YPxI1oWPOWK3UQ=="
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([45.5384, -122.6695], 16);
L.esri.basemapLayer('Topographic').addTo(map);
var neighborhoodsUrl = 'https://www.portlandmaps.com/arcgis/rest/services/Public/Zoning/MapServer/32';
var buildingFootprintsUrl = 'https://www.portlandmaps.com/arcgis/rest/services/Public/Basemap_Color_Buildings/MapServer/0';
var blockPointsUrl = 'https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/0';
// create a map pane for neighborhoods
map.createPane('neighborhoods');
// Define the created pane when creating the feature layer
L.esri.featureLayer({
url: neighborhoodsUrl,
pane: 'neighborhoods'
}).addTo(map);
// Panes are added to the map in order - this pane will be sit on top of 'neighborhoods'
map.createPane('footprints');
L.esri.featureLayer({
url: buildingFootprintsUrl,
pane: 'footprints',
style: function (feature) {
return { color: 'white', weight: 0, fillOpacity: 1 };
}
}).addTo(map);
map.createPane('blockpoints');
// for point GeoJSON, Leafet expects custom panes to be returned in pointToLayer()
L.esri.featureLayer({
url: blockPointsUrl,
pointToLayer: function (geojson, latlng) {
return L.circleMarker(latlng, {
pane: 'blockpoints',
color: 'green'
});
}
}).addTo(map);
</script>
</body>
</html>