Vue.js

Demo

Example at vuevectormap.
Example at codesandbox and code.

Installation

To get started using Vuevectormap you will need to install this package via npm.

For Vue.js v2 support please visit the master branch in the offical repository.

$ npm i vuevectormap@next

Basic usage

To start using Vuevectormap in your project, all you need is to follow these steps.

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.
  backgroundColor: '#f6f6f6'
})

app.mount('#app')

Now we’re ready to add the vuevectormap component and we’re done! and notice: the default map is world, so you don’t have to pass map prop, if you want to use another map consider passing map option to the component.

<template>
  <div class="...">
    <vuevectormap
      width="700"
      height="350"
      :options="{
        // Map options..
        // markers: []
        // markerStyle: {}
        // etc..
      }">
    </vuevectormap>
  </div>
</template>

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.

// Example variables.
$tooltip-bg-color: #3a3d4c;
$tooltip-font-family: Roboto, Etc;

@import 'jsvectormap';