VueVectorMap

A Vue wrapper component for jsvectormap

Versions

Vuejs version	Package version	Branch
3.x	2.x	next
2.x	1.x	master

Installation

To get started with vuevectormap, you can install it through your preferred package manager.

npm i vuevectormap@next # pnpm add vuevectormap || yarn add vuevectormap

Demo

Example at vuevectormap
Example at codesandbox and code

Get started

import { createApp } from 'vue'
import vueVectorMap from 'vuevectormap'
import 'vuevectormap/src/scss/vuevectormap.scss'
import '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!
Notice: the default map is world, so you don't have to pass map prop.

<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';