How to customize LayerList icon

1724
12
12-25-2017 09:34 PM
Highlighted
New Contributor III

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?

Thanks.

Reply
0 Kudos
12 Replies
Highlighted
MVP Esteemed Contributor

Yang,

   Here is the css rules used for the 4.x LayerList widget:

arcgis-js-api/_LayerList.scss at 4master · Esri/arcgis-js-api · GitHub 

Highlighted
New Contributor III

Robert,

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?

Reply
0 Kudos
Highlighted
MVP Esteemed Contributor

Yang,


  Sounds like you need to start from scratch and build your own that matches you UI needs then.

Reply
0 Kudos
Highlighted
Occasional Contributor III

Hey Yang,

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.

Reply
0 Kudos
Highlighted
New Contributor III

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.

Reply
0 Kudos
Highlighted
New Contributor

Hi ,

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:

.esri-layer-list__item-toggle {
   display: none;

}

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!  

Thanks!

Saffia

Reply
0 Kudos
Highlighted
Occasional Contributor III

Have you tried to use CSS to replace the icon content?

An Anonymous Pen on CodePen 

This should work...

.esri-icon-non-visible::before {
content: "\e610";
}
.esri-icon-visible::before {
content: "\e611";
}

from the icon font here:

Esri Icon Font (Calcite theme) | ArcGIS API for JavaScript 4.10 

Highlighted
Frequent Contributor

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.

https://codepen.io/kevinsagis/pen/GRozoKr 


.esri-icon-non-visible::before {
content: "\e610"!important;
}
.esri-icon-visible::before {
content: "\e611"!important;
}

Today is my first day beginning to use 4.x and SASS!  I am hoping to try to do this eyeball to checkbox the right way with SASS, too.  After looking at the API theming page it mentions this GitHub - jcfranco/jsapi-styles: Utility for easier ArcGIS API 4x for JavaScript theme customization   update: it installed fine; I had to ensure I had the latest npm. I am watching your talk ArcGIS API for JavaScript: Customizing the JavaScript Widgets - YouTube 

Reply
0 Kudos
Highlighted
Frequent Contributor

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:

.esri-layer-list__item-toggle {
color: $interactive-font-color--disabled;

and


.esri-layer-list__item-toggle {
padding: 0 $side-spacing--quarter;
cursor: pointer;
color: $interactive-font-color;
}

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.

Reply
0 Kudos