nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Filter Layer and Pass Value

mjbrgis

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.

Find more posts tagged with

Accepted answers

mjbrgis

Oh my gosh, thank you, thank you, thank you. That worked.

I realize I'm making things harder but let me explain what I'm attempting to do. I have a layer of colleges that includes two attributes for school colors. They are in hex values. I wanted to write a program that would use these values to automatically color the symbol and label using the school's colors. The only way I could vary the label color was to create a graphics layer.

It may not be the most useful program, but it certainly helped me learn a lot.

Thanks again.

JoelBennett

@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.

All comments

mjbrgis

JoelBennett

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.

Jeff.Thompson@arlingtontx.gov_arlingtontx

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/

mjbrgis

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.

Jeff.Thompson@arlingtontx.gov_arlingtontx

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/

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.