Vector maps

Bootstrap 5 Vector maps plugin

Responsive Vector maps plugin built with the latest Bootstrap 5. Customizable map display options such as , custom zoom, and many more.

Note: Read the API tab to find all available options and advanced customization

Note: Currently, the plugin is only compatible with the basic MDB package imported in UMD format. More about import MDB formats.

Basic example

You can auto initialize your map with most of the available options without any additional JavaScript - simply add data-mdb-vector-map-init attribute to a div element with class vector-map and set properties via data-mdb-attributes.

Note: Color-coding your map requires JavaScript initialization.

Selected: Canada

Show code

Maps

Checkout the API tab to learn more about available maps.

Show code

Read-only

Setting the readonly attribute to true will disable selecting regions.

Select region:
Show code

Color-coded map with legend

Color-coding is possible with colorCode array - each object consists of the following keys: fill(string representing color) and regions - array of region's IDs.

Note: add hover: false to disable fill change on mouseover.

Annual growth:
  • 0-4%
  • 4-12%
  • 12-25%
  • 25-50%
  • 50-75%
  • > 75%
Show code

Data from API with custom tooltips

To customize tooltips, you need to set options.colorMap.regions to an array of objects (instead of strings). Each object should consist of two keys - id (region's ID) and tooltip (the additional tooltip's content).

Population:
    Show code

    Custom zoom

    Vector Maps enable customizing the zoom behaviour (max, min & step values).

    Show code

    Disable zoom events

    Setting the zoomEvents option to false will disable zooming on wheel/pinch events.

    Show code

    Custom SVG map

    It's possible to use your custom SVG map with VectorMap component - just remember to set id and name (or title) attributes for each path.

    Show code

    Pins

    Adding pins requires defining x and y coordinates - those values will position your marker relative to the SVG element.

    As Vector Map component can work with a variety of maps, it's not possible to position pins using longitude and latitude.

    Show code

    Bullets

    Adding bullets requires defining x and y coordinates - those values will position your marker relative to the SVG element.

    As Vector Map component can work with a variety of maps, it's not possible to position bullets using longitude and latitude.

    Show code

    Advanced data visualization

    Use buttons to toggle between displays (fill / pulsating bullets) and datasets (sales, employees, annual profit increase, sales increase)

    Show code