App Design and CSS Styling
with the
ArcGIS API for JavaScript v4
Allan Laframboise
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
<!-- 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
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
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
Session Feedback
Download the Esri Events App
App Design and CSS Styling with ArcGIS API for JavaScript v4
By alaframboise
App Design and CSS Styling with ArcGIS API for JavaScript v4
- 2,680