Create a Custom Layer Selector in ExB Developer Edition. Calcite or Other Approach?

[GregReinecke]

I'm trying to create a custom layer widget which would be open and look something like this:

 

I created the above example using the calcite component example provided in the resources folder and then put it in my > client > your-extensions > widgets folder.  I modified the widget.tsx code to reflect my target layers.  I just don't know where or with what code to add the layers URL/feature layer info that would correspond to each checkbox.

import { React, type AllWidgetProps } from 'jimu-core'
import { type IMConfig } from '../config'
/**
 * Use this way, the @esri/calcite-components-react code will be compiled into widget entry, which makes widget size large.
 *    `import { CalciteButton, CalciteIcon, CalciteSlider } from '@esri/calcite-components-react'`
 * So, we should use the below way.
 */
import { CalciteButton, CalciteIcon, CalciteSlider } from 'calcite-components'

const Widget = (props: AllWidgetProps<IMConfig>) => {
  const text = props.config.text

  const [sliderValue, setSliderValue] = React.useState(50)

  return (
    <div className="widget-calcite jimu-widget m-2">
      <div className="App">
        <h5> Ancillary Layer Selector</h5>
	<calcite-label layout="inline">
    		<calcite-checkbox></calcite-checkbox>
    		Parks
	</calcite-label>
	<calcite-label layout="inline">
    		<calcite-checkbox></calcite-checkbox>
    		Transit Stops
	</calcite-label>
	<calcite-label layout="inline">
    		<calcite-checkbox></calcite-checkbox>
    		Grocery Stores
	</calcite-label>
	<calcite-label layout="inline">
    		<calcite-checkbox></calcite-checkbox>
    		Libraries
	</calcite-label>
	<calcite-label layout="inline">
    		<calcite-checkbox></calcite-checkbox>
    		Unfavorable POIs
	</calcite-label>
     <CalciteIcon icon/> 
      </div>
    </div>
  )
}

export default Widget

 Any advice or a different approach would be helpful. Thanks in advance.

GRMapper

[TimWestern]

There are a couple of ways to approach this:

1. You may need to create a settings.tsx file and have named sources to setup for each layer.
2. You have the option of hard coding them, but I usually prefer to avoid that, because if the experience is ever shifted to another domain, then if those services move, you have to update and republish the custom widget.  Using a settings screen in the dashboard editor allows you to reassign them more dynamically, and not be slaved to  a programing GIS developer's availability to make those changes.
   
   Note: I see you are using the more HTML version of Calcite, rather than the react calcite component versions.  I believe those can still work, but that also may play a role in the ultimate look of this one.
   
   Once you have a way to add all the layers you want to control.  (And in theory you could have a text box for the name of each one to capture and associate with each one you add so you can add layers easily too), you would then need a way based on the index of the check box buttons, to decide which layers you are hiding/making visible.
   
   Now once you know the index, and how it maps in code to the data source, then you may be able to toggle visibility I believe.   (I don't have a good example of doing the visibility toggle in code handy though)

[GregReinecke]

Thanks Tim.  I’m going to unpack your response and thanks for the kickstart. I’ll have a look at the react approach as well. Very helpful.