Query Automatically

136
3
Jump to solution
09-23-2020 10:57 AM
JaredPilbeam2
MVP Regular Contributor

This app works fine as it is. You select from one or both of the drop-downs and then hit the "Search" button to start the search. But, I've been requested to have the search happen automatically as you select from the drop-down (i.e. without hitting the search button). Basically, I'd like to mimic the search from this website: Will County EEC Mobile Site. What would I have to change to do this?

I've been studying this sample code because the query for the "Well Type" does what I'm wanting: https://developers.arcgis.com/javascript/latest/sample-code/featurelayer-query/index.html. But, I can't grasp it.

Here is the functioning JS. And here is the whole app on Code Pen.

// JavaScript source code
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"esri/layers/GraphicsLayer",
"esri/widgets/Search",
"esri/widgets/Home",
"esri/widgets/Expand"

], function (
Map,
MapView,
FeatureLayer,
GraphicsLayer,
Search,
Home,
Expand

) {
var catTypeSelect = document.getElementById("category");
var keyTypeSelect = document.getElementById("keyword");
var filterButton = document.getElementById("filterBtn");
var resRb = document.getElementById("ResidentialRB");

//***popups***
//popup template
var template = { //autocasts the new template
title: "<font size='2.75px'><b>{USER_Name}</b>",
content: [
{
// You can also set a descriptive text element
type: "text", // TextContentElement
text: "<font color='#1c9c52'><b>{Description}</b>"
},
{ //set content elements in the order to display
type: "fields",
fieldInfos: [{
fieldName: "USER_Addre",
label: "Address",
visible: true,
},
{
fieldName: "USER_City",
label: "City",
visible: true,
},
{
fieldName: "USER_Zip",
label: "Zip Code",
visible: true,
},
{
fieldName: "USER_Phone",
label: " Phone",
visible: true,
},
{
fieldName: "USER_Link",
label: "Website",
visible: true,
},
{
fieldName: "USER_Notes",
label: "Extra Notes",
visible: true,
},]
},
],
};

// Recycle Layer
var recycleLayer = new FeatureLayer({
portalItem: {
// autocasts as new PortalItem()
id: "b5665da3feab4b6091914cbfe4ab028f"
},
popupTemplate: template,
outFields: ["*"],
visible: false
});

// GraphicsLayer for displaying results
var resultsLayer = new GraphicsLayer();
//Set map view
var map = new Map({
basemap: "dark-gray",
layers: [recycleLayer, resultsLayer]
});

var view = new MapView({
container: "viewDiv",
map: map,
center: [-88.7, 41.8],
zoom: 8.7,
padding: {
right: 380,
},

//popup
popup: {
}
});
//widthbreakpoint for sidebar
view.watch("widthBreakpoint", function (newVal) {
console.log(newVal);
if ((newVal === "medium") || newVal === "small") {
document.getElementById('sidebar').style.display = 'none';
}
else {
document.getElementById('sidebar').style.display = 'block';
}
});

//***widgets***

////Expand instance and set content property to the div element
//var bgExpand = new Expand({
// view: view,
// content: div
//});

// // Add the expand instance to the ui
//view.ui.add(textExpand, "top-right");

//home widget
var homeBtn = new Home({
view: view,
});
view.ui.add(homeBtn, "bottom-left");

//search widget
const searchWidget = new Search({
view: view
});
//Adds the search widget below other elements in
//the top left corner of the view
view.ui.add(searchWidget, {
position: "bottom-left",
index: 2
})

// query all features from the recycle layer
view
.when(function () {
return recycleLayer.when(function () {
var query = recycleLayer.createQuery();
return recycleLayer.queryFeatures(query);
});
})
.then(getValues)
.then(getUniqueValues)
.then(addToSelect)
// re-query the layer based on the selected Category and re-populate the keyword select
catTypeSelect.addEventListener("change", function () {
var sqlExp = "";
if (catTypeSelect.selectedIndex > 0) {
sqlExp += "Category LIKE '%" + catTypeSelect.options[catTypeSelect.selectedIndex].value + "%'";
}
var query = recycleLayer.createQuery();
query.where = sqlExp;
recycleLayer.queryFeatures(query)
.then(getValues2)
.then(getUniqueValues2)
.then(addToSelect2)
});

// return an array of all the values in the
// Category and item_keyword fields of the Recycle layer
function getValues(response) {
var features = response.features;
var values = features.map(function (feature) {
return {
Category: feature.attributes.Category,
item_keyword: feature.attributes.item_keyword
}
});
return values;
}
// re-query the layer based on the selected Category and re-populate the keyword select
function getValues2(response) {
var features = response.features;
var values = features.map(function (feature) {
return feature.attributes.item_keyword
});
return values;
}

// return an array of unique values in
// the item_keyword and Category fields of the Recycle layer
function getUniqueValues(values) {
var uniqueKeyValues = [];
var uniqueCatValues = [];

values.forEach(function (item, i) {
var keyVal = item.item_keyword.split(";");
var catVal = item.Category.split(";");
catVal.map(function (val1) {
if (
(uniqueCatValues.length < 1 || uniqueCatValues.indexOf(val1) === -1) &&
val1 !== ""
) {
uniqueCatValues.push(val1);
}
});
keyVal.map(function (val2) {
if (
(uniqueKeyValues.length < 1 || uniqueKeyValues.indexOf(val2) === -1) &&
val2 !== ""
) {
uniqueKeyValues.push(val2);
}
});
});
return {
uKeyVals: uniqueKeyValues,
uCatVals: uniqueCatValues
};
}
// re-query the layer based on the selected Category and re-populate the keyword select
function getUniqueValues2(values) {
var uniqueKeyValues = [];

values.forEach(function (item, i) {
var keyVal = item.split(";");
keyVal.map(function (val2) {
if (
(uniqueKeyValues.length < 1 || uniqueKeyValues.indexOf(val2) === -1) &&
val2 !== ""
) {
uniqueKeyValues.push(val2);
}
});
});
return uniqueKeyValues;
}

// Add the unique values to the recycle type
// select element. This will allow the user
// to filter categories by type.
function addToSelect(values) {
var dOpt = document.createElement("option");
dOpt.value = "";

dOpt.selected = true;
dOpt.text = "Select one";
catTypeSelect.add(dOpt);
values.uCatVals.sort();
values.uCatVals.forEach(function (value) {
var option = document.createElement("option");
option.text = value;
catTypeSelect.add(option);
});

var dOpt2 = document.createElement("option");
dOpt2.value = "";

dOpt2.selected = true;
dOpt2.text = "Select one";
keyTypeSelect.add(dOpt2);
values.uKeyVals.sort();
values.uKeyVals.forEach(function (value) {
var option = document.createElement("option");
option.text = value;
keyTypeSelect.add(option);
});

return setDefinitionExpression();
}
// re-query the layer based on the selected Category and re-populate the keyword select
function addToSelect2(values) {
while (keyTypeSelect.options.length > 0) {
keyTypeSelect.remove(0);
}
var dOpt2 = document.createElement("option");
dOpt2.value = "";
dOpt2.disabled = true;
dOpt2.selected = true;
dOpt2.text = "Select one";
keyTypeSelect.add(dOpt2);
values.sort();
values.forEach(function (value) {
var option = document.createElement("option");
option.text = value;
keyTypeSelect.add(option);
});
return true
}

// set the definition expression on the recycle
// layer to reflect the selection of the user
function setDefinitionExpression() {
var sqlExp = "";
if (catTypeSelect.selectedIndex > 0) {
sqlExp += "Category LIKE '%" + catTypeSelect.options[catTypeSelect.selectedIndex].value + "%'";
}
if (keyTypeSelect.selectedIndex > 0) {
if (sqlExp === "") {
sqlExp += "item_keyword LIKE '%" + keyTypeSelect.options[keyTypeSelect.selectedIndex].value + "%'";
} else {
sqlExp += " AND item_keyword LIKE '%" + keyTypeSelect.options[keyTypeSelect.selectedIndex].value + "%'";
}
}
if (resRb.checked) {
if (sqlExp !== "") {
sqlExp += " AND USER_IsRes = 'TRUE'";
}

} else {
if (sqlExp !== "") {
sqlExp += " AND USER_IsBus = 'TRUE'";
}
}
console.info(sqlExp);
recycleLayer.definitionExpression = sqlExp;

if (!recycleLayer.visible) {
recycleLayer.visible = true;
}

return queryForGeometries();
}

// Get all the geometries of the recycle layer
// the createQuery() method creates a query
// object that respects the definitionExpression
// of the layer
function queryForGeometries() {
var rQuery = recycleLayer.createQuery();

return recycleLayer.queryFeatures(rQuery).then(function (response) {
rGeometries = response.features.map(function (feature) {
return feature.geometry;
});

return rGeometries;
});
}

filterButton.addEventListener("click", function () {
setDefinitionExpression();
});

});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
0 Kudos
1 Solution

