Map Components Info Div

JaredPilbeam2 — Mon, 07 Jul 2025 16:49:30 GMT

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>

Re: Map Components Info Div

ReneRubalcava — Mon, 07 Jul 2025 17:22:26 GMT

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

topic Re: Map Components Info Div in ArcGIS JavaScript Maps SDK Questions

Map Components Info Div

Re: Map Components Info Div