How to Integrate jVectorMap With VueJs Using VueCli, jQuery

Posted by & filed under CSS, HTML5, JAVASCRIPT, VueCli, VueJS, VueJs 2.

How to Integrate jVectorMap With VueJs Using VueCli, jQuery

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)

 

 

Note: Guys who know already how create an single page VueJS application with VueCli, then follow this compact version of video tutorial. Integrate jVectorMap With VueJS Using VueCli and jQuery in 2 Minutes

Create VueJS Application Using VueCli

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

  1. VueCli requires NodeJS need to be installed in your system. So please install latest stable release of NodeJS using Node Version Manager (NVM). Please follow this Video tutorial on how to install NodeJS in Mac/Ubuntu/Windows Using NVM, if you not installed NodeJS already using NVM. Because Node Version manager helps us to easily manage NodeJS version.

  2. Next install Vue Cli globally using NPM, If you have not installed already.
    npm install -g @vue/cli
    

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>

Download Premium Only Scripts & 80+ Demo scripts Instantly at just 1.95 USD per month + 10% discount to all Exclusive Scripts

If you want any of my script need to be customized according to your business requirement,

Please feel free to contact me [at] muni2explore[at]gmail.com

Note: But it will be charged based on your customization requirement

Get Updates, Scripts & Other Useful Resources to your Email

Join 10,000+ Happy Subscribers on feedburner. Click to Subscribe (We don't send spam)
Every Email Subsciber could have access to download 100+ demo scripts & all future scripts.

Get Instant Script Download Access!