Vector maps

React 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

Selected: Canada


Maps

Checkout the API tab to learn more about available maps.


Read-only

Setting the readonly property 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

Population:

    Custom zoom

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


    Disable zoom events

    Setting the zoomEvents property 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


    Import

    
            import { MDBVectorMap } from 'mdb-react-vector-maps';
          

    Properties

    MDBVectorMap

    Name Type Default Description Example
    className String '' Add custom class to MDBVectorMap <MDBVectorMap className="class" />
    map string/JSX 'world' Sets a map for the component <MDBVectorMap map='africa' />
    hoverFill String ''#BDBDBD'' Sets the hover fill color of the map <MDBVectorMap hoverFill='#fff' />
    selectRegion string '' Sets the default selected region <MDBVectorMap selectRegion='PL' />
    readonly Boolean false Makes a map read only <MDBVectorMap readonly />
    selectFill string '#B23CFD' Sets a fill color of the selected region <MDBVectorMap selectFill='#fff' />
    mapRef Reference A reference for the map element <MDBVectorMap mapRef={customRef} />
    zoomMax number/null null Sets the maximum for the scale <MDBVectorMap zoomMax={3} />
    zoomMin number 1 Sets the minimum for the scale <MDBVectorMap zoomMin={0.2} />
    zoomStep number 0.5 Sets the zoom's step (buttons) <MDBVectorMap zoomStep={0.1} />
    zoomEvents Boolean true Enables/disables zoom events (wheel, pinch) <MDBVectorMap zoomEvents={false} />
    scale number 1 Sets the map's initial scale <MDBVectorMap scale={3} />
    colorMap array [] Allows to create a custom fill and tooltips for an array of regions <MDBVectorMap colorMap={[ { fill: '#fff', regions: ['PL', 'US', 'GB']} ]} />
    hover Boolean true Changes a path's fill on hover <MDBVectorMap hover={false} />
    fill String '#E0E0E0' Sets the region's default fill <MDBVectorMap fill='#fff' />
    width String/null null Sets the SVG element's width property <MDBVectorMap width='500px' />
    height String/null null Sets the SVG element's height property <MDBVectorMap height='500px' />
    fillOpacity Number 1 Sets the default fill's opacity <MDBVectorMap fillOpacity={0.5} />
    stroke String '#000' Sets a stroke's color <MDBVectorMap stroke='#fff' />
    strokeOpacity Number 1 Sets a stroke's opacity <MDBVectorMap strokeOpacity={0.1} />
    strokeWidth Number 0.5 Sets a stroke's width <MDBVectorMap strokeWidth={0} />
    strokeLinejoin String 'round' Sets a stroke's linejoin <MDBVectorMap strokeLinejoin='bevel' />
    tooltips Boolean true Enables/disabled tooltips <MDBVectorMap tooltips={false} />
    markers Array [] Adds markers (pins/bullets) to your map <MDBVectorMap markers={[ { x: 233, y: 233, type: 'bullet' } ]} />
    markerFill String '#757575' Sets the default marker's fill <MDBVectorMap markerFill='#fff' />
    markerStroke String '#000' Sets the default marker's stroke <MDBVectorMap markerStroke='#fff' />
    markerInnerFill String 'rgba(0, 0, 0, 0.3)' Sets the default fill for the pin's inner circle <MDBVectorMap markerInnerFill='#fff' />
    markerStrokeWidth Number 1.2 Sets the default marker's stroke width <MDBVectorMap markerStrokeWidth={2} />
    btnClass String '' Classname for toolbar buttons <MDBVectorMap btnClass='btn-dark' />

    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).