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