Calcite

Calcite

ArcGIS Pro

ArcGIS JS

Design system created by Esri

Style guide, branding guidelines, geo-centric...

Calcite Web

Calcite Web

• Web framework developed by Esri
• Calcite - colors, fonts, icons...
• Branding guide and style for web pages
• 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

• Modern framework using Calcite styles and Bootstrap
• Responsive web map apps
• Calcite - colors, fonts, icons...
• Light and dark themes
• Custom CSS components, build, Sass, documentation
• Dojo and jQuery
• ArcGIS 3.x, 4.x, Esri-Leaflet

Getting 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

Styles

• Layout - top, bottom, margins
• Dropdown - standard, drawer
• Panels - left, right
• Themes - light, dark, custom
• Colors - Calcite
• Search - expand/collapse
• Full map
• Widget themes

Explore with examples and Styler

Dev Options

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

Calcite Maps Application Template

Styler

Styler App Template

• Configurable app template built with ArcGIS JS v4
• Calcite Maps (Bootstrap)
• Extends the application-boilerplate
• WebMap (2D) and WebScene (3D) support
• Highly configurable
• Responsive

Configure Apps

• Web Maps (2D) and Web Scenes (3D)
• Calcite Maps layouts, colors, fonts...
• Widget layouts/positions
• Widget extensions (Find places, coords...)
• Override map and scene settings

edn.maps.arcgis.com/home/content.html

Bonus!

• Access app default webmap and webscene
• Override via JSON or URL with params
• Widget extensions (Find places, coords, full map...)
• Source code on GitHub

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