topic Re: How to fix the visual order of components on a map using arcgis-map-components in ArcGIS JavaScript Maps SDK Questions

How to fix the visual order of components on a map using arcgis-map-components

Flookfinders — Wed, 02 Apr 2025 14:26:10 GMT

I am investigating the arcgis-map-components and I am trying to put a group of components in the bottom left of the map, but I am unable to change the order in which the components can be seen on the map. This is my code snippet for the components:

<arcgis-map>

<arcgis-zoom position="bottom-left" layout="horizontal" />

<arcgis-expand

position="bottom-left"

expandIcon="esri-icon-layers"

expandTooltip="Layers"

collapseIcon="chevrons-down"

collapseTooltip="Layers"

label="Layers"

placement="top-leading"

closeOnEsc

<arcgis-layer-list label="Current layers" show-heading />

</arcgis-expand>

<arcgis-expand

position="bottom-left"

expandIcon="measure"

expandTooltip="Measure distance"

collapseIcon="chevrons-down"

collapseTooltip="Measure distance"

label="Measure distance"

placement="top-leading"

closeOnEsc

<arcgis-distance-measurement-2d unit="meters" />

</arcgis-expand>

<arcgis-scale-bar position="bottom-left" bar-style="ruler" unit="metric" />

</arcgis-map>

It does not matter which order I enter the components in my code they are displayed in the following order

How can I get the components in the order in the code i.e. zoom, layer list, measure, scale bar?

Re: How to fix the visual order of components on a map using arcgis-map-components

ReneRubalcava — Wed, 02 Apr 2025 15:51:08 GMT

This is currently a known limitation with the "position" that we are looking to fix for next release. In later releases we will be adding slots to better manage this.

For now, you can use the arcgis-placement component and your own container styled how you like to accomplish this.

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

<arcgis-map item-id="45725ba7d9fb47a0925398919b13d1fa"> <arcgis-placement position="bottom-left"> <div class="tool-container"> <arcgis-zoom layout="horizontal"></arcgis-zoom> <arcgis-expand expand-icon="esri-icon-layers" expand-tooltip="Layers" collapse-icon="chevrons-down" collapse-tooltip="Layers" label="Layers" placement="top-leading" close-on-esc> <arcgis-layer-list label="Current layers" show-heading></arcgis-layer-list> </arcgis-expand> <arcgis-expand expand-icon="measure" expand-tooltip="Measure distance" collapse-icon="chevrons-down" collapse-tooltip="Measure distance" label="Measure distance" placement="top-leading" close-on-esc> <arcgis-distance-measurement-2d unit="meters"></arcgis-distance-measurement-2d> </arcgis-expand> <arcgis-scale-bar bar-style="ruler" unit="metric"></arcgis-scale-bar> </div> </arcgis-placement> </arcgis-map>