UX & UI Tips for Map Apps
<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-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
Colors
Fonts
Icons
Learn more...
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...
Calcite Dojo
ArcGIS JS 3.16
- Calcite theme for the ArcGIS API for JS
- Widgets - zoom, home, popup...
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!
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
Styler
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!
UX & UI Tips for Map Apps slides.com/alaframboise/calcite-maps <Allan_Laframboise class = 'front-end developer' />
<Alan_Sangma class = 'design engineer' />