Options (3 dots) do not appear for the layers

1052
6
Jump to solution
08-31-2021 06:05 AM
Amadeus111
Occasional Contributor II

I wrote this code: 

 

<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>TEST ArcGIS JS </title>

    <style>
      html,
      body {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
        overflow: hidden;
      }

      #viewDiv {
        position: absolute;
        right: 0;
        left: 40%;
        top: 0;
        bottom: 0;
      }

      #sideDiv {
        position: absolute;
        left:5%;
        width: 35%;
      }
    </style>

    <link rel="stylesheet" href="https://js.arcgis.com/4.20/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.20/"></script>

    <script>
      require(["esri/config","esri/views/MapView", "esri/WebMap", "esri/widgets/LayerList"], 
      function(esriConfig, MapView, WebMap, LayerList) {
      
        esriConfig.apiKey = "APIKey"
        esriConfig.portalUrl = "portalURL" 
        
        var webmapids = ["12345"];
        var webmaps = webmapids.map(function(webmapid) {
          return new WebMap({
            portalItem: {
              // autocasts as new PortalItem()
              id: webmapid
            }
          });
        });

        var view = new MapView({
          map: webmaps[0],
          container: "viewDiv"
        });

        let layerlist = new LayerList({
          view: view,
          container:"sideDiv"
        }); 
      });
    </script>
  </head>

  <body>
    <div id="viewDiv" class="esri-widget"></div>
    <div id="sideDiv" class="esri-widget"></div>
  </body>
</html>

 

 

I would like to display layers on a side bar but layer options do not appear. The eye sign is visible and working fine but options not. 

OguzSariyildiz_0-1630415008866.png

 

 

Do you have any idea what I am doing wrong?

Tags (2)
0 Kudos
1 Solution

Accepted Solutions
KenBuja
MVP Esteemed Contributor
6 Replies
KenBuja
MVP Esteemed Contributor

You'll have to add the actions using the listItemCreatedFunction property. Take a look at this sample: https://developers.arcgis.com/javascript/latest/sample-code/widgets-layerlist-actions/

Amadeus111
Occasional Contributor II

Thank you! I was able to add actions. Now, I am trying to customize them. I would like to come something like this 

OguzSariyildiz_0-1630419966194.png

Is there a source showing all available action ids/classes. 

I checked here https://developers.arcgis.com/javascript/latest/api-reference/esri-support-actions-ActionToggle.html

and some other places but no luck 😞

 

0 Kudos
KenBuja
MVP Esteemed Contributor

I don't see any listing of them either. This would be an important addition to the documentation. @UndralBatsukh 

0 Kudos
UndralBatsukh
Esri Regular Contributor

Hi there, 

 

Hope I understand the question right. The JS API does not offer pre-set actions out of the box. Developers are responsible for creating their own custom actions. The sample @KenBuja provided shows how to create custom actions.

-Undral

0 Kudos
Amadeus111
Occasional Contributor II

It would be nice to have pre-set actions for frequently used options such as displaying table, zoom to, renaming a layer etc. Maybe, I find it difficult because I am new to ArcGIS JS API. 

I found this list which helps me to call icons even though I need to create my own behavior. 

http://www.narutogis.com/apis/arcgisjs4.10sdk/latest/guide/esri-icon-font/index.html

0 Kudos
KenBuja
MVP Esteemed Contributor

This is the most current list of icons you can use: https://developers.arcgis.com/javascript/latest/esri-icon-font/