BootstrapVue Argon Dashboard
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.
<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>
<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>