topic Re: Colouring the layers in my LayerList widet in ArcGIS JavaScript Maps SDK Questions

Colouring the layers in my LayerList widet

DavidShearan — Fri, 15 Dec 2023 17:04:21 GMT

I am learning more and more all the time with help from this community. With help I have now been able to display the LayerList widget in an HTML div and hide individual layers if there is nothing displayed on the map for the layer.

I would now like to colour the layers to match the graphic symbol I am using on the map. See the attached screenshot so you can understand what I am trying to do.

Thank you in advance

Re: Colouring the layers in my LayerList widet

Sage_Wall — Fri, 15 Dec 2023 17:53:10 GMT

Hi @DavidShearan ,

I think what you are asking could be accomplished, but as an alternative you might consider adding a Legend to the list item panel as shown in this sample. https://developers.arcgis.com/javascript/latest/sample-code/widgets-layerlist-legend/ this would enable to you have symbols that differ in more than just the color and still provide your users a preview of what the layer looks like on the map.

Re: Colouring the layers in my LayerList widet

DavidShearan — Fri, 15 Dec 2023 18:47:36 GMT

Thank you. I did a lot of searching before posting my question and I found this along the way. It looked really interesting but I still want the users to be able to switch on/off the layers and it didn’t look as though I could accomplish this using a legend.

Perhaps I am wrong?

Re: Colouring the layers in my LayerList widet

Sage_Wall — Fri, 15 Dec 2023 20:56:18 GMT

The Legend widget by itself doesn't have the ability to turn on or off the visibility of layers but when it's added into the layer list's list item with the listItemCreatedFunction the ability to toggle layers on and off in LayerList widget is preserved. So you can still control visibility with the visibility icon (eye) on the left of the layer name and open and close the panel containing the legend with the right hamburger looking button.

https://developers.arcgis.com/javascript/latest/sample-code/widgets-layerlist-legend/

Layer and legend visible

Layer and legend not visible

In your example you would end up with three layers in your layer list and each layer would have a legend that shows how that individual layer looks on the map right underneath it.

Re: Colouring the layers in my LayerList widet

DavidShearan — Sat, 16 Dec 2023 07:27:40 GMT

That is a very detailed description and explanation. Thank you for taking the time to understand my issue. That appears to give me what I want and will give it a try.

Re: Colouring the layers in my LayerList widet

DavidShearan — Sat, 16 Dec 2023 14:00:16 GMT

Hello again. I have applied that and now have text under each list item that simply says ‘No legend’ so clearly I am nearLy there. Now I guess I have to give each one a label title? I am assuming that I need a Renderer to achieve this? Will Simple Renderer do the job or is there an easier way to accomplish it.

I think the best result would be for the legend to show the green dot for Adults and then the label Adults. However if I did achieve that then the word Adults would appear twice. Could I switch off the title next to the eye?

sorry, it seems like I need to be led step by step through this. I am constantly searching the online documentation but don’t know whether I am going in the right direction or not

Re: Colouring the layers in my LayerList widet

Sage_Wall — Sat, 16 Dec 2023 14:55:46 GMT

Hi @DavidShearan ,

Yes a SimpleRenderer using a SimpleMarkerSymbol is likely the place you want to start, especially if you want different colored circles on the map. The layer title should only display once. I wrote up a codepen to show how to use a SimpleRenderer on two different feature layers and how it's intended to display in the layer list. I hope it helps provide the correct pattern for you to follow.

https://codepen.io/sagewall/pen/NWoZVdY

Re: Colouring the layers in my LayerList widet

DavidShearan — Sun, 17 Dec 2023 07:19:12 GMT

Thank you again Especially for going out of your way to provide the code to do this.

I will aim to convert my script which currently uses GraphicLayers. I don’t know if that was the right choice but it’s what was there when I took over the maintenance and development of this website.

What do you think? Should I stick with GraphicLayers or switch to FeatureLayers? I will do some reading about both to see how they match with my situation. Not sure if it helps but all the data for plotting these coordinates is coming from a MySQL database and is selected within the script and plotted individually.

