Question: LayerList

[morgankbender]

I am trying to add a layer list to my map. I have run many console logs, and I know it is reaching this code. It also isn't giving any errors. Still, the layer list isn't appearing. If anyone has adive it would be greatly appreciated!

componentDidMount() { 
   loadModules(['esri/widgets/LayerList'])
    .then( ([LayerList]) => {
          const list = new LayerList({
            view: 'view',
          });
          this.props.view.ui.add(list, {
            position: 'top-right',
          });
        }).catch((err) => console.log(err));
  }

If it helps, this is the map:

as you can see, I have successfully loaded several layers. I have also used the parent state to ensure the layers are loaded before the layer list

[agustin-pt]

Hi @morgankbender ,

I have done it like this

import React from 'react';
import { loadModules } from '@esri/react-arcgis';

class LayerList extends React.Component {
    render() {
        return null;
    }

    componentWillMount() {
        loadModules(['esri/widgets/LayerList'])
        .then(([LayerList]) => {
            const layerList = new LayerList({
                view: this.props.view
            });
            this.props.view.ui.add(layerList, {
                position: "top-right"
            });
        })
        .catch()
    }
}

export default LayerList;

I think what you need to fix is this

const list = new LayerList({
view: 'view',
});

Instead of 'view' you gotta use the view prop provided by the Map parent component.

[morgankbender]

Thank you for the quick response! Unfortunately, that seems to be only one of my problems.

This is the parent where I invoke the class. I used the getMenu( ) function as I was concerned there might be an issue with the load order. Both this and replacing {menu} with <FeatureLayerMenu /> directly have the same (non) result.

getMenu() {
    if (this.state.layersAdded) {
      return <FeatureLayerMenu />;
    }
    return <div />;
  }

  render() {
    const menu = this.getMenu();

    return <div>
      <Map
        style={{width: '75vw', height: '85vh'}}
        mapProperties={{basemap: 'oceans'}}
        viewProperties={{
          center: [-60.5, 47.5],
          zoom: 6,
        }} >
        <FeatureLayersContainer updateParent={this.childFinished.bind(this)} />
        {menu}
      </Map>
    </div>;
  }

and the updated LayersList request:

import React, {Component} from 'react';
import {loadModules} from '@esri/react-arcgis';

class FeatureLayerMenu extends Component {
  componentDidMount() {
    loadModules(['esri/widgets/LayerList'])
        .then(([LayerList]) => {
          const layerList = new LayerList({
            view: this.props.view,
          });
          this.props.view.ui.add(layerList, {
            position: 'top-right',
          });
        })
        .catch((err) => console.log(err));
  }

  render() {
    return null;
  }
}

export default FeatureLayerMenu;

[agustin-pt]

Maybe instead of calling the function {menu} try to render the <FeatureLayerMenu /> directly> I think might be something related to the updateParent function.

Thi is a example of my code:

        <Map
            style={{height: '100vh'}}
            mapProperties={{ basemap: 'dark-gray' }}
            viewProperties={{
                center: [ -98.317, 36.072],
                zoom: 9,
            }}
        >
            < FeatureLayer 
                mapService = 'https://gaas.pixeltrailgeo.com/arcgis/rest/services/LANDGRID/USA_LABELS_ALL/MapServer/104'
                hide
            />
        </Map>

And then my feature layer looks something like this

import React from 'react';
import { loadModules } from '@esri/react-arcgis';

class FeatureLayer extends React.Component {

    render() {
        return null;
    }

    componentWillMount() {
        loadModules(['esri/layers/FeatureLayer'])
        .then(([FeatureLayer, ]) => {
                const layer = new FeatureLayer({
                    url: this.props.mapService,
                    listMode: !this.props.hide ? 'show': 'hide'
                });

                this.props.map.add(layer)
            
        })
        .catch()
    }
}

export default FeatureLayer;

Try that or publish the link to the repo so we can check the whole thing.

[morgankbender]

I have played with this a bit more, and tried simplifying as you showed above, but still no luck :/

Here is a link to the map section of the repo: https://github.com/morgankbender/Seabirds/tree/master/src/components/MapPage

I am still just getting layers loaded in with no layer list:

[morgankbender]

Sorry for all the problems! I must be missing something obvious... I tried adding a simple widget that didn't rely on the layers (I added a ScaleBar) and that also hasn't appeared but isn't showing any errors. I have pushed this to the repo (link above) if anyone wants to take a look at the full project.

The component for the scale bar is as follows:

import React, {Component} from 'react';
import {loadModules} from '@esri/react-arcgis';

/**
 * This class adds a scale bar to the map
 */
class ScaleBar extends Component {
  /**
   * ************************** Core method ************************************
   */
  componentDidMount() {
    loadModules(['esri/widgets/ScaleBar'])
        .then(([ScaleBar]) => {
          const scaleBar = new ScaleBar({
            view: this.props.view,
          });

          this.props.view.ui.add(scaleBar, {
            position: 'bottom-left',
          });
        })
        .catch((err) => console.log(err));
  }

  /**
   * *********************** Visual component **********************************
   * @return {null}
   */
  render() {
    return null;
  }
}

export default ScaleBar;

I appreciate any input you have!

[abdel-abdelrazek]

Hi @morgankbender ,
Please try creating the widgets within this handeler
view.when(() => {
// Initialize the widgets here, for example:
const layerList = new LayerList({
view: view
});
view.ui.add(layerList , "top-right");
})

[morgankbender]

Still no luck :/

componentDidMount() {
    loadModules(['esri/widgets/ScaleBar'])
        .then(([ScaleBar]) => {
          console.log('ready?', this.props.view.ready);

          this.props.view.when(() => {
            const scaleBar = new ScaleBar({
              view: this.props.view,
            });

            this.props.view.ui.add(scaleBar, 'bottom-left');
          });
        })
        .catch((err) => console.log(err));
  }

The "ready?" console log is returning true... But nothing appears :/

[abdel-abdelrazek]

Hi @morgankbender
I have cloned your project and run it.
I'm able to see the layerList as shown in attached picture.
Try run this command --> npm install
and see if you will be able to see it or not.

[morgankbender]

The current version is working now yes! I was able to get it working with the package esri-loader