Esri Leaflet

Simplifying complex features

Complex features can be simplified on the server for faster response times. Zoom in and watch as higher resolution vectors are loaded from the service. Hover over features for effects. More information about Feature Layers can be found in the L.esri.Layers.FeatureLayer documentation.

<html>
<head>
  <meta charset=utf-8 />
  <title>Simplifying complex features</title>
  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />

  <!-- Load Leaflet from CDN-->
  <link rel="stylesheet" href="//cdn.jsdelivr.net/leaflet/0.7.3/leaflet.css" />
  <script src="//cdn.jsdelivr.net/leaflet/0.7.3/leaflet.js"></script>

  <!-- Load Esri Leaflet from CDN -->
  <script src="//cdn.jsdelivr.net/leaflet.esri/1.0.3/esri-leaflet.js"></script>

  <style>
    body { margin:0; padding:0; }
    #map { position: absolute; top:0; bottom:0; right:0; left:0; }
  </style>
</head>
<body>

<style>
  #info-pane {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
    padding: 1em;
    background: white;
  }
</style>

<div id="map"></div>
<div id="info-pane" class="leaflet-bar"></div>

<script>
  var map = L.map('map').setView([37.75, -122.23], 9);

  L.esri.basemapLayer('Gray').addTo(map);

  var zipcodes = L.esri.featureLayer({
    url: 'http://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/USA_ZIP_Codes/FeatureServer/0',
    simplifyFactor: 0.35,
    precision: 5,
    fields: ['FID', 'ZIP', 'PO_NAME'],
    style: function(feature) {
      return {
        color: '#000',
        weight: 1,
        opacity: 1
      }
    }
  }).addTo(map);

  var oldId;

  zipcodes.on('mouseout', function(e){
    document.getElementById('info-pane').innerHTML = 'Hover to Inspect';
  });

  zipcodes.on('mouseover', function(e){
    zipcodes.resetStyle(oldId);
    oldId = e.layer.feature.id;
    document.getElementById('info-pane').innerHTML = e.layer.feature.properties.ZIP + ' ' + e.layer.feature.properties.PO_NAME;
    e.layer.bringToFront();
    zipcodes.setFeatureStyle(e.layer.feature.id, {
      color: '#9D78D2',
      weight: 3,
      opacity: 1
    });
  });
</script>

</body>
</html>

Edit this sample on GitHub

Esri Leaflet is a project from the Esri PDX R&D Center and the Esri Community