Calcite Maps

Overview

Calcite Maps is a theme for Bootstrap that allows users to design, style, and create modern map apps. It provides CSS classes that can be used with Bootstrap to quickly build responsive map apps with a great UI and UX. The framework is designed to work well with mapping components and provides additional features such as collapsible panels and “Full Map” mode.

Features

• 14 different top and bottom layouts
• Small (40px), medium (50px), and large (65px) navbar sizes
• Dark and light color themes
• Calcite colors
• Extended navbar, dropdown menu, and collapsible panels
• Dropdown menu drawer option
• Full map view
• Custom Sass build for Bootstrap and Calcite Maps
• Support for ArcGIS JS 3.x, ArcGIS JS 4.x, and Esri Leaflet
• Dojo and jQuery support

Installation

To get started with Calcite Maps, follow these steps:

1. Build a Bootstrap HTML page.

   • Include references to Bootstrap and Calcite Maps in your HTML file.

2. Apply Calcite Maps classes to your HTML elements to style your app with the desired layout and colors.

Include the necessary libraries in your HTML file:

<link rel="stylesheet" href="path/to/bootstrap.css">
<link rel="stylesheet" href="path/to/calcite-maps.css">
<script src="path/to/jquery.js"></script>
<script src="path/to/bootstrap.js"></script>

Apply Calcite Maps classes to your elements:

<div class="calcite-layout">
    <nav class="calcite-navbar calcite-navbar-top calcite-navbar-dark">
        <ul class="calcite-navbar-items">
            <li class="calcite-navbar-item">Home</li>
            <li class="calcite-navbar-item">About</li>
            <li class="calcite-navbar-item">Contact</li>
        </ul>
    </nav>
    <div class="calcite-map-container">
        <!-- Map content goes here -->
    </div>
</div>

Summary

Calcite Maps is a theme for Bootstrap that provides CSS classes to quickly build responsive map apps with a great UI and UX. It offers a variety of layouts, navbar sizes, color themes, and additional features such as collapsible panels and “Full Map” mode. The framework is designed to work well with mapping components and supports ArcGIS JS 3.x, ArcGIS JS 4.x, and Esri Leaflet. It also provides Dojo and jQuery support. To get started, simply build a Bootstrap HTML page, include references to Bootstrap and Calcite Maps, and apply Calcite Maps classes to style your app.