I'm trying to create a ClassBreakRenderer and set it on a GraphicsOvelay and cannot get it to work. The renderer works fine on a FeatureLayer, but doesn't work on a GraphicsOverlay that's been created using the same data as the FeatureLayer. I'm not sure what I'm missing here. Is there a sample somewhere that shows how to do this? I pasted the code below, and also attached the repro case, in case someone is up for giving me a hand in getting to the bottom of this. Working with 100.5. Thank you!!! - Mara private async void RenderData ( ) { // Create a new map based on the streets base map. Map newMap = new Map ( Basemap . CreateStreets ( ) ) ; // Create an envelope that covers the continental US in the web Mercator spatial reference. Envelope continentalUSEnvelope = new Envelope ( - 14193469.5655232 , 2509617.28647268 , - 7228772.04749191 , 6737139.97573925 , SpatialReferences . WebMercator ) ; // Zoom the map to the extent of the envelope. newMap . InitialViewpoint = new Viewpoint ( continentalUSEnvelope ) ; // Assign the map to the MapView. MyMapView . Map = newMap ; MyMapView . GraphicsOverlays . Add ( new GraphicsOverlay ( ) ) ; // CHANGE THIS FLAG TO SWITCH TEST BETWEEN FEATURE LAYER AND GRAPHICS OVERLAY var useFeatureLayer = true ; if ( useFeatureLayer ) { // set feature layer and renderer and add it to the map var featureLayer = new FeatureLayer ( new Uri ( "https://services8.arcgis.com/KsXZDThvSinzJ3pq/arcgis/rest/services/test_pipeline/FeatureServer/0" ) ) ; featureLayer . Renderer = CreateClassBreaksRenderer ( ) ; MyMapView . Map . OperationalLayers . Add ( featureLayer ) ; } else { // set feature table and query it to retrieve all features var featTable = new ServiceFeatureTable ( new Uri ( "https://services8.arcgis.com/KsXZDThvSinzJ3pq/arcgis/rest/services/test_pipeline/FeatureServer/0" ) ) ; var queryParams = new QueryParameters { WhereClause = "1=1" } ; var featureResult = await featTable . QueryFeaturesAsync ( queryParams , QueryFeatureFields . LoadAll ) ; // create graphics from the features and add them to the map in a graphics overlay foreach ( var result in featureResult ) { var pipeSegment = result . Geometry ; var graphic = new Graphic ( pipeSegment ) ; graphic . Attributes . Add ( "break" , result . Attributes [ "break" ] ) ; MyMapView . GraphicsOverlays [ 0 ] . Graphics . Add ( new Graphic ( pipeSegment ) ) ; } // create and set renderer for the graphics overlay MyMapView . GraphicsOverlays [ 0 ] . Renderer = CreateClassBreaksRenderer ( ) ; } } private ClassBreaksRenderer CreateClassBreaksRenderer ( ) { // Create symbols var symbol1 = new SimpleLineSymbol ( SimpleLineSymbolStyle . Solid , Color . Red , 7 ) ; var symbol2 = new SimpleLineSymbol ( SimpleLineSymbolStyle . Solid , Color . Yellow , 7 ) ; var symbol3 = new SimpleLineSymbol ( SimpleLineSymbolStyle . Solid , Color . Green , 7 ) ; // Create class breaks List ClassBreak > listClassBreaks = new List ClassBreak > { new ClassBreak ( "1" , "1" , 0 , 1 , symbol1 ) , new ClassBreak ( "2" , "2" , 1 , 2 , symbol2 ) , new ClassBreak ( "3" , "3" , 2 , 3 , symbol3 ) , } ; // Create and return the a class break renderer for use with the "break" field return new ClassBreaksRenderer ( "break" , listClassBreaks ) ; } TestApp.zip

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; } } }

How to set ClassBreakRenderer on GraphicsOvelay

MaraStoica2

I'm trying to create a ClassBreakRenderer and set it on a GraphicsOvelay and cannot get it to work. The renderer works fine on a FeatureLayer, but doesn't work on a GraphicsOverlay that's been created using the same data as the FeatureLayer. I'm not sure what I'm missing here. Is there a sample somewhere that shows how to do this? I pasted the code below, and also attached the repro case, in case someone is up for giving me a hand in getting to the bottom of this. Working with 100.5. Thank you!!!

- Mara

