Vue-datamaps-live

by seungwoo321

HTML

<script src="https://unpkg.com/vue@2.6.14"></script>
<script src="https://unpkg.com/vue-datamaps@0.2.51/dist/vue-datamaps.umd.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-datamaps@0.2.51/dist/vue-datamaps.css">
<div id="app">
  <vue-datamaps 
    :fills="fills"
    :data="data"
    :geography-config="geographyConfig"
    bubbles
    :bubbles-config="bubblesConfig"
    ></vue-datamaps>
</div>

Vue

Vue.use(window['vue-datamaps'])
new Vue({
  el: "#app",
  data: {
    geographyConfig: {
      dataUrl: '//raw.githubusercontent.com/Seungwoo321/vue-datamaps/master/demo/example-vue-cli3/public/data/world.json',
      popupOnHover: false,
      highlightOnHover: false,
      borderWidth: 0
    },
    bubblesConfig: {
      data: [
        {
          name: 'Area 1',
          radius: 23,
          centered: 'BRA'
        },
        {
          name: 'Area 2',
          radius: 15,
          centered: 'USA'
        },
        {
          name: 'Area 3',
          radius: 50,
          latitude: 73.482,
          longitude: 54.5854
        }
      ],
      highlightBorderColor: '#FFFFFF',
      highlightFillColor: '#F8A900'
    },
    data: {
      USA: { fillKey: 'active' },
      RUS: { fillKey: 'active' },
      DEU: { fillKey: 'active' },
      BRA: { fillKey: 'active' }
    },
    fills: {
      defaultFill: '#3B3D46',
      active: '#F8A900'
    }
  }
})