I have created a layer of Virginia Colleges and Universities. I have also added a filter for public or private schools. The full code is here: https://github.com/mjbrgis/geojson/blob/main/layers-AGOL-VA-colleges-sample.html
The labels for the schools are separate graphics layers. I want to be able to add or remove graphics layers based on the chosen filter. However, I can't for the life of me figure out how to pass the chosen filter value to another function. The general idea is this:
- initial load shows all schools and all labels
- filtering for public schools shows public schools, removes all labels, shows public labels, removes private labels (if necessary)
- filtering for private schools shows private schools, removes all labels, removes public labels (if necessary), shows private labels
Any advice would be much appreciated.
Solved! Go to Solution.
@JeffreyThompson2 makes good points here, and were I to create this my design would be along those lines. You may very well end up doing a redesign, but as it stands you have a 99.9% solution for the problem you've described, and you also seem interested in knowing where you went wrong. As such, It looks to me like the problem lies in the "filterByCollege" function, which you have as follows:
function filterByCollege(event) {
let selectedCollegeType = event.target.getAttribute("TYPE");
collegeLayerView.filter = {
where: "TYPE = '" + selectedCollegeType + "'"
};
map.remove(graphicsLayer);
//map.add(graphicsLayerPublic);
map.add(graphicsLayerPrivate);
console.log(selectedCollegeType);
}
By changing it to the following, it appears to behave like what you've described:
function filterByCollege(event) {
let selectedCollegeType = event.target.getAttribute("TYPE");
collegeLayerView.filter = {
where: "TYPE = '" + selectedCollegeType + "'"
};
map.remove(graphicsLayer);
if (selectedCollegeType == "Public") {
map.add(graphicsLayerPublic);
map.remove(graphicsLayerPrivate);
} else {
map.remove(graphicsLayerPublic);
map.add(graphicsLayerPrivate);
}
console.log(selectedCollegeType);
}
Basically, removed lines 7 and 8 from the original, and added lines 7-13.
You will want to use FeatureLayers, not GraphicLayers.
https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-FeatureLayer.html
If you can think of an idea for a map, there is probably a very similar coding sample. This one shows how to build a button that filters a FeatureLayer by its attributes.
https://developers.arcgis.com/javascript/latest/sample-code/featurefilter-attributes/
Thank you but I'm using graphics layers because I want the label colors to vary. If I use labels on a feature layer, they will all be colored the same.
GraphicLayers are intended to be used as just graphics. It is possible to get what you want out of a GraphicLayer, but it will be a lot more work and perform worse than filtering a FeatureLayer.
If you need to use multiple label styles in a FeatureLayer, you can set up label classes, like this example.
https://developers.arcgis.com/javascript/latest/sample-code/labels-multiple-classes/
@JeffreyThompson2 makes good points here, and were I to create this my design would be along those lines. You may very well end up doing a redesign, but as it stands you have a 99.9% solution for the problem you've described, and you also seem interested in knowing where you went wrong. As such, It looks to me like the problem lies in the "filterByCollege" function, which you have as follows:
function filterByCollege(event) {
let selectedCollegeType = event.target.getAttribute("TYPE");
collegeLayerView.filter = {
where: "TYPE = '" + selectedCollegeType + "'"
};
map.remove(graphicsLayer);
//map.add(graphicsLayerPublic);
map.add(graphicsLayerPrivate);
console.log(selectedCollegeType);
}
By changing it to the following, it appears to behave like what you've described:
function filterByCollege(event) {
let selectedCollegeType = event.target.getAttribute("TYPE");
collegeLayerView.filter = {
where: "TYPE = '" + selectedCollegeType + "'"
};
map.remove(graphicsLayer);
if (selectedCollegeType == "Public") {
map.add(graphicsLayerPublic);
map.remove(graphicsLayerPrivate);
} else {
map.remove(graphicsLayerPublic);
map.add(graphicsLayerPrivate);
}
console.log(selectedCollegeType);
}
Basically, removed lines 7 and 8 from the original, and added lines 7-13.