Bootstrap 5 Vector Map

Use a vector map to show where things happen: your offices, your customers or where your visitors come from. It draws an interactive SVG map with markers. People can zoom in, drag the map around and hover a marker to see its name.

AdminKit uses jsVectorMap 1.7.0 in the free and PRO versions. The free version has the world map. AdminKit PRO adds a map of the United States.

The map takes its colors from the current color mode. You describe the map in a function that receives the theme colors, and AdminKit calls it again when someone switches between light and dark mode. Dark mode explains the theme colors and the other helpers that work this way.

ExampleCopy Anchor Link

A world map with markers, as on the Analytics dashboard. Hover a marker to see the city.

<div class="card mb-0">
  <div class="card-header">
    <h2 class="card-title mb-0">Real-Time Visitors</h2>
  </div>
  <div class="card-body px-4" aria-busy="true">
    <div class="position-relative" style="height: 350px;">
      <div class="skeleton placeholder-glow" aria-hidden="true"><span class="placeholder"></span></div>
      <div id="world_map" class="h-100"></div>
    </div>
  </div>
</div>

<script>
var map = adminkit.vectorMap(function (theme) {
  return {
    selector: "#world_map",
    map: "world",
    zoomButtons: true,
    zoomOnScroll: false,
    markers: [
      { coords: [31.230391, 121.473701], name: "Shanghai" },
      { coords: [28.70406, 77.102493], name: "Delhi" },
      { coords: [6.524379, 3.379206], name: "Lagos" },
      { coords: [35.689487, 139.691711], name: "Tokyo" },
      { coords: [40.7127837, -74.0059413], name: "New York" },
      { coords: [34.052235, -118.243683], name: "Los Angeles" },
      { coords: [51.507351, -0.127758], name: "London" },
      { coords: [40.416775, -3.70379], name: "Madrid" }
    ],
    markerStyle: {
      initial: { r: 9, stroke: theme.white, strokeWidth: 7, fill: theme.primary },
      hover: { fill: theme.primary, stroke: theme.primary }
    },
    regionStyle: {
      initial: { fill: theme["gray-200"] }
    }
  };
});

window.addEventListener("resize", function () {
  map.updateSize();
});
</script>

The map fills its element, so that element needs a height. Here it is the h-100 child of a position-relative box of 350px. The same box holds the loading skeleton, so nothing moves when the map appears. Animations explains the skeleton markup.

Use it in your pageCopy Anchor Link

js/app.js loads jsVectorMap and its maps, and adds adminkit.vectorMap() to the page. There is nothing else to install.

app.js is a module script, so it runs after the page has been parsed. The template's pages therefore create their maps in a DOMContentLoaded listener, which runs after app.js:

<div id="world_map" style="height: 350px;"></div>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    var map = adminkit.vectorMap(function (theme) {
      return {
        selector: "#world_map",
        map: "world",
        zoomButtons: true,
        zoomOnScroll: false,
        markers: [
          { coords: [51.507351, -0.127758], name: "London" },
          { coords: [40.7127837, -74.0059413], name: "New York" }
        ],
        markerStyle: {
          initial: { r: 9, stroke: theme.white, strokeWidth: 7, fill: theme.primary },
          hover: { fill: theme.primary, stroke: theme.primary }
        },
        regionStyle: {
          initial: { fill: theme["gray-200"] }
        }
      };
    });

    window.addEventListener("resize", function () {
      map.updateSize();
    });
  });
</script>

adminkit.vectorMap() returns the jsVectorMap instance. When the map has drawn, it removes the skeleton in the closest aria-busy="true" element and sets aria-busy="false".

jsVectorMap does not follow the size of its element by itself. That is why the template calls map.updateSize() when the window is resized. Call it too after you show a map that was hidden, for example in a tab or a modal.

OptionsCopy Anchor Link

The function returns jsVectorMap's options. These are the ones the template sets:

Colors and dark modeCopy Anchor Link

The function gets the colors of the current mode, such as theme.primary, theme.white and theme["gray-200"]. In dark mode, theme.white is the card background, so the white ring around each marker blends in with the card in both modes.

When the mode changes, AdminKit calls your function again with the new colors. It applies the new regionStyle.initial and markerStyle.initial to the map. The map is not created again, so the other options, such as markers, are only read once.

In AdminKit PRO, the zoom buttons also get a background color of their own in light and in dark mode. In the free version they keep jsVectorMap's own colors.

United States mapCopy Anchor Link

When your data is about the US, show the states instead of the world. map: "us_aea_en" draws them in an Albers equal-area projection. The E-commerce dashboard uses it for sales by state:

<div class="position-relative" style="height: 350px;">
  <div id="usa_map" class="h-100"></div>
</div>

<script>
var usaMap = adminkit.vectorMap(function (theme) {
  return {
    selector: "#usa_map",
    map: "us_aea_en",
    zoomButtons: true,
    zoomOnScroll: false,
    markers: [
      { coords: [37.77, -122.41], name: "San Francisco: 375" },
      { coords: [40.71, -74.0], name: "New York: 350" },
      { coords: [39.09, -94.57], name: "Kansas City: 250" },
      { coords: [36.16, -115.13], name: "Las Vegas: 275" },
      { coords: [32.77, -96.79], name: "Dallas: 225" }
    ],
    markerStyle: {
      initial: { r: 9, stroke: theme.white, strokeWidth: 7, fill: theme.primary },
      hover: { fill: theme.primary, stroke: theme.primary }
    },
    regionStyle: {
      initial: { fill: theme["gray-200"] }
    }
  };
});

window.addEventListener("resize", function () {
  usaMap.updateSize();
});
</script>

Other mapsCopy Anchor Link

The build includes only the maps above. Each map is a JavaScript file that registers itself with jsVectorMap.addMap(). The files are in src/js/modules/vector-maps/, and src/js/modules/vector-maps.js imports the ones the build includes.

AdminKit PRO has more map files in that folder that the build leaves out: canada, iraq, russia, spain, us_lcc_en, us_merc_en, us_mill_en and world_merc. To use one, import its file in vector-maps.js, next to the world map, and build again:

import "./vector-maps/world.js";
import "./vector-maps/us-aea-en.js";
import "./vector-maps/canada.js";

Then pass the registered name as map, for example map: "canada". Each import makes js/app.js larger, so add only the maps you show.

AccessibilityCopy Anchor Link

• The map is an SVG drawing without a text alternative. Give the same information as text as well, such as a list or a table of the markers.
• Keep zoomOnScroll: false, as the template does. Otherwise the map catches the mouse wheel and the page stops scrolling under the pointer.
• The marker names only show on hover. Do not put information there that the page does not give elsewhere.

RelatedCopy Anchor Link

• React Vector Map: the VectorMap component in AdminKit for React
• Next.js Vector Map: the same component in AdminKit for Next.js
• Dark mode: the theme colors and adminkit.vectorMap() next to the chart helpers
• Animations: the skeleton that shows until the map has drawn
• Card: the card around the map
• Vector maps demo
• Analytics dashboard demo: the world map
• E-commerce dashboard demo: the United States map