UX & UI Tips for Map Apps

slides.com/alaframboise/calcite-maps

   <Allan_Laframboise class='front-end developer'/>
 
       <Alan_Sangma class='design engineer'/>

Calcite

What is Calcite?

Design system created at ESRI

 

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

Principles

 

  • Color is meaningful
  • Icons are purposeful
  • UX is foundational
  • UI is impactful

Calcite

calcite-bootstrap

calcite-maps

*calcite-dojo

calcite-web

calcite-colors

ArcGIS Pro

Calcite Web

Calcite Web

  • CSS web framework developed by Esri
  • Based on Calcite - colors, fonts, icons
  • Branding guide, developer style guide
  • Built with SASS
  • Documentation

github.com/esri/calcite-web

esri.github.io/calcite-web/styleguides

Colors

Fonts

Icons

Learn more...

github.com/esri/calcite-web

esri.github.io/calcite-web/styleguides

Calcite Bootstrap

Calcite Bootstrap

  • Calcite theme and a custom build for Bootstrap
  • Calcite colors, styles and fonts
  • Light and dark themes
  • Built with SASS
  • Additional features...

github.com/esri/calcite-bootstrap

Calcite Dojo

ArcGIS JS 3.16

  • Calcite theme for the ArcGIS API for JS
  • Widgets - zoom, home, popup...

New Calcite Theme

ArcGIS JS 4.x

  • Default for 4.x
  • Rethinking UX and UI
  • Developer interface

Calcite Maps

Calcite Maps

Modern framework for designing map apps with Bootstrap

  • Calcite-Bootstrap
  • Calcite styles & colors
  • Map-app friendly
  • Custom Sass build
  • Open Source

Not Web App Builder or an App Template!

github.com/esri/calcite-maps

Getting Started (v0.0.2)

  • Custom build
  • Sass, Themes, APIs
  • DOM and CSS
  • Styler

Custom Build

fork - npm - bower - grunt

Sass, Themes, APIs

map-position.scss, navbar.scss, panel.scss...

DOM and CSS

calcite-maps/extras/index.html

Styler

calcite-maps/extras/styler/styler.html

slide extras

CSS Selector Guide

Map and Nav Layout

  • Map 
    • .map-position-absolute, .map-position-relative
  • Nav 
    • .nav-position-top, .nav-position-bottom
    • ​nav-space-none, .nav-space-top, .nav-space-bottom, ​.nav-space-all​
<body class="calcite-maps map-position-absolute nav-position-top nav-space-top">

Navbar Header

  • Brand and title​ 
    • ​.esri-icon .esri-icon-layer
    • .navbar-brand, .navbar-info
  • Collapsible 
<div class="navbar-header">
    <a class="navbar-brand">
       <span class="esri-icon esri-icon-layers"></span>
    </a>
    <div class="navbar-info">
        <div class="navbar-title text-overflow">Calcite Maps</div>
        <div class="navbar-subtitle text-overflow">A framework for designing beautiful map apps</div> 
    </div>

Navbar Colors and Themes

  • .calcite-gray, .calcite-gray-25, .calcite-gray-50...
  • .navbar-text-dark, .navbar-text-light
<body class="calcite-maps map-position-absolute nav-position-top nav-space-none panel-right">

    <nav class="navbar navbar-fixed-top navbar-text-light calcite-dark-blue">

Navigation - Primary

  • Main menus, tab and form controls
  • E.g. Map, Scene and Search
<ul class="nav navbar-nav navbar-right">                    
    <!-- Map and Scene - NOTE: Removed on mobile devices due to 3D support -->
    <li class="active"><a id="mapNav" class="hidden-xs hidden-sm" href="#2dTab" aria-controls="2Dtab" aria-expanded="true" role="tab" data-toggle="tab" data-tooltip="tip" data-placement="bottom" data-dojo-dataid="pid0" data-original-title="2D View">Map</a></li>
    <li><a id="sceneNav" class="hidden-xs hidden-sm" href="#3dTab" aria-controls="3Dtab" role="tab" data-toggle="tab" data-tooltip="tip" data-placement="bottom" data-dojo-dataid="pid1" data-original-title="3D View">Scene</a></li>                  
    <li><form id="searchNav" class="navbar-form navbar-search hidden-xs visible-sm visible-md visible-lg"></form></li>
    ...
