Our design calls for specific designed controls to toggle the feature layers in our map. As such I need to customize the LayerList widget with specific markup for rendering.
From what I saw in the 4.x JS API, there doesn't seem to be a method or property where I can overwrite the markup of the layerlist widget. Is this correct? How can I otherwise achieve what I described?
So the level of changes I'm looking to do can not be done purely in CSS. I need to create conditional markup, specific to the layers' attribute value (i.e. different icon per layer, that matches the symbology for that layer). We're looking for completely different UI for the layerlist widget. For this level of customization, can i extent the widget via API or do I need to modify the widget's source code?
You should be able to set a more specific CSS statement for that class to use a different icon. You can always tell it via CSS to not use the icon and supply your own icon.
The challenge I see is being able to set conditional CSS classes within the markup. I need to set different icon for each layer in the layer list. This necessitates some markup in the widget's html that differentiates the layers. From examining the html source, I don't think the OOB layerlist widget is injecting layer identifiers onto its respective elements in the widget.
I've come across a similar need. I have the standard layerlist widget that uses the eyeball icon (esri-icon-visible and esri-icon-non-visible) to toggle layers on and off. I'd rather use the checkbox icon (esri-icon-checkbox-checked and esri-icon-checkbox-unchecked). So how would I specify to use that different icon in the CSS? I am new to web app development and am not familiar with all the capabilities of CSS.
I have figured out how to remove the eyeball icon via the CSS:
But I don't know what property values I could use to replace the icon with a different image.
The JS API documentation and the above thread mentions the LayerList.tsx file, but I don't know how to implement changes to my app via this type of file. I see that there is an iconVisible and iconInvisible class, so that is probably what I want to change at a root level, but again, I am new to this and I'm not sure how to incorporate a tsx file into my app. Or, I'm not sure if there is an easier way.
By browsing and reading the documentation I feel like I have all the pieces but I don't know how to put them together. Any help on this matter would be greatly appreciated!
Have you tried to use CSS to replace the icon content?
This should work...
from the icon font here:
Hi Matt Driscoll thank you as always. I want to note that I had to add !important to get the pure CSS override to work.
Matt Driscoll you be kind enough to share your Sass and Extended Scalebar demos? You both did very nice presentations! I was wondering in particular how the Hand emoji for the Scalebar widget was animated, moving up and down in size. I missed where or how that was accomplished; I believe it was only shown that the div containing the hand symbol was placed and not the subclass styling aspect.
I have the theme Builder working now!! Works perfectly, I styled a few things like in your demo. I am a bit confused though about the checkbox. How can I accomplish that the "right way" in SCCS? While I do see
.esri-layer-list__item-toggle in the _layerlist.SCSS. But the CSS that is actually doing the styling, I do not see there. I see in F12 in my demo app above, a Span with esri-layer-list__item-toggle and inside of that, a span inside of it: span class="esri-icon-non-visible". Which is in reality what seems to be doing the actual checkbox. (As your CSS override works as in my Pen) However, what would the right way to do this be in the Theme Style Builder in SCSS? In the _layerlist.SCSS the only two lines with esri-layer-list__item-toggle are:
padding: 0 $side-spacing--quarter;
Thank you again! I think this will be a popular question, getting the checkbox for the layer list back, as we all begin to migrate to 4.x. Thank you again Matt, Robert and everyone. I am excited to get in to SCSS and all the new possibilities with 4.x.