How to Create jVectorMap In ReactJs Using create-react-app Cli, jQuery

Posted by & filed under CSS, HTML5, JAVASCRIPT, JQUERY, jVectorMap, ReactJS.

In this tutorial we are going to see How to create jVectorMap in ReactJs Using create-react-app cli, jQuery. Please follow this step by step instructions to Integrate jVectorMap With your React application.

Prerequisites

  1. NPM (Latest stable release of NodeJS)
  2. Facebook create-reacta-app Cli
  3. jQuery
  4. jVectorMap
  5. Map JS Files (It contains SVG path, latitude and longitude informatio to draw a map)

 

 

Create React Application Using create-react-app CLI:

First create and start React application and using create-reacta-app cli by running following commands in your local project folder.

npx create-react-app YOUR-PROJECT-NAME
cd YOUR-PROJECT-NAME
npm start

create-react-app 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.

Install react-router-dom to Add Routing:

Next Install react-router-dom using NPM.

 npm install react-router-dom --save 

Where – –save add the react-router-dom in project dependency in package.json file.

Create Multiple Pages and Add Routing Using react-router-dom in React App:

Next create ‘pages’ directory in src folder, Now add required pages (Africa.js, Asia.js, Europe.js, NorthAmerica.js, SouthAmerica.js and World.js ) in Single page React Application.

Next import HashRouter or BrowserRouter from react-router-dom in index.js file, and inform React Application by keeping entire tag inside the tage that’s we are going use Routing like this.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

import './styles/css/style.css';

//import {BrowserRouter as Router} from 'react-router-dom';
import {HashRouter as Router} from 'react-router-dom';

ReactDOM.render(
    <Router>
        <App />
    </Router>
    , 
    document.getElementById('root')
);

Now add routing in App.js file by importing all the pages.

import React, { Component } from 'react';

import {Route, Switch} from 'react-router-dom';

import World from './pages/World';
import Africa from './pages/Africa';
import Asia from './pages/Asia';
import Europe from './pages/Europe';
import NorthAmerica from './pages/NorthAmerica';
import SouthAmerica from './pages/SouthAmerica';

import TopNavBar from './components/TopNavBar';
import Navbar from './components/Navbar';


class App extends Component {
  render() {
    return (
      <div className="App">
        <TopNavBar/>
        <div className="container mt-nav">
          <Navbar/>
          <Switch>
            <Route path="/africa" component={Africa}/>
            <Route path="/asia" component={Asia}/>
            <Route path="/europe" component={Europe}/>
            <Route path="/north-america" component={NorthAmerica} />
            <Route path="/south-america" component={SouthAmerica}/>
            <Route path="/" component={World}/>
          </Switch>
        </div>

        
      </div>
    );
  }
}

export default App;

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 React project root folder.

npm install jquery jvectormap --save

Import jQuery, jVectorMap and Map Files in React Pages and Initialize jVectorMap:

Next import jQuery, jVectorMap and Map Files on top of React Pages. Then Add map container <div>, also create a drawMap function which will be called after HTML has been appended to the DOM .i.e componentDidMount event. In the drawMap function initialize jVectorMap.


import React, {Component} from  'react';

const jQuery = require( 'jquery' );
const $ = jQuery;
window.jQuery = jQuery;
require('jvectormap');
require('../lib/jquery-jvectormap-world-mill');

class World extends Component{
    drawMap(){
        $('#world-map').vectorMap({
            map: 'world_mill'
        });    
    }
    componentDidMount() {
        this.drawMap();
    }
    render(){
        return (
            <div className="map-container">
                <div id="world-map" className="jvmap-smart"></div>
            </div>
        );
    }
}

export default World;

Include jVectorMap CSS in index.html file or Import in your SCSS file:

In this project I am using SCSS, So I have imported jVectorMap CSS in style.scss file like this.

// jVectorMap
@import "../../../node_modules/jvectormap/jquery-jvectormap"; 

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] muni[at]smarttutorials.net

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!