topic Re: How to customize LayerList icon in ArcGIS JavaScript Maps SDK Questions

How to customize LayerList icon

yangwen — Tue, 26 Dec 2017 05:34:07 GMT

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.

Re: How to customize LayerList icon

RobertScheitlin__GISP — Tue, 26 Dec 2017 13:28:22 GMT

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

Re: How to customize LayerList icon

yangwen — Tue, 26 Dec 2017 18:59:43 GMT

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?

Re: How to customize LayerList icon

RobertScheitlin__GISP — Tue, 26 Dec 2017 20:37:27 GMT

Yang,

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

Re: How to customize LayerList icon

MattDriscoll — Fri, 29 Dec 2017 23:21:50 GMT

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.

Re: How to customize LayerList icon

yangwen — Sat, 30 Dec 2017 06:12:47 GMT

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.

Re: How to customize LayerList icon

SaffiaHossainzadeh2 — Fri, 01 Mar 2019 16:55:43 GMT

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

Re: How to customize LayerList icon

MattDriscoll — Fri, 08 Mar 2019 18:16:51 GMT

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

Re: How to customize LayerList icon

Anonymous User — Tue, 21 Jul 2020 22:38:43 GMT

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

Re: How to customize LayerList icon

Anonymous User — Sun, 26 Jul 2020 21:23:21 GMT

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.

Re: How to customize LayerList icon

MattDriscoll — Wed, 29 Jul 2020 21:13:42 GMT

Hi Kevin! I'm glad you found the presentations helpful

Here's the demo code for the extended scalebar widget. You can find all the code you need there.

dev-summit-2020-customizing-widgets/demos at master · jcfranco/dev-summit-2020-customizing-widgets · GitHub

Let me know if that's what you were looking for.

-Matt

Re: How to customize LayerList icon

Anonymous User — Sun, 12 Dec 2021 07:56:17 GMT

Matt Driscoll‌ sweet! Thanks. I am looking at it and appreciate the step-by-step examples and comments. I always enjoy dev engineer presentations at the summit.

So.. I went to transpile and run the demoes, I got the following error from NPM. I also attempted updating the API to 4.16 and running NCU (ncu -u then npm install), same results. Thoughts? I'll keep studying the new scaffolding you are using but should this work out of the box when downloaded and npm installed?

C:\Users>cd..
C:\>cd devsum
C:\devSum>npm install
> dev-summit-2020-customizing-widgets@1.0.0 postinstall C:\devSum
> tsc
node_modules/@types/chai/index.d.ts:840:49 - error TS2304: Cannot find name 'ReadonlySet'.
840 include<T>(haystack: ReadonlyArray<T> | ReadonlySet<T> | ReadonlyMap<any, T>, needle: T, message?: string): void;
 ~~~~~~~~~~~
node_modules/@types/chai/index.d.ts:840:66 - error TS2304: Cannot find name 'ReadonlyMap'.
840 include<T>(haystack: ReadonlyArray<T> | ReadonlySet<T> | ReadonlyMap<any, T>, needle: T, message?: string): void;
 ~~~~~~~~~~~
node_modules/@types/chai/index.d.ts:850:45 - error TS2583: Cannot find name 'WeakSet'. Do you need to change your target library? Try changing the `lib` compiler option to es2015 or later.
850 include<T extends object>(haystack: WeakSet<T>, needle: T, message?: string): void;
 ~~~~~~~
node_modules/@types/chai/index.d.ts:879:52 - error TS2304: Cannot find name 'ReadonlySet'.
879 notInclude<T>(haystack: ReadonlyArray<T> | ReadonlySet<T> | ReadonlyMap<any, T>, needle: T, message?: string): void;
 ~~~~~~~~~~~
node_modules/@types/chai/index.d.ts:879:69 - error TS2304: Cannot find name 'ReadonlyMap'.
879 notInclude<T>(haystack: ReadonlyArray<T> | ReadonlySet<T> | ReadonlyMap<any, T>, needle: T, message?: string): void;
 ~~~~~~~~~~~
