Map Components Info Div

[JaredPilbeam2]

example

How would I recreate this expandable "infoDiv" using map components? I don't understand how to get it in the view when there is no longer a view. I'd rather not create a html/css button outside the view.

This is the html of the app I'm currently creating.

<arcgis-map zoom="14" center="-88.1, 41.5">
    <arcgis-search position="top-left"></arcgis-search>
    <arcgis-zoom position="top-left"></arcgis-zoom>
    <arcgis-home></arcgis-home>
    <arcgis-locate scale="5000"></arcgis-locate>
    <arcgis-swipe swipe-position="32"></arcgis-swipe>
    <arcgis-expand position="top-right">
        <arcgis-layer-list></arcgis-layer-list>
    </arcgis-expand>
</arcgis-map>

[ReneRubalcava · Accepted solution]

You can currently add custom content to an expand using the `arcgis-placement` component inside expand.

https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-placement/

Here is your snippet updated.

  <arcgis-map basemap="gray-vector" zoom="14" center="-88.1, 41.5">
    <arcgis-search position="top-left"></arcgis-search>
    <arcgis-zoom position="top-left"></arcgis-zoom>
    <arcgis-home></arcgis-home>
    <arcgis-locate scale="5000"></arcgis-locate>
    <arcgis-swipe swipe-position="32"></arcgis-swipe>
    <arcgis-expand position="top-right">
      <arcgis-layer-list></arcgis-layer-list>
    </arcgis-expand>
    <arcgis-expand expand-icon="information" position="top-right">
      <arcgis-placement>
        <div id="infoDiv">

          <h2>Helpful Vocabulary*</h2>
          <p><b>CD</b> Closed Depression Area-- low area of a field with no outlet that accumulates or receives
            runoff.
            In times of spring meltdown or heavy rainfall, runoff channels may form and deliver runoff water to
            closed depressions.
          </p>

        </div>
      </arcgis-placement>
    </arcgis-expand>
  </arcgis-map>

https://codepen.io/odoe/pen/LEVwaqa?editors=1000