Expand

Simple example

An Expand can take another widget as a child:

Live Editor

function Example() {
  return (
    <MapView
      ViewProperties={{ extent: OAHU_EXTENT }}
      MapProperties={{ basemap: "topo-vector" }}
      style={{ height: "300px", width: "100%" }}
    >
      <MapImageLayer url={LANDCOVER_IMAGELAYER_URL} />

      <Expand position="top-right">
        <LayerList />
      </Expand>
    </MapView>
  );
}

Result

Loading...

With arbitrary UI

An Expand can also take any arbitrary UI element as a child.

Live Editor

function Example() {
  return (
    <MapView
      ViewProperties={{ extent: OAHU_EXTENT }}
      MapProperties={{ basemap: "topo-vector" }}
      style={{ height: "300px", width: "100%" }}
    >
      <MapImageLayer url={LANDCOVER_IMAGELAYER_URL} />

      <Expand
        position="top-right"
        content="custom-expand-content"
        expandIcon="caret-square-left"
      >
        <div className="p-2">Some custom content you'd like to show</div>
      </Expand>
    </MapView>
  );
}

Result

Loading...

With custom component

Note that if using aritrary HTML markup as a child of Expand, you must use a single element that can take a ref, and that ref must reference an HTML element.

Live Editor

const CustomContent = React.forwardRef<HTMLDivElement>((props, ref) => {
  return (
    <div ref={ref} className="max-w-[300px] p-2">
      You can even use a whole custom component as a child of an Expand widget,
      so long as it returns a single HTML element, and the component ref
      forwards to that element.
    </div>
  );
});

function Example() {
  return (
    <MapView
      ViewProperties={{ extent: OAHU_EXTENT }}
      MapProperties={{ basemap: "topo-vector" }}
      style={{ height: "300px", width: "100%" }}
    >
      <MapImageLayer url={LANDCOVER_IMAGELAYER_URL} />

      <Expand
        position="top-right"
        content="custom-expand-content"
        expandIcon="satellite-3"
      >
        <CustomContent />
      </Expand>
    </MapView>
  );
}

render(<Example />);

Result

Loading...

Outside of Map

Like any standard esri widget, Expand can take a container property that will render it to some other place in the DOM:

Live Editor

function Example() {
  const [divReady, setDivReady] = useState(false)

  return (
    <div className="flex">
      <MapView
        ViewProperties={{ extent: OAHU_EXTENT }}
        MapProperties={{ basemap: "topo-vector" }}
        style={{ height: "300px", width: "100%" }}
      >
        <MapImageLayer url={LANDCOVER_IMAGELAYER_URL} />

       {/* Ensure container exists before rendering the widget */}
       {divReady && (
          <Expand container="custom-expand-location" placement="left-start">
            <LayerList />
          </Expand>
        )}
      </MapView>

      <div className="w-[260px] p-2 border-blue-700 border-2 relative">
        <h4 className="text-right">The Outside Container</h4>
        <div 
          id="custom-expand-location" 
          className="relative w-[32px] float-right"
          ref={() => setDivReady(true)} 
        />
      </div>
    </div>
  );
}

Result

Loading...

Note the need for the placement property. Once outside the standard ArcGIS map DOM, using placement becomes necessary to get the correct popover behavior.