How to design great map apps?

Strategy

Vision

User Needs

Business Needs

Success

Design System

Principles

Pattern

Methodology

Style Guide

Calcite

Calcite

ArcGIS Pro

ArcGIS JS

Design system created by Esri

Principles, pattern, style guide, branding guidelines, geo-centric...

Calcite Web

Calcite Web

• Web framework developed by Esri
• Branding guide and style for web pages
• Calcite - colors, fonts, icons...
• Light-weight, fast, responsive
• Sass, JS, documentation

github.com/Esri/calcite-web

Calcite Bootstrap

Calcite Bootstrap

• Calcite theme and custom build for Bootstrap
• Calcite - colors, fonts, icons...
• Light and dark themes
• Custom build, Sass, Documentation
• Dojo and jQuery

github.com/Esri/calcite-bootstrap

Calcite Maps

Calcite Maps

• Bootstrap theme for creating modern map apps
• Map app framework + components + styles
• Calcite - themes, colors, fonts, icons...
• ArcGIS JS 3.x, 4.x, Esri-Leaflet
• Desktop and mobile

Fast and easy to design and style great apps

Bootstrap

Map App Framework

Navbar, Dropdown Menu, Panels + Bootstrap

Calcite Maps Styles

• Layout - top, bottom, margins
• Dropdown - standard, drawer
• Panels - left, right
• Themes - light, dark, custom
• Colors - Calcite
• Widget themes

Style Explorer

Get Started

1. HTML
2. Reference CSS
   • Calcite Bootstrap or Bootstrap
   • Calcite Maps
3. Reference JavaScript
   • Mapping API (ArcGIS JS API)
   • Calcite Maps JS
   • jQuery or dojoBootstrap

github.com/Esri/calcite-maps

Dev Options

1. Access compiled CSS directly
2. Create custom Sass build
   • Fork - Bower - npm - grunt

Samples

github.com/Esri/calcite-maps

Calcite Maps

---

Styler Template

Styler

• New configurable application template
• Built on Calcite Maps, Bootstrap and ArcGIS JS v4
• 2D and 3D
• Highly configurable (styleable)
• Bonus features!

Easy to create, style and share apps!

What can you do with it?

1. Style apps from webmaps and scenes

2. Style apps on-the-fly

More examples

github.com/Esri/calcite-maps-styler-template