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

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

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