Bootstrap Vector Map

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

How to use this Bootstrap Vector Map

Place the code in the <body> for Interface 
          
<!-- Map 1 - 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-1" 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/[email protected]/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/[email protected]/components/maps/map-1/assets/css/map-1.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/[email protected]/components/maps/map-1/assets/controller/map-1.js"></script>

The Bootstrap Vector Map is a feature that integrates scalable vector maps into admin dashboards. Using the Bootstrap framework, these maps offer a responsive and adaptable design that adjusts seamlessly across various devices and screen sizes. These maps typically include interactive elements such as markers, tooltips, or regions, allowing administrators to display geographical data effectively.