1

I am trying to perform queries with esri leaflet and show the resulting polygon features with their appropriate popups by default (instead of having users click on the feature highlighted in order to open said popups). I have tried using the following lines, after the setting up the query parameters, with no luck:

map.addLayer(popup1); // where popup1 is a variable holding onEachFeature info

popup1.addTo(map);  // doesn't work either

map.openPopup(popup1);   // nothing

Note that the feature being queried (only one at at time) does show up fine, and clicking on it brings up the popups as expected. I just need these popups to be enabled by default, so users can close them if they want.

3

featureLayer.bindPopup() isn't triggered until users interact with an individual graphic. if you want a popup to be created and opened immediately, you can do it yourself using the opportunity provided by the constructor option 'onEachFeature'.

var fl = L.esri.featureLayer({
    url:'https://services.arcgis.com/rOo16HdIMeOBI4Mb/arcgis/rest/services/Heritage_Trees_Portland/FeatureServer/0',
    where: "COMMON_NAM = 'Osmanthus'",
    onEachFeature: function (layer) {
      // an offset keeps the from drawing directly on top of the marker
      var popup = L.popup( { offset: L.point([1,-30])})
        // use the geometry of each feature to anchor the popup
        .setLatLng([layer.geometry.coordinates[1], layer.geometry.coordinates[0]])
        .setContent('<p>Hello world!<br />This is a nice popup.</p>')
        .openOn(map);
    }
}).addTo(map);
  • Does this only work for point features? I can't get it to work with polygons. I want the popup to bring up information on a selected neighborhood, but nothing shows up. – spartmar May 3 '17 at 3:09
  • for geometry types besides points its up to you to derive an appropriate centroid to use to place your popup. for help I'd recommend looking at Polyline/Polygon.getCenter() – John Gravois May 3 '17 at 23:00
1

In order to allow the popup on a polygon feature to be enabled by default AND make sure it is still clickable afterwards (in case it's closed but needs to be re-opened), this is the code that worked for me (similar to John Gravois'):

var polyQuery = L.esri.query({
            url: polyURL
        }).where("NAME =" + "'" + variable + "'").run(function(error, poly)
        {
            polyMatch = L.geoJson(poly,
            {
                style:
                    {
                        color: "#000",
                        weight: 4,
                        opacity: 1
                    },
                onEachFeature: function (feature, layer)
                {                              
                    var popupAuto = L.popup()  
                    .setLatLng(layer.getBounds().getCenter())  // sets popup in polygon's centroid
                    .setContent('Name = ' + feature.properties.NAME)
                    .openOn(map);    // this is what enables it by default upon querying the polygon

                    var popupClick = layer.bindPopup('Name = ' + feature.properties.NAME);  // this second popup call ensures polygon feature is still clickable after initial binding upon query load (so it can be closed and re-opened)
                }  

            }).addTo(map);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.