Designing Apps with

Calcite Maps

@AL_Laframboise

slides.com/alaframboise

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

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

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

Styles

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

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

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

Final Awesomeness!

Summary

  • Calcite is a design system created by Esri
  • Calcite Maps - modern map app framework
    • Build responsive apps with Bootstrap components
    • Use Calcite styles and colors to design great map apps
    • Sass for custom css
  • Styler - *New* ArcGIS JS v4 configurable app template
    • 2D and 3D support
    • Built on Calcite Maps
    • Widget extensions
    • Easy to style, customize and share apps

Thank you

slides.com/alaframboise

Made with Slides.com