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

Use Turf and Esri Leaflet together

Esri Leaflet pairs nicely with clientside libraries that can perform spatial analysis in the browser like Turf.js. This demo shows how the output from a spatial query can be augmented to isolate features that have a spatial relationship with another arbitrary geometry.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Use Turf and Esri Leaflet together</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>

<script src="https://unpkg.com/@turf/turf@5.1.6/turf.min.js"></script>

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

<div id="map"></div>
<div id="info-pane" class="leaflet-bar">
  <label>
    Census block points that intersect both bounding boxes are red.
  </label>
</div>

<script type='text/javascript'>
  // two GeoJSON bounding boxes.  the first smaller than the second.
  var boundingBoxes = {
    type: 'FeatureCollection',
    features: [
      {
        type: 'Feature',
        properties: {
          color: 'orange'
        },
        geometry: {
          type: 'Polygon',
          coordinates: [
            [
              [-84.39010620117188, 33.747965492070236],
              [-84.39010620117188, 33.75431694675655],
              [-84.37311172485352, 33.75431694675655],
              [-84.37311172485352, 33.747965492070236],
              [-84.39010620117188, 33.747965492070236]
            ]
          ]
        }
      },
      {
        type: 'Feature',
        properties: {
          color: '#0ceb70'
        },
        geometry: {
          type: 'Polygon',
          coordinates: [
            [
              [-84.39963340759277, 33.744254312044156],
              [-84.39963340759277, 33.75817040902938],
              [-84.38444137573242, 33.75817040902938],
              [-84.38444137573242, 33.744254312044156],
              [-84.39963340759277, 33.744254312044156]
            ]
          ]
        }
      }
    ]
  };

  // draw a map of atlanta
  var map = L.map('map').setView([33.752, -84.385], 14.5);

  L.esri.Vector.vectorBasemapLayer('ArcGIS:Imagery:Standard', {
    apikey: apiKey // Replace with your API key - https://developers.arcgis.com
  }).addTo(map);

  // display the bounding boxes on the map
  L.geoJSON(boundingBoxes, {
    style: function (feature) {
      return { color: feature.properties.color };
    }
  }).addTo(map);

  // query for census block points that intersect the smaller box
  var query = L.esri.query({
    url: 'https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/0'
  });
  query.intersects(boundingBoxes.features[0]);
  query.run(function (err, censusCollection, raw) {
    if (err) {
      return;
    }
    var features = censusCollection.features;
    // loop through the collection of census block points
    for (var i = 0; i < features.length; i++) {
      // if the point is inside (or contained by, the bigger box) draw it in red
      if (turf.inside(features[i], boundingBoxes.features[1])) {
        L.geoJSON(features[i], {
          pointToLayer: function (geoJsonPoint, latlng) {
            return L.circleMarker(latlng, {
              color: '#ff0066'
            });
          }
        }).addTo(map);
      } else {
        // if it is not contained by the bigger box, make it gray and partially transparent.
        L.geoJSON(features[i], {
          pointToLayer: function (geoJsonPoint, latlng) {
            return L.circleMarker(latlng, {
              radius: 10,
              color: 'gray',
              opacity: 0.2
            });
          }
        }).addTo(map);
      }
    }
  });
</script>

</body>
</html>