Create a Calcite Maps Bootstrap application

Note: Support for 3D on mobile devices may vary, view the system requirements for more information.

This sample illustrates how to create a responsive application with Calcite Maps and Bootstrap. It shows how you can easily integrate views and widgets into the Bootstrap framework and how to use Calcite styles to quickly change the look and feel of your application.

Here are some of the concepts illustrated:

• How to integrate with the Bootstrap Navbar, Tab and Panel components
• Synchronizing the MapView and SceneView
• Dynamically setting view padding and ui padding based on app layout
• Watching for widthBreakpoint changes
• Watching for popup currentDockPosition changes
• Showing and hiding widgets based on view size changes
• Changing color, style and layout using Calcite Maps CSS classes
• Applying dark widgets theme with CSS classes

Try changing the styles, toggling views, searching and using the popup at different screen sizes.

To learn more about how to integrate with Bootstrap or how to create your own custom themes, layouts or Sass builds, visit Calcite Maps.