Query results in popup example

Esri Leaflet 2.1.4

by Alex Azuero

HTML

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script src="https://unpkg.com/[email protected]/dist/esri-leaflet.js"></script>
<div id="map"></div>

CSS

body { margin:0; padding:0; }
#map { position: absolute; top:0; bottom:0; right:0; left:0; }

JavaScript

var map = L.map("map").setView([45.5, -122.6], 12);

L.esri.basemapLayer("Topographic").addTo(map);

//Define neighborhoods feature layer
var nbohoods = L.esri.featureLayer({
  url:'https://www.portlandmaps.com/arcgis/rest/services/Public/COP_OpenData/MapServer/3',
  minZoom: 12,
  opacity: 20
}).addTo(map);

nbohoods.on('popupopen', function(evt) {
	// when the popup opens, we get the layer/featuere AND a reference to the popup in the evt variable here.
  // so call "queryTrees", passing that info
  queryTrees(evt.layer.feature, evt.popup);
});

nbohoods.bindPopup(function (layer) {
  // return temporary message while the "queryTrees" function called from the popupopen function runs:
	return L.Util.template('getting tree info ...');
});

// pass this fucntion a feature and a reference to a popup, and it will
// run the query and update the popup content when it is complete:
var queryTrees = function(feature, popup) {
  L.esri.query({
  	url:'https://www.portlandmaps.com/arcgis/rest/services/Public/COP_OpenData/MapServer/26'
  })
  .within(feature)
  .run(function(error, featureCollection) {
  	// this function is called when the query is complete. Update the currently open popup.
    popup.setContent(L.Util.template('Number of Trees: ' + featureCollection.features.length));
  }.bind(this));
}