thank you again for your support in this matter.

Re: Colouring the layers in my LayerList widet

DavidShearan — Sun, 17 Dec 2023 07:30:49 GMT

Hi.

I think I may have answered my own question. From the attached screenshot it appears at first sight that GraphicsLayer is the right choice

Re: Colouring the layers in my LayerList widet

Sage_Wall — Sun, 17 Dec 2023 15:28:23 GMT

Happy to help,

Ahh, that explains some things. GraphicsLayer are great for quickly adding graphics to the map but it is generally preferred to construct a FeatureLayer with its source property when working with client-side graphics since the FeatureLayer has more capabilities than the GraphicsLayer, including rendering, querying, labeling and in your case better Legend support. This functionality is somewhat new and it looks like we need to update the table.

I'd suggest creating a client side feature layer from your graphics, this will give you more functionality moving forward with your app. You simply need to use your array of graphics in the FeatureLayer's source property, and move the symbol from the graphic into the renderer on the FeatureLayer.

Set an array of graphics on the FeatureLayer.source property. All graphics must have the same geometry type.
Specify an array of field objects, which provide the schema (name, alias, and type) of each attribute field.
Set the objectID field property to a field containing unique IDs for each feature in the source property.

I modified the normal sample for client side feature layers in this codepen to hopefully show one approach of how this can be done with an array of adult graphics and another array of pupae graphics.

https://codepen.io/sagewall/pen/qBgeZeq

If you have thousands and thousands of individual data points you also might find the approach used in this sample useful. https://developers.arcgis.com/javascript/latest/sample-code/layers-featurelayer-large-collection/

Re: Colouring the layers in my LayerList widet

DavidShearan — Tue, 19 Dec 2023 13:21:14 GMT

Just to let you know I am still working on this although I haven’t been able to give it any attention over the last few days.

I did look in detail at your code and considered how I would adapt it for my situation. You have defined two adult points separately and then listed them as the source for the feature layer. I could have hundreds of separate points in an array of data selected from my database. Will I need to replicate your code but in a loop to define each point?

Re: Colouring the layers in my LayerList widet

Sage_Wall — Tue, 19 Dec 2023 15:11:56 GMT

Yeah exactly,

If your data is coming back from you database query as an array of objects you you loop through the results and create a graphic for each one, then push that graphic into the appropriate feature layer's source array. Modified codepen that does that 😀https://codepen.io/sagewall/pen/oNVvXOL

It may be a little more work up front than plotting individual graphics on the map, but puts you in a great place moving forward if you ever want to add additional things like searching the data, or adding popups or tables and things that graphics alone don't support.

Re: Colouring the layers in my LayerList widet

DavidShearan — Fri, 29 Dec 2023 17:03:52 GMT

Hi. Only just returning to this after a break around Christmas. Hopefully I can get my brain back in gear and get this sorted. Just one thing - I can't see where you are using arrays in the codepen example you have given me. It looks just the same as the previous example.

Re: Colouring the layers in my LayerList widet

Sage_Wall — Fri, 29 Dec 2023 17:52:00 GMT

Lines 87 to 109 in the codepen is an array of objects. It could contain hundreds or thousands of entries but I only wrote out 3. I just guessed at what the response from a MySQL query would look like based on this website. Then I loop through each result, create a graphic and add the graphic to the corresponding feature layer.

Re: Colouring the layers in my LayerList widet

DavidShearan — Fri, 29 Dec 2023 18:33:04 GMT

Excellent, thank you. I couldn't see that code before. Maybe I was clicking on the wrong link in your previous reply? Anyway that looks like exactly what I am looking for. I will let you know how I get on

Re: Colouring the layers in my LayerList widet

DavidShearan — Sun, 31 Dec 2023 17:45:28 GMT

Huge thank you for all of your advice.