Accepted Solutions
KenBuja
MVP Honored Contributor

Looking at it a bit more closely, I made the following changes. Now it responds when you change either dropdown menu and click either radio button.

// JavaScript source code
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"esri/layers/GraphicsLayer",
"esri/widgets/Search",
"esri/widgets/Home",
"esri/widgets/Expand"

], function (
Map,
MapView,
FeatureLayer,
GraphicsLayer,
Search,
Home,
Expand

) {
var catTypeSelect = document.getElementById("category");
var keyTypeSelect = document.getElementById("keyword");
var filterButton = document.getElementById("filterBtn");
var resRb = document.getElementById("ResidentialRB");
var busRb = document.getElementById("BusinessRB");
//***popups***
//popup template
var template = { //autocasts the new template
title: "<font size='2.75px'><b>{USER_Name}</b>",
content: [
{
// You can also set a descriptive text element
type: "text", // TextContentElement
text: "<font color='#1c9c52'><b>{Description}</b>"
},
{ //set content elements in the order to display
type: "fields",
fieldInfos: [{
fieldName: "USER_Addre",
label: "Address",
visible: true,
},
{
fieldName: "USER_City",
label: "City",
visible: true,
},
{
fieldName: "USER_Zip",
label: "Zip Code",
visible: true,
},
{
fieldName: "USER_Phone",
label: " Phone",
visible: true,
},
{
fieldName: "USER_Link",
label: "Website",
visible: true,
},
{
fieldName: "USER_Notes",
label: "Extra Notes",
visible: true,
},]
},
],
};

// Recycle Layer
var recycleLayer = new FeatureLayer({
portalItem: {
// autocasts as new PortalItem()
id: "b5665da3feab4b6091914cbfe4ab028f"
},
popupTemplate: template,
outFields: ["*"],
visible: false
});

// GraphicsLayer for displaying results
var resultsLayer = new GraphicsLayer();
//Set map view
var map = new Map({
basemap: "dark-gray",
layers: [recycleLayer, resultsLayer]
});

var view = new MapView({
container: "viewDiv",
map: map,
center: [-88.7, 41.8],
zoom: 8.7,
padding: {
right: 380,
},

//popup
popup: {
}
});
//widthbreakpoint for sidebar
view.watch("widthBreakpoint", function (newVal) {
console.log(newVal);
if ((newVal === "medium") || newVal === "small") {
document.getElementById('sidebar').style.display = 'none';
}
else {
document.getElementById('sidebar').style.display = 'block';
}
});

//***widgets***

////Expand instance and set content property to the div element
//var bgExpand = new Expand({
// view: view,
// content: div
//});

// // Add the expand instance to the ui
//view.ui.add(textExpand, "top-right");

//home widget
var homeBtn = new Home({
view: view,
});
view.ui.add(homeBtn, "bottom-left");

//search widget
const searchWidget = new Search({
view: view
});
//Adds the search widget below other elements in
//the top left corner of the view
view.ui.add(searchWidget, {
position: "bottom-left",
index: 2
})

// query all features from the recycle layer
view
.when(function () {
return recycleLayer.when(function () {
var query = recycleLayer.createQuery();
return recycleLayer.queryFeatures(query);
});
})
.then(getValues)
.then(getUniqueValues)
.then(addToSelect);
// re-query the layer based on the selected Category and re-populate the keyword select
catTypeSelect.addEventListener("change", function () {
var sqlExp = "";
if (catTypeSelect.selectedIndex > 0) {
sqlExp += "Category LIKE '%" + catTypeSelect.options[catTypeSelect.selectedIndex].value + "%'";
}
var query = recycleLayer.createQuery();
query.where = sqlExp;
recycleLayer.queryFeatures(query)
.then(getValues2)
.then(getUniqueValues2)
.then(addToSelect2);
setDefinitionExpression();
});

keyTypeSelect.addEventListener("change", setDefinitionExpression);

resRb.addEventListener("change", setDefinitionExpression);
busRb.addEventListener('change', setDefinitionExpression);


// return an array of all the values in the
// Category and item_keyword fields of the Recycle layer
function getValues(response) {
var features = response.features;
var values = features.map(function (feature) {
return {
Category: feature.attributes.Category,
item_keyword: feature.attributes.item_keyword
}
});
return values;
}
// re-query the layer based on the selected Category and re-populate the keyword select
function getValues2(response) {
var features = response.features;
var values = features.map(function (feature) {
return feature.attributes.item_keyword
});
return values;
}

// return an array of unique values in
// the item_keyword and Category fields of the Recycle layer
function getUniqueValues(values) {
var uniqueKeyValues = [];
var uniqueCatValues = [];

values.forEach(function (item, i) {
var keyVal = item.item_keyword.split(";");
var catVal = item.Category.split(";");
catVal.map(function (val1) {
if (
(uniqueCatValues.length < 1 || uniqueCatValues.indexOf(val1) === -1) &&
val1 !== ""
) {
uniqueCatValues.push(val1);
}
});
keyVal.map(function (val2) {
if (
(uniqueKeyValues.length < 1 || uniqueKeyValues.indexOf(val2) === -1) &&
val2 !== ""
) {
uniqueKeyValues.push(val2);
}
});
});
return {
uKeyVals: uniqueKeyValues,
uCatVals: uniqueCatValues
};
}
// re-query the layer based on the selected Category and re-populate the keyword select
function getUniqueValues2(values) {
var uniqueKeyValues = [];

values.forEach(function (item, i) {
var keyVal = item.split(";");
keyVal.map(function (val2) {
if (
(uniqueKeyValues.length < 1 || uniqueKeyValues.indexOf(val2) === -1) &&
val2 !== ""
) {
uniqueKeyValues.push(val2);
}
});
});
return uniqueKeyValues;
}

// Add the unique values to the recycle type
// select element. This will allow the user
// to filter categories by type.
function addToSelect(values) {
var dOpt = document.createElement("option");
dOpt.value = "";

dOpt.selected = true;
dOpt.text = "Select one";
catTypeSelect.add(dOpt);
values.uCatVals.sort();
values.uCatVals.forEach(function (value) {
var option = document.createElement("option");
option.text = value;
catTypeSelect.add(option);
});

var dOpt2 = document.createElement("option");
dOpt2.value = "";

dOpt2.selected = true;
dOpt2.text = "Select one";
keyTypeSelect.add(dOpt2);
values.uKeyVals.sort();
values.uKeyVals.forEach(function (value) {
var option = document.createElement("option");
option.text = value;
keyTypeSelect.add(option);
});

return setDefinitionExpression();
}
// re-query the layer based on the selected Category and re-populate the keyword select
function addToSelect2(values) {
while (keyTypeSelect.options.length > 0) {
keyTypeSelect.remove(0);
}
var dOpt2 = document.createElement("option");
dOpt2.value = "";
dOpt2.disabled = true;
dOpt2.selected = true;
dOpt2.text = "Select one";
keyTypeSelect.add(dOpt2);
values.sort();
values.forEach(function (value) {
var option = document.createElement("option");
option.text = value;
keyTypeSelect.add(option);
});
return true
}

// set the definition expression on the recycle
// layer to reflect the selection of the user
function setDefinitionExpression() {
var sqlExp = "";
if (catTypeSelect.selectedIndex > 0) {
sqlExp += "Category LIKE '%" + catTypeSelect.options[catTypeSelect.selectedIndex].value + "%'";
}
if (keyTypeSelect.selectedIndex > 0) {
if (sqlExp === "") {
sqlExp += "item_keyword LIKE '%" + keyTypeSelect.options[keyTypeSelect.selectedIndex].value + "%'";
} else {
sqlExp += " AND item_keyword LIKE '%" + keyTypeSelect.options[keyTypeSelect.selectedIndex].value + "%'";
}
}
if (resRb.checked) {
if (sqlExp !== "") {
sqlExp += " AND USER_IsRes = 'TRUE'";
}

} else {
if (sqlExp !== "") {
sqlExp += " AND USER_IsBus = 'TRUE'";
}
}
console.info(sqlExp);
recycleLayer.definitionExpression = sqlExp;

if (!recycleLayer.visible) {
recycleLayer.visible = true;
}

return queryForGeometries();
}

// Get all the geometries of the recycle layer
// the createQuery() method creates a query
// object that respects the definitionExpression
// of the layer
function queryForGeometries() {
console.log('Running query');
var rQuery = recycleLayer.createQuery();

return recycleLayer.queryFeatures(rQuery).then(function (response) {
rGeometries = response.features.map(function (feature) {
return feature.geometry;
});

return rGeometries;
});
}

filterButton.addEventListener("click", function () {
setDefinitionExpression();
});

});

