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

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

Capture.JPG

Finde mehr Beiträge mit dem Tag

Accepted answers

Sage_Wall

Hi David,

I was finally able to get some time to look at this. The listItemCreated function actually gets called multiple times (map initialization and at other times) and this is likely why you are seeing the misleading layer count info. We've actually fixed this in the next version of the API where the function will only be called once. I moved the log statement to the bottom and have it simply logging out the layers collection and there is only one layer for each category.

To remove the layers without any sightings from the layer list you can simply set the listMode to hide for that layer. I modified your logic slightly to show this on line 299 of the codepen below. I hope this helps.

Here is the codepen I was playing with. https://codepen.io/sagewall/pen/abMNeZQ

All comments

AbdulRaufs

Hi @Sage_Wall ,

I really like your solutions and since being new to Map SDK reaching out to you. I am working on this codepen: https://codepen.io/vntbstgk-the-decoder/pen/ZEPJBEE.

My questions are:

Can we add feature count in front of each legend?

My data is a tree data and I want to get top 5 species in legend in custom legend. Since the data gets updated overtime, I want the legends to be dynamic.

This is a static ExB that i created. https://experience.arcgis.com/experience/d5a32539f144401f946629fdfa2894a7/ I want to create a dynamic version of this using Map SDK.

DavidShearan

Thank you

Sage_Wall

A spatial reference is required, but if one is not provided the API will infer one based on the geometry of the features. It's best practice to define a spatial reference if possible.

DavidShearan

Hello again. I have adapted my code now for the changes you have made and it works 😊

Thank you so much for al your help. It has made so much difference to my project but also to my understanding. You are very kind

One final question. Is SpatialReference required? I notice you built it in to your working example

Sage_Wall

Hi David,

Here is the codepen I was playing with. https://codepen.io/sagewall/pen/abMNeZQ

Sage_Wall

Thanks @DavidShearan,

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

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: "xyz", MapLocation: "Mt. Pandokrator", … }

MapAlt: "757"

MapDate: "2021-05-08"

MapFullName: "xyz"

MapID: "249"

MapLat: "39.748225"

MapLocation: "Mt. Pandokrator"

MapLong: "19.855923"

MapQty: "1"

Stage: null

stageQty: null

<prototype>: Object { … }

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

MapAlt: "48"

MapDate: "2021-05-09"

MapFullName: "xyz"

MapID: "253"

MapLat: "39.776435"

MapLocation: "SFAKERA"

MapLong: "19.803774"

MapQty: "2"

Stage: null

stageQty: null

<prototype>: Object { … }

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

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

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

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

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

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

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

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

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:

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.

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

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

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

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

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?

DavidShearan

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

DavidShearan

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.

Sage_Wall

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.

DavidShearan

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?

Sage_Wall

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.

Nimm an der Unterhaltung teil

Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.

Schnellzugriffe

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