Map padding

This sample shows how to offset the map’s center and extent to account for UI overlays by using the padding property on the Map component. Padding ensures that properties like center and extent work relative to the visible map area rather than the full view.

While padding affects the map's extent, you can also use CSS variables such as --arcgis-layout-overlay-space-right to adjust the padding of map UI components. In this example, a 300px sidebar overlays the right side of the map. The padding property and CSS variable are both set to the same value so that the map remains centered within the visible area and the Zoom and Home components remain visible in the layout.

1
2
3
4
5
const viewElement = document.querySelector("arcgis-map");
viewElement.padding = {
  // offset the center of the map by 300px on the right
  right: 300,
};

1
2
3
4
5
arcgis-map {
  /* adjusts the padding to the right-side map layout slots
     so any components shown in the right-side slots are not obscured by the sidebar */
  --arcgis-layout-overlay-space-right: 300px;
}