JSFiddle - React, Tailwind, and code Playground

Quick test for accessing coordinate arrays within an L.esri.featureLayer

by nathansnider

HTML

<script src="//cdn.leafletjs.com/leaflet/v1.0.0-beta.2/leaflet.js"></script>
<link rel="stylesheet" href="//cdn.leafletjs.com/leaflet/v1.0.0-beta.2/leaflet.css">
<script src="//cdn.jsdelivr.net/leaflet.esri/2.0.0-beta.8/esri-leaflet.js"></script>
<div id="map"></div>

CSS

html,
body,
#map {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

.info {
  padding: 6px 8px;
  font: 14px/16px Arial, Helvetica, sans-serif;
  background: white;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
}

.legend {
  text-align: left;
  line-height: 18px;
  color: #555;
}

.legend i {
  width: 18px;
  height: 18px;
  float: left;
  margin-right: 8px;
  opacity: 0.7;
}

.legend .colorcircle {
  border-radius: 50%;
  width: 15px;
  height: 15px;
  margin-top: 0px;
}

JavaScript

/////////////////////////////////////////////////////////////////////////////////////////////
//setting up the map//
/////////////////////////////////////////////////////////////////////////////////////////////
var map = L.map('map').setView([33.836, -118.22], 8);

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

/////////////////////////////////////////////////////////////////////////////////////////////
//adding features//
/////////////////////////////////////////////////////////////////////////////////////////////
var districts = L.esri.featureLayer({
  url: '//services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/USA_Congressional_Districts/FeatureServer/0',
  simplifyFactor: 0.5,
  precision: 5,
  style: function(feature) {
    if (feature.properties.PARTY === 'Democrat') {
      return {
        color: 'blue',
        weight: 2
      };
    } else if (feature.properties.PARTY === 'Republican') {
      return {
        color: 'red',
        weight: 2
      };
    } else {
      return {
        color: 'white',
        weight: 2
      };
    }
  }
}).addTo(map);

/////////////////////////////////////////////////////////////////////////////////////////////
//exporting all feature coordinates//
/////////////////////////////////////////////////////////////////////////////////////////////
coords = [];
districts.on('load', function(e) {
  districts.eachFeature(function(layer){
    coords.push(layer.feature.geometry.coordinates);
  });
  console.log(coords);
});