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

Posted 10:39 am by muni & 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

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";