AnsweredAssumed Answered

Display esri leaflet feature's popup on open

Question asked by wjackson_ArkansasDEQ on Sep 7, 2018
Latest reply on Sep 7, 2018 by JGravois-esristaff

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>

Outcomes