<SPAN class="keyword token">private</SPAN> <SPAN class="keyword token">async</SPAN> <SPAN class="keyword token">void</SPAN> <SPAN class="token function">RenderData</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN>
<SPAN class="punctuation token">{</SPAN>
	<SPAN class="comment token">// Create a new map based on the streets base map.</SPAN>
	Map newMap <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Map</SPAN><SPAN class="punctuation token">(</SPAN>Basemap<SPAN class="punctuation token">.</SPAN><SPAN class="token function">CreateStreets</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

	<SPAN class="comment token">// Create an envelope that covers the continental US in the web Mercator spatial reference.</SPAN>
	Envelope continentalUSEnvelope <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Envelope</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="operator token">-</SPAN><SPAN class="number token">14193469.5655232</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">2509617.28647268</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="operator token">-</SPAN><SPAN class="number token">7228772.04749191</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">6737139.97573925</SPAN><SPAN class="punctuation token">,</SPAN> SpatialReferences<SPAN class="punctuation token">.</SPAN>WebMercator<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

	<SPAN class="comment token">// Zoom the map to the extent of the envelope.</SPAN>
	newMap<SPAN class="punctuation token">.</SPAN>InitialViewpoint <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Viewpoint</SPAN><SPAN class="punctuation token">(</SPAN>continentalUSEnvelope<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

	<SPAN class="comment token">// Assign the map to the MapView.</SPAN>
	MyMapView<SPAN class="punctuation token">.</SPAN>Map <SPAN class="operator token">=</SPAN> newMap<SPAN class="punctuation token">;</SPAN>
	MyMapView<SPAN class="punctuation token">.</SPAN>GraphicsOverlays<SPAN class="punctuation token">.</SPAN><SPAN class="token function">Add</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">GraphicsOverlay</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

	<SPAN class="comment token">// CHANGE THIS FLAG TO SWITCH TEST BETWEEN FEATURE LAYER AND GRAPHICS OVERLAY</SPAN>
	<SPAN class="keyword token">var</SPAN> useFeatureLayer <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">;</SPAN>

	<SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>useFeatureLayer<SPAN class="punctuation token">)</SPAN>
	<SPAN class="punctuation token">{</SPAN>
		<SPAN class="comment token">// set feature layer and renderer and add it to the map</SPAN>
		<SPAN class="keyword token">var</SPAN> featureLayer <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">FeatureLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Uri</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"https://services8.arcgis.com/KsXZDThvSinzJ3pq/arcgis/rest/services/test_pipeline/FeatureServer/0"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
		featureLayer<SPAN class="punctuation token">.</SPAN>Renderer <SPAN class="operator token">=</SPAN> <SPAN class="token function">CreateClassBreaksRenderer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
		MyMapView<SPAN class="punctuation token">.</SPAN>Map<SPAN class="punctuation token">.</SPAN>OperationalLayers<SPAN class="punctuation token">.</SPAN><SPAN class="token function">Add</SPAN><SPAN class="punctuation token">(</SPAN>featureLayer<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
	<SPAN class="punctuation token">}</SPAN>
	<SPAN class="keyword token">else</SPAN>
	<SPAN class="punctuation token">{</SPAN>
		<SPAN class="comment token">// set feature table and query it to retrieve all features</SPAN>
		<SPAN class="keyword token">var</SPAN> featTable <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">ServiceFeatureTable</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Uri</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"https://services8.arcgis.com/KsXZDThvSinzJ3pq/arcgis/rest/services/test_pipeline/FeatureServer/0"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
		<SPAN class="keyword token">var</SPAN> queryParams <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">QueryParameters</SPAN> <SPAN class="punctuation token">{</SPAN> WhereClause <SPAN class="operator token">=</SPAN> <SPAN class="string token">"1=1"</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN>
		<SPAN class="keyword token">var</SPAN> featureResult <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">await</SPAN> featTable<SPAN class="punctuation token">.</SPAN><SPAN class="token function">QueryFeaturesAsync</SPAN><SPAN class="punctuation token">(</SPAN>queryParams<SPAN class="punctuation token">,</SPAN> QueryFeatureFields<SPAN class="punctuation token">.</SPAN>LoadAll<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

		<SPAN class="comment token">// create graphics from the features and add them to the map in a graphics overlay</SPAN>
		<SPAN class="keyword token">foreach</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">var</SPAN> result <SPAN class="keyword token">in</SPAN> featureResult<SPAN class="punctuation token">)</SPAN>
		<SPAN class="punctuation token">{</SPAN>
			<SPAN class="keyword token">var</SPAN> pipeSegment <SPAN class="operator token">=</SPAN> result<SPAN class="punctuation token">.</SPAN>Geometry<SPAN class="punctuation token">;</SPAN>
			<SPAN class="keyword token">var</SPAN> graphic <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Graphic</SPAN><SPAN class="punctuation token">(</SPAN>pipeSegment<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
			graphic<SPAN class="punctuation token">.</SPAN>Attributes<SPAN class="punctuation token">.</SPAN><SPAN class="token function">Add</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"break"</SPAN><SPAN class="punctuation token">,</SPAN> result<SPAN class="punctuation token">.</SPAN>Attributes<SPAN class="punctuation token">[</SPAN><SPAN class="string token">"break"</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
			MyMapView<SPAN class="punctuation token">.</SPAN>GraphicsOverlays<SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>Graphics<SPAN class="punctuation token">.</SPAN><SPAN class="token function">Add</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Graphic</SPAN><SPAN class="punctuation token">(</SPAN>pipeSegment<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
		<SPAN class="punctuation token">}</SPAN>

		<SPAN class="comment token">// create and set renderer for the graphics overlay</SPAN>
		MyMapView<SPAN class="punctuation token">.</SPAN>GraphicsOverlays<SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>Renderer <SPAN class="operator token">=</SPAN> <SPAN class="token function">CreateClassBreaksRenderer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
	<SPAN class="punctuation token">}</SPAN>
<SPAN class="punctuation token">}</SPAN>

<SPAN class="keyword token">private</SPAN> ClassBreaksRenderer <SPAN class="token function">CreateClassBreaksRenderer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN>
<SPAN class="punctuation token">{</SPAN>
	<SPAN class="comment token">// Create symbols</SPAN>
	<SPAN class="keyword token">var</SPAN> symbol1 <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">SimpleLineSymbol</SPAN><SPAN class="punctuation token">(</SPAN>SimpleLineSymbolStyle<SPAN class="punctuation token">.</SPAN>Solid<SPAN class="punctuation token">,</SPAN> Color<SPAN class="punctuation token">.</SPAN>Red<SPAN class="punctuation token">,</SPAN> <SPAN class="number token">7</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
	<SPAN class="keyword token">var</SPAN> symbol2 <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">SimpleLineSymbol</SPAN><SPAN class="punctuation token">(</SPAN>SimpleLineSymbolStyle<SPAN class="punctuation token">.</SPAN>Solid<SPAN class="punctuation token">,</SPAN> Color<SPAN class="punctuation token">.</SPAN>Yellow<SPAN class="punctuation token">,</SPAN> <SPAN class="number token">7</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
	<SPAN class="keyword token">var</SPAN> symbol3 <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">SimpleLineSymbol</SPAN><SPAN class="punctuation token">(</SPAN>SimpleLineSymbolStyle<SPAN class="punctuation token">.</SPAN>Solid<SPAN class="punctuation token">,</SPAN> Color<SPAN class="punctuation token">.</SPAN>Green<SPAN class="punctuation token">,</SPAN> <SPAN class="number token">7</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

	<SPAN class="comment token">// Create class breaks</SPAN>
	List<SPAN class="operator token"><</SPAN>ClassBreak<SPAN class="operator token">></SPAN> listClassBreaks <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">List</SPAN><SPAN class="operator token"><</SPAN>ClassBreak<SPAN class="operator token">></SPAN>
	<SPAN class="punctuation token">{</SPAN>
		<SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">ClassBreak</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"1"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"1"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">1</SPAN><SPAN class="punctuation token">,</SPAN> symbol1<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN>
		<SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">ClassBreak</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"2"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"2"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">1</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">2</SPAN><SPAN class="punctuation token">,</SPAN> symbol2<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN>
		<SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">ClassBreak</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"3"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"3"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">2</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">3</SPAN><SPAN class="punctuation token">,</SPAN> symbol3<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN>
	<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN>

	<SPAN class="comment token">// Create and return the a class break renderer for use with the "break" field</SPAN>
	<SPAN class="keyword token">return</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">ClassBreaksRenderer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"break"</SPAN><SPAN class="punctuation token">,</SPAN> listClassBreaks<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

TestApp.zip

Find more posts tagged with

Accepted answers

SomeGISGuy

Looks like you're adding the wrong graphic (a new instance that doesn't have that attribute set)

Change

MyMapView.GraphicsOverlays[0].Graphics.Add(new Graphic(pipeSegment));

MyMapView.GraphicsOverlays[0].Graphics.Add(graphic);

All comments

MaraStoica2

I was afraid it was something silly like that. Thanks Morten!

SomeGISGuy

Looks like you're adding the wrong graphic (a new instance that doesn't have that attribute set)

Change

MyMapView.GraphicsOverlays[0].Graphics.Add(new Graphic(pipeSegment));

MyMapView.GraphicsOverlays[0].Graphics.Add(graphic);

KimberlySaballett

The DefaultSymbol for the ClassBreaksRenderer seems to be working fine when it is set. I believe the class breaks symbology not applying may be more an issue with the renderer not being able to reach the graphic's attributes but we'll need to test it further.

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.