</ul>

Navigation - Secondary

  • Dropdown menu with all "options"
  • Show and hide panels (data-target)
<ul class="dropdown-menu">
    <li><a id="mapNavMenu" class="hidden-xs visible-sm hidden-md hidden-lg" href="#2dTab" aria-controls="2Dtab" role="tab" data-toggle="tab">Map</a></li>
    <li><a id="sceneNavMenu" class="hidden-xs visible-sm hidden-md hidden-lg" href="#3dTab" aria-controls="3Dtab" role="tab" data-toggle="tab">Scene</a></li>
    <li><a id="infoNavMenu" role="button" data-target="#panelInfo" aria-haspopup="true"><span class="glyphicon glyphicon-info-sign"></span> Info</a></li>
    <li><a id="searchNavMenu" class="visible-xs" role="button" data-target="#panelSearch" aria-haspopup="true"><span class="glyphicon glyphicon-search"></span> Search</a></li>
    <li><a id="basemapsNavMenu" role="button" data-target="#panelBasemaps" aria-haspopup="true"><span class="glyphicon glyphicon-th-large"></span> Basemaps</a></li>
    <li><a id="bookmarksNavMenu" role="button" data-target="#panelBookmarks" aria-haspopup="true"><span class="glyphicon glyphicon-book"></span> Bookmarks</a></li>
    <li><a id="legendNavMenu" role="button" data-target="#panelLegend" aria-haspopup="true"><span class="glyphicon glyphicon-list"></span> Legend</a></li>
    ...
</ul>

Accordion Panels

  • Collapseable windows
  • E.g. Info, Basemaps, Search, Legend, Bookmarks...
<div id="panelAccordion" class="panel-group" role="tablist" aria-multiselectable="true">
    <div id="panelInfo" class="panel panel-default collapse" data-dojo-dataid="pid18" style="height: 0px;">
        <div id="headingInfo" class="panel-heading" role="tab">
            <div class="panel-title">
                <a class="panel-toggle" role="button" data-toggle="collapse" href="#collapseInfo" data-parent="#panelAccordion" aria-expanded="true" aria-controls="collapseInfo" data-dojo-dataid="pid19"><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span> Info</a>
                <a class="panel-close" role="button" data-toggle="collapse" data-target="#panelInfo" data-dojo-dataid="pid29"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a>  
            </div>
        </div>
        <div id="collapseInfo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingInfo" data-dojo-dataid="pid20" style="height: 0px;">
            <div class="panel-body">
                <p>This is a great place to describe what your application is about and why it's important.</p>
            </div>
        </div>
    </div>
...

Map Widgets

  • Position with CSS or programmatically
// ArcGIS JS 4.x - view and ui padding

mapView = new MapView({
     container: "mapViewDiv",
     map: map,
     center: app.lonlat,
     zoom: app.zoom,
     padding: {top: 64},
     ui: {
         components: ["zoom"],
         padding: {top: 15, left: 15, bottom: 30, right: 15}
     }
});

Popup

  • Position with CSS or programmatically
// ArcGIS JS 4.x - popup dock properties

mapView = new MapView({
    map: map
});

mapView.then(function(){
    mapView.popup.dockOptions = {
        buttonEnabled: true,
        breakpoint: false,
        position: "bottom"
    }
});

Custom Themes

Why Calcite Maps?

  • Custom build system for creating map apps with Bootstrap
  • Calcite styles, colors, fonts and themes for map apps
  • Small, fast, light-weight, fully customizable
  • Great for styling and prototyping
  • Fully integrated with ArcGIS JS 4.x
  • Open source

This is not WAB or an App Template!

Thank you!

slides.com/alaframboise/calcite-maps

Made with Slides.com