ArcGIS JS App Patterns

Examples of how to accomplish simple design and styling tasks when building map apps.

Get the code Learn more

Layout - Full Page

100% height and width maps.

Layout - Flex Grid

Partial-page maps.

Layout - CSS Grid

Partial-page maps.

Frameworks - Bootstrap 4

Responsive maps in Bootstrap.

View - Padding

Set the visible and usable map area.

View - Events

Listen for height and width changes.

View - Breakpoints

Screen size changes and notification.

UI - Default

Position elements in corners (padding).

UI - Manual

Position elements in the view (padding).

UI - Custom

Position elements in view (no padding).

Widgets - Custom Button

Create a simple button.

Widgets - Custom Control

Put your div in the view.

Popups - Docking

Control the docked position.

Popups - Alignment

Control the floating position.

Popups - Auto-center

Re-center for all screens.

Popups - Sizing

Control the width and height.

Panels - Custom Panel

Show and hide a panel with a button.

Panels - Responsive Expand

Show and hide the legend in a panel.

Panels - Popup Panel

Put content in a docked popup.

Panels - Popup Panel + Click

Put a view in a docked popup.

Styling - Default Themes

Pre-cooked colors for widgets.

Styling - CSS Theme

Quick widget overrides.