Hello all,
I am new to ESRI as well as JavaScript.
I am currently trying to develop a custom widget that takes attributes of a field within a FeatureLayer and gives you the option to filter between them. So the structure would be this:
---- [FeatureLayer]
------ [FIELD]
---------- [ATTRIBUTES: x,y,z,...,]
With the widget then giving you the ability to input a FeatureLayer, a specific FIELD within the FeatureLayer and which ATTRIBUTES within that FIELD you would like to filter and outputting a drop down menu on the map as a selector.
Code wise I have this:
[FILE] main.ts
-----------------------------------------------------------------------------------
//// preamble with all import [PACKAGE] from "PLACE".
//BaseMap
const map = new EsriMap({
basemap: "TYPE"
});
//Widget view
const view = new MapView({
map: map,
container: "viewDiv",
});
//FeatureLayer
const layer = new FeatureLayer({
id: "FIELD",
url: "URL",
outFields: ["FIELD"],
});
map.add(layer);
var CustomFilter = new CustomWidget({
// VARIABLES HERE
});
view.ui.add(CustomFilter, "top-right");
-----------------------------------------------------------------------------------
[FILE] and the corresponding CustomWidget.tsx file:
-----------------------------------------------------------------------------------
/// <amd-dependency path="esri/core/tsSupport/declareExtendsHelper" name="__extends" />
/// <amd-dependency path="esri/core/tsSupport/decorateHelper" name="__decorate" />
//// preamble with all import [PACKAGE] from "PLACE".
@subclass("CustomWidget")
class CustomWidget extends declared(Widget) {
// CODE GOES HERE
}
export = FilterWidget;
-----------------------------------------------------------------------------------
as a reference, I got it to work without being a widget using the following code;
-----------------------------------------------------------------------------------
// Display a drop-down menu for filtering the FeatureLayer
var sqlExpressions = ["[ATTRIBUTE1] = [VALUE1] ", "[ATTRIBUTE2] = [VALUE2]", "[ATTRIBUTE3] = [VALUE3]"];
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);
});
view.ui.add(selectFilter, "top-right");
// Filter the drop-down menu options based on title attribute
function setFeatureLayerViewFilter(expression: any) {
view.whenLayerView(layer).then(function(featureLayerView: any) {
featureLayerView.filter = {
where: expression
};
});
}
selectFilter.addEventListener('change', function(event) {
setFeatureLayerViewFilter((event.target as HTMLInputElement).value);
});
-----------------------------------------------------------------------------------
Any help on how to get started writing this code or converting it into a widget would be much appreciated. I have tried gathering information on the ESRI ecosystem but I need a little more help if possible 🙂
Thank you in advance
