Datamaps - v0.5.9

Pro Component

Datamaps is a vector-based, cross-browser and cross-platform component for interactive geography-related data visualization on the web.
Keep reading our Datamaps example and learn how to use this plugin.

Usage

Copy

<script>
import AsyncWorldMap from '@/components/WorldMap/AsyncWorldMap.vue';

export default {
  components: {
    AsyncWorldMap
  },
  data() {
    return {
      mapData: {
        AUS: 760,
        BRA: 900,
        CAN: 120,
        DEU: 1300,
        FRA: 540,
        GBR: 690,
        GEO: 200,
        IND: 200,
        ROU: 600,
        RUS: 757,
        USA: 1800
      },
      points: [
        {
          name: 'Brazil',
          centered: 'BRA',
        },
        {
          name: 'France',
          centered: 'FRA',
        },
        {
          name: 'Italy',
          centered: 'ITA',
        },
        {
          name: 'Oman',
          centered: 'OMN',
        },
        {
          name: 'Indonesia',
          centered: 'IDN',
        },
        {
          name: 'Romania',
          centered: 'ROU',
        }
      ]
    };
  }
};
</script>

Example

−

Copy

<b-card no-body>
  <b-card-body class="pt-0">
    <async-world-map class="map map-big"
                     :map-data="mapData"
                     :points="points">
    </async-world-map>
  </b-card-body>
</b-card>