Esri Leaflet
This content has moved to developers.arcgis.com. Please update your bookmarks!

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@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>

  <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.Vector.vectorBasemapLayer('OSM:Standard', {
    apikey: apiKey // Replace with your API key - https://developers.arcgis.com
  }).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>