A Vue wrapper component for Jsvectormap
npm install vuevectormapA Vue wrapper component for jsvectormap
| Vuejs version | Package version | Branch |
| :--- |:---------------:| ---: |
| 3.x | 2.x | next |
| 2.x | 1.x | master |
To get started with vuevectormap, you can install it through your preferred package manager.
``bash`
npm i vuevectormap@next # pnpm add vuevectormap || yarn add vuevectormap
Example at vuevectormap
Example at codesandbox and code
`js
import { createApp } from 'vue'
import VueVectorMap from 'vuevectormap'
import 'vuevectormap/src/scss/vuevectormap.scss'
// Import your preferred map
require('jsvectormap/dist/maps/world')
const app = createApp({})
app.use(VueVectorMap, {
// Set global options if any etc..
backgroundColor: '#f6f6f6'
})
app.mount('#app')
`
Just define vuevectormap component and we're done!map
Notice: the default map is world, so you don't have to pass prop.
`vue`
height="350"
:options="{
// Map options..
// markers: []
// markerStyle: {}
// etc..
}">
Tip: if you're using sass and and you want to overwrite the default style, the below snippet is for you.
Look at this file to know about all possible variables.
`scss
// Example variables.
$tooltip-bg-color: #3a3d4c;
$tooltip-font-family: Roboto, Etc;
@import 'jsvectormap';
``