topic Javascript 4.x legend refresh in ArcGIS JavaScript Maps SDK Questions

Javascript 4.x legend refresh

Mr_Kirkwood — Fri, 15 Nov 2024 22:51:12 GMT

I am using JS 4.30. I would like ot figure out how to get the legend to update the symbology of what is in the map when zoomed in. The legend for one of my layers has over 200 symbols. I have a fucntion to zoom into a specific building and floor. That building and floor does not have all 200 symbols it only has 10. I would like the legedn to update and show only the 10 symbols in the map.

The print funtion does this see attached.

I appreciate any help Thank you!

Re: Javascript 4.x legend refresh

JoelBennett — Sat, 16 Nov 2024 00:25:13 GMT

You could use something like this, which appears to do the trick. Basically, after every time the layer redraws, a new renderer is created with only the symbology visible in the view, and then assigned to the layer. Just pass in references to your featureLayer and view and it does the rest:

Re: Javascript 4.x legend refresh

Mr_Kirkwood — Mon, 18 Nov 2024 15:07:27 GMT

Joel,

Thank you for this code. I will figure out how to implement it and get back to you with my results.

Re: Javascript 4.x legend refresh

Mr_Kirkwood — Mon, 18 Nov 2024 16:38:29 GMT

Joel,

This worked perfectly. I really appreciate your help on this! Thank you!

Re: Javascript 4.x legend refresh

Mr_Kirkwood — Mon, 18 Nov 2024 16:39:17 GMT

p.s. is there anyway to make the legend display in ascending order? The values are randomly in order.

Re: Javascript 4.x legend refresh

JoelBennett — Mon, 18 Nov 2024 17:31:33 GMT

I believe that if you replace line 43 with this, it will maintain their original order:

newRenderer.uniqueValueInfos = uniqueValueInfos.sort(function(a, b) {return originalRenderer.uniqueValueInfos.indexOf(a) - originalRenderer.uniqueValueInfos.indexOf(b);});

Otherwise, you can implement the sort function according to how you want.

Re: Javascript 4.x legend refresh

Mr_Kirkwood — Mon, 18 Nov 2024 17:38:54 GMT

Once again you have solved the answer perfectly. Thank you again.

Re: Javascript 4.x legend refresh

Mr_Kirkwood — Tue, 26 Nov 2024 14:15:19 GMT

Joel,

Is there a way to achieve this for JS 3.x? I still have some legacy apps that I would like to maintain until I get the JS 4.x apps up and running.

Thanks again for all of your help!

Re: Javascript 4.x legend refresh

JoelBennett — Tue, 26 Nov 2024 17:39:02 GMT

This seems to do it:

Re: Javascript 4.x legend refresh

Mr_Kirkwood — Tue, 26 Nov 2024 19:46:00 GMT

That works to a degree. For my zoomTo function, I have to set the Feature layer to these settings:

roomUseLayer = new FeatureLayer (urlRoomsUse, { mode: FeatureLayer.MODE_SELECTION, id: 'roomUseLayer', visible: true, outFields: ["*"], opacity: 0.6, })

Using FeatureLayer.MODE_SELECTION does not update the legend. If i use FeatureLayer.MODE_ONDEMAND the legend updates but all the floors draw not just the one being zoomed into. Not sure what the best approach is for this?

Re: Javascript 4.x legend refresh

JoelBennett — Tue, 26 Nov 2024 20:02:41 GMT

I see...yes, this approach will not work with MODE_SELECTION since the graphics array won't be populated unless something is selected, and even then, only the selected features will be present in the graphics array.

Based on the info provided, a suitable workaround might be to use a MODE_ONDEMAND layer, with the definition expression set to only show rooms for the current floor. See also getDefinitionExpression and setDefinitionExpression.

Re: Javascript 4.x legend refresh

Mr_Kirkwood — Tue, 26 Nov 2024 21:01:34 GMT

Thank you for your help. This gives me a good start. Here is my zoomTo function that I need to figure out the getDefinitionExpression and setDefinitionExpression.

unction zoomRoomUse (ids) { require ([ "esri/tasks/query", "esri/geometry/Extent", "esri/layers/FeatureLayer" ], function (Query, Extent, FeatureLayer) { console.log ("zoomRoomUse"); var query = new Query (); query.objectIds = ids; roomUseLayer.setDefinitionExpression = query.objectIds query.where = roomUseLayer.setDefinitionExpression; console.log ("zoomRoomUse + id" + ids) console.log ("zoomRoomUse + ids" + roomUseLayer.setDefinitionExpression) roomUseLayer.selectFeatures (query, FeatureLayer.SELECTION_NEW, function (features) { var newExtent = new Extent (); newExtent = features[0].geometry.getExtent (); for (var k = 0; k < features.length; k++) { newExtent = newExtent.union (features[k].geometry.getExtent ().expand (15)); } manageDynamicSymbology (roomUseLayer, map) labelRoom (); }); }); }

Any ideas?

Re: Javascript 4.x legend refresh

JoelBennett — Tue, 26 Nov 2024 22:20:59 GMT

Instead of:

roomUseLayer.setDefinitionExpression = query.objectIds

You probably want:

roomUseLayer.setDefinitionExpression(roomUserLayer.objectIdField + " IN(" + ids.join(",") + ")");

Re: Javascript 4.x legend refresh

Mr_Kirkwood — Tue, 26 Nov 2024 22:37:38 GMT

Thanks! I will test this out in the morning.

Re: Javascript 4.x legend refresh

Mr_Kirkwood — Mon, 13 Jan 2025 22:02:39 GMT

Joel,

I have noticed that the code above gives me this error:

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'clone')

Line 35:

" defaultSymbol = originalRenderer.defaultSymbol.clone ();"

The error continues to infinity sometimes. It happens when i use the zoom to feature and sometimes it happens when i click identify on the map. I am not sure what is happening. The zoom fucntion looks like this:

Any thoughts?

Re: Javascript 4.x legend refresh

JoelBennett — Mon, 13 Jan 2025 22:34:16 GMT

It appears this will happen in cases where (1) a value exists, but no symbol has been defined for it, and (2) there is no default symbol defined. In this case, the feature wouldn't be rendered at all. To avoid the error, you could change the statement on line 34 from:

if (defaultSymbol === null) {

if ((defaultSymbol === null) && (originalRenderer.defaultSymbol)) {

Re: Javascript 4.x legend refresh

Mr_Kirkwood — Mon, 13 Jan 2025 22:51:59 GMT

Joel,

There is no error now, but the layer is flickering on and off.

Re: Javascript 4.x legend refresh

Mr_Kirkwood — Mon, 13 Jan 2025 23:04:55 GMT

Here is the full code:

Re: Javascript 4.x legend refresh

JoelBennett — Tue, 14 Jan 2025 02:06:56 GMT

There is a possibility of an infinite loop occurring since setting the renderer will result in the "updating" property being set, and when the "updating" property is set to false, the process starts over again. However, that's what the "ignoreRendererSet" variable exists to prevent, and I don't see any immediate problem with it not doing its job. I would recommend using the browser's developer tools to add some breakpoints and step through the code to help determine where the infinite loop is occurring.

Re: Javascript 4.x legend refresh

Mr_Kirkwood — Wed, 15 Jan 2025 14:11:39 GMT

Joel,

the code loop seems to be around this line:

infos.forEach (function (uniqueValueInfo)

It will work for a few buildings then will start to loop.