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

Show code

Maps

Checkout the API tab to learn more about available maps.

Show code

Read-only

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

Population:
    Show code

    Custom zoom

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

    Show code

    Disable zoom events

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

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

    Show code