View solution in original post

0 Kudos
3 Replies
KenBuja
MVP Honored Contributor

Simply add the setDefinitionExpression function to the catTypeSelect's change function (line 166)

JaredPilbeam2
MVP Regular Contributor

Ken,

Do you mean line 166 from above?

0 Kudos
KenBuja
MVP Honored Contributor

Looking at it a bit more closely, I made the following changes. Now it responds when you change either dropdown menu and click either radio button.

// JavaScript source code
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"esri/layers/GraphicsLayer",
"esri/widgets/Search",
"esri/widgets/Home",
"esri/widgets/Expand"

], function (
Map,
MapView,
FeatureLayer,
GraphicsLayer,
Search,
Home,
Expand

) {
var catTypeSelect = document.getElementById("category");
var keyTypeSelect = document.getElementById("keyword");
var filterButton = document.getElementById("filterBtn");
var resRb = document.getElementById("ResidentialRB");
var busRb = document.getElementById("BusinessRB");
//***popups***
//popup template
var template = { //autocasts the new template
title: "<font size='2.75px'><b>{USER_Name}</b>",
content: [
{
// You can also set a descriptive text element
type: "text", // TextContentElement
text: "<font color='#1c9c52'><b>{Description}</b>"
},
{ //set content elements in the order to display
type: "fields",
fieldInfos: [{
fieldName: "USER_Addre",
label: "Address",
visible: true,
},
{
fieldName: "USER_City",
label: "City",
visible: true,
},
{
fieldName: "USER_Zip",
label: "Zip Code",
visible: true,
},
{
fieldName: "USER_Phone",
label: " Phone",
visible: true,
},
{
fieldName: "USER_Link",
label: "Website",
visible: true,
},
{
fieldName: "USER_Notes",
label: "Extra Notes",
visible: true,
},]
},
],
};

// Recycle Layer
var recycleLayer = new FeatureLayer({
portalItem: {
// autocasts as new PortalItem()
id: "b5665da3feab4b6091914cbfe4ab028f"
},
popupTemplate: template,
outFields: ["*"],
visible: false
});

// GraphicsLayer for displaying results
var resultsLayer = new GraphicsLayer();
//Set map view
var map = new Map({
basemap: "dark-gray",
layers: [recycleLayer, resultsLayer]
});

var view = new MapView({
container: "viewDiv",
map: map,
center: [-88.7, 41.8],
zoom: 8.7,
padding: {
right: 380,
},

//popup
popup: {
}
});
//widthbreakpoint for sidebar
view.watch("widthBreakpoint", function (newVal) {
console.log(newVal);
if ((newVal === "medium") || newVal === "small") {
document.getElementById('sidebar').style.display = 'none';
}
else {
document.getElementById('sidebar').style.display = 'block';
}
});

//***widgets***

////Expand instance and set content property to the div element
//var bgExpand = new Expand({
// view: view,
// content: div
//});

// // Add the expand instance to the ui
//view.ui.add(textExpand, "top-right");

//home widget
var homeBtn = new Home({
view: view,
});
view.ui.add(homeBtn, "bottom-left");

//search widget
const searchWidget = new Search({
view: view
});
//Adds the search widget below other elements in
//the top left corner of the view
view.ui.add(searchWidget, {
position: "bottom-left",
index: 2
})

// query all features from the recycle layer
view
.when(function () {
return recycleLayer.when(function () {
var query = recycleLayer.createQuery();
return recycleLayer.queryFeatures(query);
});
})
.then(getValues)
.then(getUniqueValues)
.then(addToSelect);
// re-query the layer based on the selected Category and re-populate the keyword select
catTypeSelect.addEventListener("change", function () {
var sqlExp = "";
if (catTypeSelect.selectedIndex > 0) {
sqlExp += "Category LIKE '%" + catTypeSelect.options[catTypeSelect.selectedIndex].value + "%'";
}
var query = recycleLayer.createQuery();
query.where = sqlExp;
recycleLayer.queryFeatures(query)
.then(getValues2)
.then(getUniqueValues2)
.then(addToSelect2);
setDefinitionExpression();
});

keyTypeSelect.addEventListener("change", setDefinitionExpression);

resRb.addEventListener("change", setDefinitionExpression);
busRb.addEventListener('change', setDefinitionExpression);


// return an array of all the values in the
// Category and item_keyword fields of the Recycle layer
function getValues(response) {
var features = response.features;
var values = features.map(function (feature) {
return {
Category: feature.attributes.Category,
item_keyword: feature.attributes.item_keyword
}
});
return values;
}
// re-query the layer based on the selected Category and re-populate the keyword select
function getValues2(response) {
var features = response.features;
var values = features.map(function (feature) {
return feature.attributes.item_keyword
});
return values;
}

// return an array of unique values in
// the item_keyword and Category fields of the Recycle layer
function getUniqueValues(values) {
var uniqueKeyValues = [];
var uniqueCatValues = [];

values.forEach(function (item, i) {
var keyVal = item.item_keyword.split(";");
var catVal = item.Category.split(";");
catVal.map(function (val1) {
if (
(uniqueCatValues.length < 1 || uniqueCatValues.indexOf(val1) === -1) &&
val1 !== ""
) {
uniqueCatValues.push(val1);
}
});
keyVal.map(function (val2) {
if (
(uniqueKeyValues.length < 1 || uniqueKeyValues.indexOf(val2) === -1) &&
val2 !== ""
) {
uniqueKeyValues.push(val2);
}
});
});
return {
uKeyVals: uniqueKeyValues,
uCatVals: uniqueCatValues
};
}
// re-query the layer based on the selected Category and re-populate the keyword select
function getUniqueValues2(values) {
var uniqueKeyValues = [];

values.forEach(function (item, i) {
var keyVal = item.split(";");
keyVal.map(function (val2) {
if (
(uniqueKeyValues.length < 1 || uniqueKeyValues.indexOf(val2) === -1) &&
val2 !== ""
) {
uniqueKeyValues.push(val2);
}
});
});
return uniqueKeyValues;
}

// Add the unique values to the recycle type
// select element. This will allow the user
// to filter categories by type.
function addToSelect(values) {
var dOpt = document.createElement("option");
dOpt.value = "";

dOpt.selected = true;
dOpt.text = "Select one";
catTypeSelect.add(dOpt);
values.uCatVals.sort();
values.uCatVals.forEach(function (value) {
var option = document.createElement("option");
option.text = value;
catTypeSelect.add(option);
});

var dOpt2 = document.createElement("option");
dOpt2.value = "";

dOpt2.selected = true;
dOpt2.text = "Select one";
keyTypeSelect.add(dOpt2);
values.uKeyVals.sort();
values.uKeyVals.forEach(function (value) {
var option = document.createElement("option");
option.text = value;
keyTypeSelect.add(option);
});

return setDefinitionExpression();
}
// re-query the layer based on the selected Category and re-populate the keyword select
function addToSelect2(values) {
while (keyTypeSelect.options.length > 0) {
keyTypeSelect.remove(0);
}
var dOpt2 = document.createElement("option");
dOpt2.value = "";
dOpt2.disabled = true;
dOpt2.selected = true;
dOpt2.text = "Select one";
keyTypeSelect.add(dOpt2);
values.sort();
values.forEach(function (value) {
var option = document.createElement("option");
option.text = value;
keyTypeSelect.add(option);
});
return true
}

// set the definition expression on the recycle
// layer to reflect the selection of the user
function setDefinitionExpression() {
var sqlExp = "";
if (catTypeSelect.selectedIndex > 0) {
sqlExp += "Category LIKE '%" + catTypeSelect.options[catTypeSelect.selectedIndex].value + "%'";
}
if (keyTypeSelect.selectedIndex > 0) {
if (sqlExp === "") {
sqlExp += "item_keyword LIKE '%" + keyTypeSelect.options[keyTypeSelect.selectedIndex].value + "%'";
} else {
sqlExp += " AND item_keyword LIKE '%" + keyTypeSelect.options[keyTypeSelect.selectedIndex].value + "%'";
}
}
if (resRb.checked) {
if (sqlExp !== "") {
sqlExp += " AND USER_IsRes = 'TRUE'";
}

} else {
if (sqlExp !== "") {
sqlExp += " AND USER_IsBus = 'TRUE'";
}
}
console.info(sqlExp);
recycleLayer.definitionExpression = sqlExp;

if (!recycleLayer.visible) {
recycleLayer.visible = true;
}

return queryForGeometries();
}

// Get all the geometries of the recycle layer
// the createQuery() method creates a query
// object that respects the definitionExpression
// of the layer
function queryForGeometries() {
console.log('Running query');
var rQuery = recycleLayer.createQuery();

return recycleLayer.queryFeatures(rQuery).then(function (response) {
rGeometries = response.features.map(function (feature) {
return feature.geometry;
});

return rGeometries;
});
}

filterButton.addEventListener("click", function () {
setDefinitionExpression();
});

});

View solution in original post

0 Kudos