Hi,
I'm working on a hiking trail application. I have a functioning filter tool within the app based on trail difficulty. Currently the tool drop-down shows the literal sql queries being used, and I'd like to rename them for display purposes.
Currently they look like the screenshot below, but I'd rather it says something like "Difficulty is easiest".
I've tried playing around with my script (below) but I just can't quite nail down what I need to change to make it work.
Thanks for any help!
var sqlExpressions = ["DIFFICULTY = 'Easiest'", "DIFFICULTY = 'Moderate'", "DIFFICULTY = 'Moderately Strenuous'", "DIFFICULTY = 'Strenuous'", "DIFFICULTY = 'Very Strenuous'", "DIFFICULTY IS NOT NULL" ];
var selectFilter = document.createElement("select");
selectFilter.setAttribute("class", "esri-widget esri-select");
selectFilter.setAttribute("style", "width: 275px; font-family:Avenir Next W00; font-size: 1em;");
sqlExpressions.forEach(function(sql){
var option = document.createElement("option");
option.value = sql;
option.innerHTML = sql;
selectFilter.appendChild(option);
});
var selectExpand = new Expand({
view: view,
expandTooltip: "Filter by Difficulty",
expandIconClass: "esri-icon-filter",
content: selectFilter,
});
view.ui.add(selectExpand, "top-left");
selectFilter.addEventListener('change', function(event) {
setFeatureLayerViewFilter(event.target.value);
});
function setFeatureLayerFilter(expression) {
featureLayer.definitionExpression = expression;
}
function setFeatureLayerViewFilter(expression) {
view.whenLayerView(trails).then(function(featureLayerView){
featureLayerView.filter = {
where: expression
};
});
}
