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

Basic example

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

Note: Color-coding your map requires JavaScript initialization.

Selected: Canada

Maps

Checkout the API tab to learn more about available maps.

Read-only

Setting the readonly attribute to true will disable selecting regions.

Select region:

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%

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:

    Custom zoom

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

    Disable zoom events

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

    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.

    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.

    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.

    Advanced data vizualization

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

    Vector maps - API

    Usage

    Via data attributes

    All options with an exeption of colorMap can be set via data-mdb-attributes.

    
        <div class="vector-map" data-mdb-readonly="true" data-mdb-stroke="#fff"></div>

    Via JavaScript

    
        const map = document.getElementById('my-map');

        new VectorMap(map, { readonly: true, stroke: '#fff', colorMap: [{ fill: '#E0E0E0', regions: ['GB', 'PL']}] })

    Via jQuery

    Note: By default, MDB does not include jQuery and you have to add it to the project on your own. 

    
        $('#my-map').vectorMap('select', 'CN');

    Options

    Options can be passed via data attributes, JavaScript, or jQuery. For data attributes, append the option name to data-mdb-, as in data-mdb-select-fill="".

    Name Type Default Description
    btnClass String 'btn-dark' Classname for toolbar buttons
    colorMap Array [] Allows to create a custom fill and tooltips for an array of regions
    fill String '#E0E0E0' Sets the region's default fill
    fillOpacity Number 1 Sets the default fill's opacity
    hover Boolean true Changes a path's fill on hover
    hoverFill String '#BDBDBD' Sets the fill's value on hover
    map String 'world' Selects the map (available options: world, europer, worldPacific, africa, northAmerica)
    markers Array [] Adds markers (pins/bullets) to your map
    markerFill String '#757575 Sets the default marker's fill
    markerStroke String '#000 Sets the default marker's stroke
    markerInnerFill String 'rgba(0, 0, 0, 0.3)' Sets the default fill for the pin's inner circle
    markerStrokeWidth Number 1.2 Sets the default marker's stroke width
    readonly Boolean false Disables selecting regions
    scale Number 1 Sets the map's initial scale
    selectFill String '#B23CFD' Sets the selection's color
    selectRegion String - Sets the initial selection (the value has to correspond to a region's ID - f.e. alpha2Code)
    stroke String '#000' Sets a stroke's color
    strokeLinejoin String 'round' Sets a stroke's linejoin
    strokeOpacity Number 1 Sets a stroke's opacity
    strokeWidth Number 0.5 Sets a stroke's width
    tooltips Boolean true Enables/disabled tooltips
    width String/Number Sets the SVG element's width property
    height String/Number Sets the SVG element's height property
    zoomEvents Boolean true Enables/disables zoom events (wheel, pinch)
    zoomMax Number Sets the maximum for the scale
    zoomMin Number 1 Sets the minimum for the scale
    zoomStep Number 0.5 Sets the zoom's step (buttons)

    Marker options

    Those options can be set for each object in the markers array

    Name Type Default Description
    type String 'pin' Changes the type of marker - available options: 'pin', 'bullet'
    x Number 0 x coordinate
    y Number 0 y coordinate
    r (type="bullet") Number 5 bullet's radius
    fill String marker's main fill (if not provided, the general option markerFill will be used)
    stroke String marker's stroke (if not provided, the general option markerStroke will be used)
    strokeWidth Number marker's stroke width (if not provided, the general option markerStrokeWidth will be used)
    innerFill (type="pin") String marker's inner fill (if not provided, the general option markerInnerFill will be used)

    Built-in maps

    Vector Map component offers several built-in maps:

    • world
    • europe
    • worldPacific
    • africa
    • northAmerica

    Most of them use alpha2Code as a country's ID (list), but those with subdivisions use regional codes (ISO 3166).

    Methods

    Name Parameters Description Example
    select Selects a map's region - the argument has to correspond to a region's ID (f.e. alpha2Code) instance.select('PL')
    dispose Removes the VectorMap instance. instance.dispose()
    update Update the instance's options instance.update({ colorMap: [] })
    getInstance element Static method which allows to get the vectorMap instance associated with a DOM element. VectorMap.getInstance(element) 
    
        const map = document.getElementById('my-map');
        const instance = VectorMap.getInstance(map);
        instance.select('GB');

    Events

    Name Description
    select Emitted after selecting a region
    markerClick.mdb.vectorMap Emitted after clicking on a marker. You can access the marker with event.marker. 
    
        const map = document.getElementById('my-map');
        map.addEventListener('select', (e) => {
          console.log(e.selected)
        });

    Import

    MDB UI KIT also works with module bundlers. Use the following code to import this component: 

    
        import VectorMap from 'mdb-vector-maps';