I have now made substantial progress. You can see the results in my attachment DistributionMap.jpg and my full Javascript in sourcecode.txt

There are a couple of things I am still wrestling with:

Ideally I would not want a layer to show at all in the LayerList if there have been no sightings. I am part way there because I have switched off the legend in these cases but can't seem to switch off the whole layer.
Something weird is going on inside the loop that displays the layers. It makes it appear as though there are 35 layers. I have added a count inside the loop and output the count and the title of the item to the console. My screenshot at ConsoleLog.txt shows you what I mean for a few iterations. It appears from this as though every featurelayer (Adults, Eggs, etc) are there as layers but that they appear multiple times - in fact 7 times - any ideas what is going on here?

Many thanks again - I am so close and it's down to your detailed and expert help.

Re: Colouring the layers in my LayerList widet

DavidShearan — Mon, 01 Jan 2024 17:50:26 GMT

Happy New Year

i have posted an update on the work I am doing but I posted it as a reply to my original post rather than as a reply to you. I am guessing that means you didn’t get a notification.

I am only sending this in case I am right about the notification. There is definitely no rush 🙂

Re: Colouring the layers in my LayerList widet

Sage_Wall — Wed, 03 Jan 2024 12:02:08 GMT

Hi @DavidShearan ,

Sorry for the slow reply, I've been on vacation. Could you please send a sample of what the results from the PHP queries are for the following variables? I don't need the whole response but just a few records from each of these would be extremely helpful for debugging.

var sightings = <?php echo json_encode($coords) ?>; var speciesName = <?php echo json_encode($thisTaxon) ?>; var commonName = <?php echo json_encode($evernacular) ?>;

Re: Colouring the layers in my LayerList widet

DavidShearan — Wed, 03 Jan 2024 14:58:14 GMT

Hello again, hope you had a good vacation.

speciesName = 'Papilio alexanor' and commonName = 'Southern Swallowtail'

Here are the first few elements from the sightings array - the array would normally be bigger but I was testing with a limit of 10 records extracted so I could look at the results more closely. The array dump was done using console/log

Array(10) [ {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…} ]

0: Object { MapID: "249", MapFullName: "xxxxx", MapLocation: "Mt. Pandokrator", … }

MapAlt: "757"

MapDate: "2021-05-08"

MapFullName: "xxxxxx"

MapID: "249"

MapLat: "39.748225"

MapLocation: "Mt. Pandokrator"

MapLong: "19.855923"

MapQty: "1"

Stage: null

stageQty: null

<prototype>: Object { … }

1: Object { MapID: "253", MapFullName: "xxxxxx", MapLocation: "SFAKERA", … }

MapAlt: "48"

MapDate: "2021-05-09"

MapFullName: "xxxxxxx"

MapID: "253"

MapLat: "39.776435"

MapLocation: "SFAKERA"

MapLong: "19.803774"

MapQty: "2"

Stage: null

stageQty: null

<prototype>: Object { … }

2: Object { MapID: "254", MapFullName: "xxxx", MapLocation: "SFAKERA", … }

3: Object { MapID: "280", MapFullName: "xxxx", MapLocation: "Trail to Old Sinies", … }

4: Object { MapID: "293", MapFullName: "xxxx", MapLocation: "Vigla", … }

5: Object { MapID: "337", MapFullName: "xxxx", MapLocation: "St Spiridion to Alymros inland route including Monastery", …

6: Object { MapID: "339", MapFullName: "xxxx", MapLocation: "Above Vinglatouri with Dan and Indi", … }

7: Object { MapID: "349", MapFullName: "xxxx", MapLocation: "Mt Pantokrator NR carpark", … }

8: Object { MapID: "351", MapFullName: "xxxx", MapLocation: "Mt Pantokrator - Cove meadow ", … }

Re: Colouring the layers in my LayerList widet

Sage_Wall — Fri, 05 Jan 2024 13:33:43 GMT

Thanks @DavidShearan,

I'll try and take a look later today, it's been a busy week.