Search code examples
javascriptarcgisarcgis-js-api

How to apply filter for multiple layers when using object in JavaScript for ArcGis


I am using ArcGis JavaScript API to display some maps. I have ID of featurelayers in object like this:

const layersByYears = [ 
    { year: 1918, layers: [ 
        { layerID: "443709212b894e9297888b3194b51100", opacity: 1.0, name: "ORP", featureLayer: null },
        { layerID: "61a605dca69c4aa0ac1b3858ba328fd3", opacity: 1.0, name: "obceSouc", featureLayer: null }
    ] },
    { year: 1936, layers: [ 
        { layerID: "443709212b894e9297888b3194b51100", opacity: 1.0, name: "ORP", featureLayer: null },
        { layerID: "61a605dca69c4aa0ac1b3858ba328fd3", opacity: 1.0, name: "obceSouc", featureLayer: null }
    ] },
    { year: 1950, layers: [ 
        { layerID: "23bcd52310854d6185e5f22a4eca0303", opacity: 1.0, name: "ORP", featureLayer: null },
        { layerID: "61a605dca69c4aa0ac1b3858ba328fd3", opacity: 1.0, name: "obceSouc", featureLayer: null }
    ] },
    { year: 1981, layers: [ 
        { layerID: "401e9530ba074936800a8f596fc49d70", opacity: 1.0, name: "ORP", featureLayer: null },
        { layerID: "61a605dca69c4aa0ac1b3858ba328fd3", opacity: 1.0, name: "obceSouc", featureLayer: null }
    ] },
    
]

I have simple input element to choose an year and when the button is clicked, then the layer is changed also. The project is here: https://www.pramenykrkonos.eu/wp-content/uploads/2022/06/index-3.html It is in czech language - what I need is to apply filter for actual layer.

This is where variable for each layer is created:

const createFL = (layer) => { 
        if(layer.featureLayer !== null && layer.featureLayer !== undefined)
            return;
        layer.featureLayer = new FeatureLayer({ portalItem: {
            id: layer.layerID,
            opacity: layer.opacity !== undefined ? layer.opacity : 1.0,
            visible: false,
        } })
    }

Expression for filter is defined here and should be applied when button "doBtn" is clicked.

document.getElementById("doBtn").addEventListener("click",doQuery);
    const attributeName = document.getElementById("attSelect");
    const expressionSign = document.getElementById("signSelect");
    const inputValue = document.getElementById("valSelect");
    let expression;

    function doQuery() {
        expression =    attributeName.value +
                        expressionSign.value +
                        "'"+inputValue.value+"'";
        document.getElementById("printResults").innerHTML = expression;
        featureLayer.definitionExpression = expression; 
                            
    }


Solution

  • If I understand the issue, then I guess a simple solution would be to get the visible layers and apply the filter. Visible layers in this context are the "current" layers, I am guessing.

    If that is the case then your function will be something like this,

    function doQuery() {
        expression = attributeName.value +
            expressionSign.value +
            "'" + inputValue.value + "'";
        document.getElementById("printResults").innerHTML = expression;
        // get visible feature layers, and then apply filter
        concatedLayers.filter(l => l.visible).forEach(l => l.definitionExpression = expression);
    }