I've recently started exploring leaflet and have tried tweaking a few simple examples I've found. I would like to be able to query a feature service of points, zoom to feature(s), and then display a popup with attribute information by default for each feature. I would also like to be able to click on a feature to open a popup. The attached code does not display a map but I've had bits and pieces working so I think it's almost there. Any assistance much appreciated.
<html>
<head>
<meta charset=utf-8 />
<title>Load each and every feature initially</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.3.4/dist/leaflet.css"
integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"
integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA=="
crossorigin=""></script>
<!-- Load Esri Leaflet from CDN -->
<script src="https://unpkg.com/esri-leaflet@2.2.3/dist/esri-leaflet.js"
integrity="sha512-YZ6b5bXRVwipfqul5krehD9qlbJzc6KOGXYsDjU9HHXW2gK57xmWl2gU6nAegiErAqFXhygKIsWPKbjLPXVb2g=="
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.5666, -122.6921], 18);
L.esri.basemapLayer("Topographic").addTo(map);
var url:'https://services.arcgis.com/rOo16HdIMeOBI4Mb/arcgis/rest/services/Heritage_Trees_Portland/FeatureServer/0';
var variable = "Black Walnut"
// query a feature service for a tree species
var pointQuery = L.esri.query({
url: url
}).where("COMMON_NAM =" + "'" + variable + "'").run(function(error, trees){
{
treesMatch = L.geoJSON(trees,
{
onEachFeature: function (feature, layer)
{
var popupAuto = L.popup({ offset: L.point([1,-30])})
setLatLng([layer.geometry.coordinates[1], layer.geometry.coordinates[0]])
.setContent('Name = ' + feature.properties.COMMON_NAM)
.openOn(map);
var popupClick = layer.bindPopup('Name = ' + feature.properties.COMMON_NAM);
}
}).addTo(map);
</script>
</body>
</html>
