vuehellomap v1.0.5

VueVectorMap

A Vue wrapper component for Jsvectormap jsvectormap

Installation

Installing via npm

npm i vuevectormap

Get started

import Vue from 'vue'
import VueVectorMap from 'vuevectormap'

// Import your preferred map
require('jsvectormap/dist/maps/world')

Vue.use(VueVectorMap)

// You can set defaults globally
Vue.use(VueVectorMap, {
  map: 'world',
  backgroundColor: 'orange',
  // And so on..
  // check the jsvectormap repo to get all configurations options..
})

Just define vuevectormap component and we're done.

<template>
  <vuevectormap></vuevectormap>
</template>

Set configurations

Set jsvectormap configurations via props

<vuevectormap
  map="world"
  width="600"
  height="300"
  :markers="[{	name: 'Russia', coords: [61, 105] }, ]">
</vuevectormap>

Handle events

<vuevectormap
  @viewportChange="handleEvent"
  @regionSelected="handleEvent"
  @markerSelected="handleEvent"
  @regionTooltipShow="handleEvent"
  @markerTooltipShow="handleEvent">
</vuevectormap>

A little bit complex example

<template>
  <vuevectormap
    ref="vvmap"
    :width="800"
    :height="400"
    :labels="labels"
    :focusOn="{ region: 'EG', animate: true }"
    backgroundColor="#FFF"

    :series="series"

    :markers="markers"
    :selectedMarkers="selectedMarkers"
    :markersSelectable="true"
    :markersSelectableOne="true"
    :markerStyle="markerStyle"
    :markerLabelStyle="markerLabelStyle"

    :selectedRegions="selectedRegions"
    :regionsSelectable="true"
    :regionsSelectableOne="true"
    :regionStyle="regionStyle"
    :regionLabelStyle="regionLabelStyle">
  </vuevectormap>
</template>

<script>
export default {
  mounted() {
    this.map = this.$refs.vvmap
  },
  data: () => ({
    map: null,

    // Start markers
    markers: [
      { name: 'Palestine', coords: [31.5, 34.8] },
      {	name: 'Russia', coords: [61, 105] },
    ],
    markerStyle: {},
    markerLabelStyle: {},
    selectedMarkers: [0],
    
    // Regions
    regionStyle: { initial: { fill: '#ccc' } },
    regionLabelStyle: { initial: { fill: 'orange' } },
    selectedRegions: ['CN'],
    
    // Series
    series: {
      regions: [{
        attribute: 'fill',
        legend: {
          title: 'Play around with series',
        },
        scale: {
          scale1: 'red',
          scale2: 'blue',
          scale3: 'green',
        },
        values: {
          US: 'scale1',
          EG: 'scale2',
          IT: 'scale3',
          BR: 'scale2',
        }
      }]
    }
  }),
  computed: {
    labels() {
      const markers = this.markers

      // Labels for markers and regions
      return {
        markers: {
          render(index) {
            return markers[index].name
          }
        },
        regions: {
          render(code) {
            return code === 'EG' ? code : null
          }
        }
      }
    }
  },
}
</script>

Contributions

Your contributions always welcome

License

vuevectormap licensed under MIT.