Responsive Vector maps plugin built with the latest Bootstrap 5 and Vue 3. 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 exampleCreate your map with MDBVectorMap component.
Checkout the API tab to learn more about available maps.
Adding the readonly property will disable selecting regions.
Color-coding is possible with colorMap property 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.
To customize tooltips, you need to set 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).
Vector Maps enable customizing the zoom behaviour (max, min & step values).
Disable zoom eventsSetting the zoomEvents property to false will disable zooming on wheel/pinch events.
It's possible to use your custom SVG map with VectorMap component with customMap property- just remember to set id and name (or title) attributes for each path.
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.
BulletsAdding 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 vizualizationUse buttons to toggle between displays (fill / pulsating bullets) and datasets (sales, employees, annual profit increase, sales increase)
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4