How to Integrate jVectorMap With VueJs Using VueCli, jQuery

Posted 6:02 am by muni & filed under CSS, HTML5, JAVASCRIPT, VueCli, VueJS, VueJs 2.

In this tutorial we are going to see How to Integrate jVectorMap With VueJs Using VueCli, jQuery. Please follow this step by step instructions to Integrate jVectorMap With your VueJs application.

Prerequisites

1. Vue Cli (To create VueJS application)
2. jQuery
3. jVectorMap
4. Map JS Files (It contains SVG path, latitude and longitude informatio to draw a map)

Create VueJS Application Using VueCli

First Create Single Page VueJS Application Using VueCli command line interface.

Please go to your project root folder and open your terminal, then type following VueCli command to create VueJs application.

vue create YOUR-PROJECT-NAME

Where YOUR-PROJECT-NAME – replace with your project name like i.e.vue-jvectormap

Create Multiple Pages and Add Routing Using Vue Router:

Now Create new folder named pages in src folder. Next create Six pages names Africa.vue, Asia.vue, Europe.vue, NorthAmerica.vue, SouthAmerica.vue and World.vue in pages folder.

Next import those pages in your router.js file to add routing.

import Vue from 'vue'
import Router from 'vue-router'
import World from './pages/World.vue';
import Africa from './pages/Africa.vue';
import Asia from './pages/Asia.vue';
import Europe from './pages/Europe.vue';
import NorthAmerica from './pages/NorthAmerica.vue';
import SouthAmerica from './pages/SouthAmerica.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'world-map',
      component: World
    },
    {
      path: '/africa',
      name: 'africa',
      component: Africa
    },
    {
      path: '/asia',
      name: 'asia',
      component: Asia
    },
    {
      path: '/europe',
      name: 'europe',
      component: Europe
    },
    {
      path: '/north-america',
      name: 'NorthAmerica',
      component: NorthAmerica
    },
    {
      path: '/south-america',
      name: 'SouthAmerica',
      component: SouthAmerica
    },
  ]
})

Install jQuery and jVectorMap Using NPM:

Now install jQuery and jVectorMap using Node Package Manager (NPM). So run following command in your terminal from your VueJS project root folder.

npm install jquery jvectormap --save

Import jQuery, jVectorMap and Map Files in Each Vue Pages:

Next import jQuery, jVectorMap and Map Files on top of each Vue Pages created.

<script>
window.jQuery = require('jquery');
var $ = window.jQuery;
require('jvectormap');
require('../lib/jquery-jvectormap-world-mill.js');

export default {
   
}
</script>

Initialize jVectorMap in VueJS Application:

Next add jVectorMap container DIV in each VueJS page.

<template>
    <div class="map-container">
        <div id="world-map" class="jvmap-smart"></div>
    </div>
</template>

Finally create drawMap() method to initialize jVectorMap, which will be called on once pages has been mounted to the DOM.

<script>
window.jQuery = require('jquery');
var $ = window.jQuery;
require('jvectormap');

require('../lib/jquery-jvectormap-world-mill.js');

export default {
    mounted(){
        this.drawMap();
    },
    methods:{
        drawMap(){
            $('#world-map').vectorMap({
                map: 'world_mill'
            });
        }
    }
}
</script>