2

I'm fairly new to Leaflet and ESRI Leaflet, so bear with me. I'm creating four variables from the same feature service (AGO) because I want to separate them into four separate layers even though they come from the same service - based on different attribute values. I'm doing this by the where option in L.esri.featureLayer. However, when it comes time to bind the popup to each one of these variables, I want to avoid duplication and group each variable so I can just .bindPopup once because I want the popup to be the same in each layer. Is this possible with ESRI Leaflet?

See below for my code which may explain a bit better:

//create separate AUS TxDOT project layers by project status
var ausConstruct = L.esri.featureLayer({
    url: 'https://services.arcgis.com/KTcxiTD9dsQw4r7Z/arcgis/rest/services/TxDOT_Projects/FeatureServer/0',
    where: "DISTRICT_NAME = 'Austin' AND PRJ_STATUS = 'Construction Scheduled'",
    style: function (feature) {
        return {color: '#d7191c', weight: 4};
    }
});

var ausFinalize = L.esri.featureLayer({
    url: 'https://services.arcgis.com/KTcxiTD9dsQw4r7Z/arcgis/rest/services/TxDOT_Projects/FeatureServer/0',
    where: "DISTRICT_NAME = 'Austin' AND PRJ_STATUS = 'Finalizing for Construction'",
    style: function (feature) {
        return {color: '#fdae61', weight: 4};
    }
});

var ausDevelop = L.esri.featureLayer({
    url: 'https://services.arcgis.com/KTcxiTD9dsQw4r7Z/arcgis/rest/services/TxDOT_Projects/FeatureServer/0',
    where: "DISTRICT_NAME = 'Austin' AND PRJ_STATUS = 'Under Development'",
    style: function (feature) {
        return {color: '#80cdc1', weight: 4};
    }
});

var ausPlan = L.esri.featureLayer({
    url: 'https://services.arcgis.com/KTcxiTD9dsQw4r7Z/arcgis/rest/services/TxDOT_Projects/FeatureServer/0',
    where: "DISTRICT_NAME = 'Austin' AND PRJ_STATUS = 'Long Term Planning'",
    style: function (feature) {
        return {color: '#2c7bb6', weight: 4};
    }
});

//create group of project status variables for bindPopup (I think this is the Leaflet way but how in ESRI Leaflet?)
var txdotProjects = L.layerGroup([ausConstruct, ausFinalize, ausDevelop, ausPlan]);

//popup for txdot projects
txdotProjects.bindPopup(function (evt) {
    return L.Util.template('<b>CSJ: </b>{CONTROL_SECT_JOB}<br><b>HWY: </b>{HIGHWAY_NUMBER}<br><b>COUNTY: </b>{COUNTY_NAME}<br><b>LENGTH: </b>{PROJ_LENGTH}<br><b>PROJECT CLASS: </b>{PROJ_CLASS}<br><b>EST. COST: </b>{EST_CONST_COST}<br><b>TYPE OF WORK: </b>{TYPE_OF_WORK}<br><b>LET DATE: </b>{DIST_LET_DATE}<br><b>BEGIN MILE PT: </b>{BEG_MILE_POINT}<br><b>END MILE PT: </b>{END_MILE_POINT}<br><b>FUND CATEGORY: </b>{TPP_CATEGORY_P2}<br><b>WORK PROGRAM: </b>{TPP_WORK_PROGRAM}<br><b>STATUS: </b>{PRJ_STATUS}',
    evt.feature.properties);
});
1
1

So I posted an issue to the esri-leaflet repo on Github and got some help from @nickpeihl. Thanks Nick!

I'm assuming due to Nicks response (I will edit this later if I am wrong or something changes) that there is not an L.layerGroup() equivalent for esri-leaflet, but you can avoid the duplication/redundancy by creating a separate named function, chaining the bindPopup method to each featureLayer, and passing the name of the function as the argument like so:

//function for aus txdot project bindpop
function createPopup (evt) {
    return L.Util.template('<b>CSJ: </b>{CONTROL_SECT_JOB}<br><b>HWY: </b>{HIGHWAY_NUMBER}<br><b>COUNTY: </b>{COUNTY_NAME}<br><b>LENGTH: </b>{PROJ_LENGTH}<br><b>PROJECT CLASS: </b>{PROJ_CLASS}<br><b>EST. COST: </b>{EST_CONST_COST}<br><b>TYPE OF WORK: </b>{TYPE_OF_WORK}<br><b>LET DATE: </b>{DIST_LET_DATE}<br><b>BEGIN MILE PT: </b>{BEG_MILE_POINT}<br><b>END MILE PT: </b>{END_MILE_POINT}<br><b>FUND CATEGORY: </b>{TPP_CATEGORY_P2}<br><b>WORK PROGRAM: </b>{TPP_WORK_PROGRAM}<br><b>STATUS: </b>{PRJ_STATUS}',
evt.feature.properties)
};

//create separate AUS TxDOT project layers by project status
var ausConstruct = L.esri.featureLayer({
    url: 'https://services.arcgis.com/KTcxiTD9dsQw4r7Z/arcgis/rest/services/TxDOT_Projects/FeatureServer/0',
    where: "DISTRICT_NAME = 'Austin' AND PRJ_STATUS = 'Construction Scheduled'",
    style: function (feature) {
        return {color: '#d7191c', weight: 4};
    }
}).bindPopup(createPopup);

var ausFinalize = L.esri.featureLayer({
    url: 'https://services.arcgis.com/KTcxiTD9dsQw4r7Z/arcgis/rest/services/TxDOT_Projects/FeatureServer/0',
    where: "DISTRICT_NAME = 'Austin' AND PRJ_STATUS = 'Finalizing for Construction'",
    style: function (feature) {
        return {color: '#fdae61', weight: 4};
    }
}).bindPopup(createPopup);

//and so on...

A pretty simple and straight-forward solution, but hey I'm pretty much a noob so... Hope this helps anyone that may come across a similar issue.

1
  • 1
    Sorry, I forgot to address that part of your question. There is no L.LayerGroup specific to esri-leaflet. You can use the Leaflet L.LayerGroup with esri-leaflet layers. But I've not tested the bindPopup method of L.LayerGroup with esri-leaflet layers. – nickpeihl Jun 12 '17 at 15:25

Your Answer

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