Bootstrap Vector Map Card

How to use this Bootstrap snippet
Global Sales Overview
Last updated: 7 days ago

How to use this Bootstrap Vector Map Card

Place the code in the <body> for Interface 
          
<!-- Map 2 - Bootstrap Brain Component -->
<section class="py-3 py-md-5">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-12 col-lg-9 col-xl-8">
        <div class="card widget-card border-light shadow-sm">
          <div class="card-body p-4">
            <div class="d-block d-sm-flex align-items-center justify-content-between mb-3">
              <div class="mb-2 mb-sm-0">
                <h5 class="card-title widget-card-title m-0">Global Sales Overview</h5>
              </div>
              <div>
                <span class="text-secondary fs-7">Last updated: 7 days ago</span>
              </div>
            </div>
            <div id="bsb-map-2" class="bsb-jvm-zoom-btn"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
Place the <link> tag in the <head> for CSS 
          
<link rel="stylesheet" href="https://unpkg.com/bootstrap@5.3.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jsvectormap/dist/css/jsvectormap.min.css">
<link rel="stylesheet" href="https://unpkg.com/bs-brain@2.0.4/components/maps/map-2/assets/css/map-2.css">
Place the <script> tag before the closing </body> for JS 
            
<script src="https://cdn.jsdelivr.net/npm/jsvectormap"></script>
<script src="https://cdn.jsdelivr.net/npm/jsvectormap/dist/maps/world-merc.js"></script>
<script src="https://unpkg.com/bs-brain@2.0.4/components/maps/map-2/assets/controller/map-2.js"></script>

The Bootstrap Vector Map is a versatile and interactive mapping component designed for integration within admin dashboards. Leveraging the Bootstrap framework, this feature allows administrators to incorporate dynamic and visually appealing vector maps into their dashboards. These vector maps offer responsive designs that adapt seamlessly across various devices and screen sizes. They enable the display of geographical data in a customizable and interactive format, often supporting multiple layers, markers, tooltips, and zoom functionalities.