node_modules/@types/chai/index.d.ts:889:48 - error TS2583: Cannot find name 'WeakSet'. Do you need to change your target library? Try changing the `lib` compiler option to es2015 or later.
889 notInclude<T extends object>(haystack: WeakSet<T>, needle: T, message?: string): void;
 ~~~~~~~
node_modules/@types/chai/index.d.ts:920:53 - error TS2304: Cannot find name 'ReadonlySet'.
920 deepInclude<T>(haystack: ReadonlyArray<T> | ReadonlySet<T> | ReadonlyMap<any, T>, needle: T, message?: string): void;
 ~~~~~~~~~~~
node_modules/@types/chai/index.d.ts:920:70 - error TS2304: Cannot find name 'ReadonlyMap'.
920 deepInclude<T>(haystack: ReadonlyArray<T> | ReadonlySet<T> | ReadonlyMap<any, T>, needle: T, message?: string): void;
 ~~~~~~~~~~~
node_modules/@types/chai/index.d.ts:930:55 - error TS2583: Cannot find name 'WeakSet'. Do you need to change your target library? Try changing the `lib` compiler option to es2015 or later.
930 deepInclude<T>(haystack: T, needle: T extends WeakSet<any> ? never : Partial<T>, message?: string): void;
 ~~~~~~~
node_modules/@types/chai/index.d.ts:951:56 - error TS2304: Cannot find name 'ReadonlySet'.
951 notDeepInclude<T>(haystack: ReadonlyArray<T> | ReadonlySet<T> | ReadonlyMap<any, T>, needle: T, message?: string): void;
 ~~~~~~~~~~~
node_modules/@types/chai/index.d.ts:951:73 - error TS2304: Cannot find name 'ReadonlyMap'.
951 notDeepInclude<T>(haystack: ReadonlyArray<T> | ReadonlySet<T> | ReadonlyMap<any, T>, needle: T, message?: string): void;
 ~~~~~~~~~~~
node_modules/@types/chai/index.d.ts:961:58 - error TS2583: Cannot find name 'WeakSet'. Do you need to change your target library? Try changing the `lib` compiler option to es2015 or later.
961 notDeepInclude<T>(haystack: T, needle: T extends WeakSet<any> ? never : Partial<T>, message?: string): void;
 ~~~~~~~

Found 12 errors.
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! dev-summit-2020-customizing-widgets@1.0.0 postinstall: `tsc`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the dev-summit-2020-customizing-widgets@1.0.0 postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\kmacleod\AppData\Roaming\npm-cache\_logs\2020-07-31T15_14_57_864Z-debug.log
C:\devSum>ncu
Checking C:\devSum\package.json
[====================] 7/7 100%
@types/arcgis-js-api ~4.14.0 → ~4.16.0
 grunt ~1.0.4 → ~1.2.1
 prettier ~1.19.1 → ~2.0.5
 typescript ~3.8.3 → ~3.9.7
Run ncu -u to upgrade package.json
C:\devSum>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: How to customize LayerList icon

NilsBabel1 — Thu, 22 Oct 2020 23:58:53 GMT

Did you ever get this working? I would like to get the checkboxes instead of the eyeball as well. I'm using the github styler too to try and create my own theme. I'm not able to override the css like you mentioned previously. I think the way my css loads when our application builds ignores the override. I've gone down the same path as you with the LayerList.scss. But I found out that the icons is actually stored in the icons/style.scss. There's also a variables.scss there that style imports that lists $esri-icon-visible. So in my-theme/main.scss I've tried to do this:

@import "../base/icons/style.scss";

$esri-icon-visible: "\e611";

$esri-icon-non-visible: "\e610";

I've also tried \ue611 with and without quotes. And also not importing the style file. But it still doesn't work. I get a variety of different font errors. I feel like this is on the right track but it's not quite there.

Any advice Juan Carlos Franco‌ Matt Driscoll‌ ?