App Layout and CSS Styling with the
ArcGIS API for JavaScript v4
Allan Laframboise
Juan Carlos Franco
App Design Patterns
- Layouts
- Frameworks
- View
- UI
Do more with less CSS!
- Widgets
- Popups
- Panels
- CSS/SASS
Layouts
Full Page
Partial Page (Flex, Grid)
Frameworks
Bootstrap 4
View
DOM Elements and Classes
<!-- 1. Main map container -->
<div id="viewDiv" class="esri-view esri-view-height-large esri-view-width-large esri-view-orientation-landscape...">
<div class="esri-view-root" style="width: 1186px; height: 1124px;">
<!-- 2. Drawing surface -->
<div class="esri-view-surface" style="user-select: none; width: 1186px; height: 1124px; touch-action: none; display: block; opacity: 1;" tabindex="0">
<canvas class="esri-display-object" width="1186" height="1124" style="width: 1186px; height: 1124px; display: block; opacity: 1;"></canvas>
...
<!-- 3. UI Elements -->
<div class="esri-ui" style="top: 0px; left: 0px; right: 0px; bottom: 0px;">
<!-- 3a. Manual UI -->
<div class="esri-ui-inner-container esri-ui-manual-container">
<div class="esri-component esri-attribution esri-widget">
...
<!-- 3b. Default UI -->
<div class="esri-ui-inner-container esri-ui-corner-container" style="top: 15px; left: 15px; right: 15px; bottom: 30px;">
<div class="esri-ui-top-left esri-ui-corner"><div class="esri-component esri-zoom esri-widget">
...
View Padding
- Adds space to map and UI containers
- Offset - title, panel, popup docking, widgets
- Map center is honored
Size and Resize
- Use to change application state (UI)
- view.size property - width and height
- view.resizing - throttled handler
Breakpoints
- Listen for width and height breaks (@media)
- String sizes available immediately
- Enhance performance
// Default view.breakpoints sizes
xsmall: 0-544 (esri-view-width-xsmall)
small: 545-768 (esri-view-width-small)
medium: 769-992 (esri-view-width-medium)
large: 993-1200 (esri-view-width-large)
xlarge: 1201+ (esri-view-width-xlarge)
UI
UI Containers
<!-- 1. Main map container -->
<div id="viewDiv" class="esri-view esri-view-height-large esri-view-width-large esri-view-orientation-landscape...">
<div class="esri-view-root" style="width: 1186px; height: 1124px;">
<!-- 2. Drawing surface -->
<div class="esri-view-surface" style="user-select: none; width: 1186px; height: 1124px; touch-action: none; display: block; opacity: 1;" tabindex="0">
<canvas class="esri-display-object" width="1186" height="1124" style="width: 1186px; height: 1124px; display: block; opacity: 1;"></canvas>
...
<!-- 3. UI Elements -->
<div class="esri-ui" style="top: 0px; left: 0px; right: 0px; bottom: 0px;">
<!-- 3a. Manual UI -->
<div class="esri-ui-inner-container esri-ui-manual-container">
<div class="esri-component esri-attribution esri-widget">
...
<!-- 3b. Default UI -->
<div class="esri-ui-inner-container esri-ui-corner-container" style="top: 15px; left: 15px; right: 15px; bottom: 30px;">
<div class="esri-ui-top-left esri-ui-corner"><div class="esri-component esri-zoom esri-widget">
...
Default UI
- Corner containers for all UI elements
- Widgets, custom <div> elements
- Easy positioning and repositioning
- 15px offset
- Respects view padding
Manual UI
- Open container for UI elements
- Widgets, custom <div> elements
- Easy positioning or repositioning
- Respects view padding
Custom UI
- Your own container for UI elements
- Widgets, custom <div> elements
- NOT affected by view or ui padding
Widgets
Custom Button
- Create a raw DIV, model after existing
- Fast and easy
- Add key .esri-CSS classes
- Works with manual and default UI
Custom Control
- Create a raw DIV and style
- Fast and easy
- Add key .esri-CSS classes
- Works with manual and default UI
Popups
Docking
- Auto - top-right (desktop) & bottom (mobile)
- Manual - control with break points
- Control with a function
- Disable
Alignment
- Auto - best alignment
- Manual - "top-left, top-center..."
Auto-Center
- Recenter when popup shows
- Good for mobile apps
- Listen for feature selections
Sizing
- Sizing changes for every breakpoint
- Override CSS for break points
- Handle docking and floating states
Panels
Button + Panel
- Create a raw DIV and style
- Dynamically set view padding to offset map
- Listen to click events
Responsive Expand
- Expandable panel for ui on mobile screens
- Build more responsive apps
- Override widget css for mobile
Popup Panel
- Reuse popup as a panel
- Insert widgets or custom elements
- Override top buttons
Popup Panel + Click
- Use popup as a panel
- Insert widgets or custom view
- Override default behavior
Styling
- Fonts
- Icons
- View
- UI
- Widgets
- Popup
Default Themes
- Precompiled xxx.css
- Light and dark Theme (defaults)
- Light and dark blue, green, red, purple
- See documentation
CSS Theme
- Override key CSS classes
- background, foreground, :hover, :focus
- Use caution with .esri-widget
- Note: brittle and not a scalable solution
- Clone jsapi-styles
- npm install
- Add overrides
- background
- foreground (text)
- hover/focus
- button size
- colors
- Host compiled theme
Final Notes
- New CSS and UI design patterns for 4.x
- Easier to build responsive apps
- Try these patterns today!
slides.com/alaframboise
App Layout and CSS Styling with the ArcGIS API for JavaScript v4
By alaframboise
App Layout and CSS Styling with the ArcGIS API for JavaScript v4
- 2,437