Display esri leaflet feature's popup on open

WilliamJackson3 · ‎09-07-2018

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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

JohnGravois · ‎09-07-2018

you have a bunch of different things going on.

1.

// not var url: 'https://...'‍
var url = 'https://...'‍‍‍‍‍‍

2. its hard to tell because of your indentation, but you're also missing a curly brace and closing parenthesis after you add your L.geoJSON to the map.

3. besides that, 'layer.geometry' is undefined. so you can't use 'layer.geometry.coordinates[1]' to access the latitude and longitude you're looking for within the `onEachFeature` function.

i'd recommend using a text editor with color highlighted syntax and tools to point out if each parenthesis and curly brace is closed (and where) to appropriately terminate functions. (like Sublime, VS Code or Notepad++).

afterward you'll need to host your simple program using a local web server and open it in a browser. using the developer tools to set breakpoints and inspect variables is the only way you'll be able to learn exactly where things are going awry and make corrections quickly.