Colouring the layers in my LayerList widet

[DavidShearan]

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

[DavidShearan]

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? 

[Sage_Wall]

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.

[DavidShearan]

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.

[Sage_Wall]

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.

[DavidShearan]

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

[DavidShearan]

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 🙂

[DavidShearan]

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:

1. 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.
2. 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.

[Sage_Wall]

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) ?>;

[DavidShearan]

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 ", … }

[Sage_Wall]

Thanks @DavidShearan,

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