DEV Community: Subbhashit Mukherjee

Map Visualization In Vue using Leaflet

Subbhashit Mukherjee — Sat, 26 Sep 2020 13:10:53 +0000

In this post, I will be sharing how to use leaflet in Vue to create map visuals.

About Leaflet

Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps. Weighing just about 39 KB of JS, it has all the mapping features most developers ever need.

Leaflet is designed with simplicity, performance and usability in mind. It works efficiently across all major desktop and mobile platforms, can be extended with lots of plugins, has a beautiful, easy to use and well-documented API and a simple, readable source code that is a joy to contribute to.

Here as I am using Vue, I will be using Vue2Leaflet.

Why Leaflet?

Anyone may ask, why leaflet?

There are many libraries that can provide help for map visualization in Vue. Some of them are :
1>vue2-google-maps
2>vue-choropleth
3>MapBox

The reasons I choose Leaflet for this article is that:
1>Leaflet is beginner-friendly:
In Google-maps, we have to make an account on GCP, which is not free (paid). Although Google Maps provide the most number of features, it is not easy to understand in the beginning. Also in choropleth, we have to go through many things to get a simple output.

2>No access token to be generated while using it:
For using MapBox, we have to get an access token, we don't
have to worry about it in Leaflet.

Installation

To install Vue2Leaflet, use this npm command:

npm install vue2-leaflet leaflet --save

Getting Started

Here is the tree hierarchy of my folder :

D:.
└───components
    ├───Body
    ├───DataGathering
    ├───Footer
    ├───Header
    ├───HomePage
    │   ├───assets
    │   └───Breads
    ├───MapComponents
    └───Visuals

Here, for the Map Visual Purpose only, I will use Body and MapComponents folder Only.

Setting Up

Before using the functionalities of Leaflet, we have to import some important things in main.js file.

import 'leaflet/dist/leaflet.css';
import { Icon } from "leaflet";

delete Icon.Default.prototype._getIconUrl;

Icon.Default.mergeOptions({
  iconRetinaUrl: require("leaflet/dist/images/marker-icon-2x.png"),
  iconUrl: require("leaflet/dist/images/marker-icon.png"),
  shadowUrl: require("leaflet/dist/images/marker-shadow.png")
});

Creating the Map component File

Create a Map Component ( Map.vue ) in the Body folder ( Body/Map.vue ) and import that component in the App.vue.

Write this code in that file:

<template>
  <div>
  <MapVisual2></MapVisual2>
  </div>
</template>

<script>
import MapVisual2 from '@/components/MapComponents/MapVisual2'
export default {
  components :{
    MapVisual2,
  }
}
</script>

Creating the visual component for Map-file

Create a Visual Component ( MapVisual2.vue ) in the MapComponents folder ( MapComponents/MapVisual2.vue ) and import that component in the Map.vue.

Code for the component:

<template>
  <div style="height: 80vh">
    <LMap :zoom="zoom" :center="center">
      <LTileLayer :url="url"></LTileLayer>
      <LMarker :lat-lng="[13.1333682,77.5651881]"></LMarker>
      <LMarker :lat-lng="[13.1340669,77.56707]"></LMarker>
      <LMarker :lat-lng="[13.1348904,77.5643231]"></LMarker>
      <LMarker :lat-lng="[13.1367826,77.5711133]"></LMarker>
    </LMap>
  </div>
</template>

<script>
import { LMap, LTileLayer, LMarker } from "vue2-leaflet";
export default {
  name: "Map",
  components: {
    LMap,
    LTileLayer,
    LMarker
  },
  data() {
    return {
      url: "https://{s}.tile.osm.org/{z}/{x}/{y}.png",
      zoom: 16,
      center: [13.1367826,77.5711133],
      bounds: null
    };
  }
};
</script>

Output

Work with Real-Time Data

For using this install Axios.
To install Axios, use this command:

npm install axios

Now , in the same Visual component file add this code:

<template>
<div>
  <div style="height: 80vh">
    <LMap  @ready="onReady" @locationfound="onLocationFound" :zoom="zoom" :center="center">
      <LTileLayer :url="url"></LTileLayer>

      <ul>
        <li v-for="(l,i) in latlong" :key="i">
            <LMarker :lat-lng="l"></LMarker>
        </li>
      </ul>


    </LMap>

  </div>
  <br/>
    <br/>

  </div>

</template>

<script>
//import L from 'leaflet';
import { LMap, LTileLayer, LMarker } from "vue2-leaflet";
const axios = require("axios");
export default {
  name: "Map",
  components: {
    LMap,
    LTileLayer,
    LMarker
  },
  data() {
    return {
      url: "https://{s}.tile.osm.org/{z}/{x}/{y}.png",
      zoom: 2,
      center: [13.1367826,77.5711133],
      bounds: null,
      results : null,
      country : [],
      latlong : [],
      confirmed : [],
    };
  },
  methods: {
onReady (mapObject) {
  mapObject.locate();
},
onLocationFound(location){
  console.log(location)
}
},
created() {
    axios.get("https://corona.lmao.ninja/v2/jhucsse")
    .then(r => r["data"])
    .then(data => {
        for(var i=0;i<742;i++){
            if(data[i].country in this.country){
                continue
            }
            else{

                if(data[i].coordinates["latitude"]!=null && data[i].coordinates["longitude"]!=null){
                    var a=[]
                    this.country.push(data[i].country)
                    a.push(parseFloat(data[i].coordinates["latitude"]))
                    a.push(parseFloat(data[i].coordinates["longitude"]))
                    this.confirmed.push(data[i].stats["confirmed"])
                    console.log(data[i].country)
                    console.log(data[i].coordinates["latitude"])
                    console.log(data[i].coordinates["longitude"])
                    console.log(data[i].stats["confirmed"])
                    this.latlong.push(a)
                }
            }


  }
  console.log(this.latlong)
    }

  )
}
};
</script>

Output

That's the End

Fetching and Visualizing Data in Vue using Axios and Chart.js

Subbhashit Mukherjee — Thu, 27 Aug 2020 15:51:37 +0000

INTRODUCTION

First of all, this will be my first article :), please do support and follow me for more.
I am making a COVID19Tracker of my own and came across something called API. A quick intro for API:

An application program interface (API) is a set of routines, protocols, and tools for building software applications.
Basically, an API specifies how software components should interact.
Additionally, APIs are used when programming graphical user interface (GUI) components.
A good API makes it easier to develop a program by providing all the building blocks. A programmer then puts the blocks together.

GETTING STARTED

This was my file structure:

D:.
└───components
    ├───Body
    ├───DataGathering
    ├───Footer
    ├───Header
    ├───HomePage
    │   ├───assets
    │   └───Breads
    ├───Maps
    └───Visuals

I will be focusing only on working of Axios and Chart.js

To install axios and chart.js:

npm install chart.js --save
npm install axios

To use them:

import Chart from 'chart.js';
const axios = require("axios");

DATA FETCHING

Create a Component named as Cases.vue in Body/Cases.vue

<template>
<div>
    <br>
    <br>
    <div>
        <CaseBread></CaseBread>
        <hr/>
        <br>
        <h2>Cases</h2>
        <CasesLine
        :label="labels"
        :chart-data="confirmed" 
        ></CasesLine>
        <br>
        <br>
        <CasesBar
        :label="labels"
        :chart-data="confirmed" 
        ></CasesBar>
        <br>
        <br>
    </div>
</div>
</template>

<script>
const axios=require("axios")
import CasesBar from '@/components/Visuals/CasesBar'
import CasesLine from '@/components/Visuals/CasesLine'
import CaseBread from '@/components/HomePage/Breads/CaseBread'
export default {
     data : ()=> {
        return {
            labels : [],
            confirmed : [],
        }

    },
    components : {
        CasesLine,
        CasesBar,
        CaseBread
    },
    async created() {
  const { data } = await axios.get("https://covid19.mathdro.id/api/confirmed");
  var c=0
  for(var i=0;i<1000;i++){
    if(data[i].countryRegion=="India"){
            if (data[i].provinceState in this.labels){
              continue
            }
            else{
              this.labels.push(data[i].provinceState)
              this.confirmed.push(data[i].confirmed)
              c=c+1
              if(c==28){
                break
              }
            }
          }
  }
console.log(this.labels)
}   
}
</script>

Note:

Do remove the CasesBread and all of it's related elements while copying this.

So what does it do?

Under the asynchronous lifecycle method called "created" in vue, it fetches data from API:

 https://covid19.mathdro.id/api/confirmed

and passes it to the components CasesLine and CasesBar.These two components use two props, label and chart. Label is an array that will contain the fetched state names and the corresponding cases and chart is an array containing the corresponding cases in each state.

To fetch an API, use:

axios.get("YOUR_API");

MAKING CHARTS

Here I will be discussing two types of charts,

Line Chart
Bar Chart

Line Chart

To create a line chart, create a file called CasesLine.vue in Visuals/CasesLine.vue

<template>
  <canvas ref="myChart" width="900px" height="250px"></canvas>
</template>

<script>
import Chart from 'chart.js';
export default {
  props: {
    label: {
      type: Array
    },
    chartData: {
      type: Array
    },
  },
  aysnc mounted() {
    await new Chart(this.$refs.myChart, {
      type: 'line',
      data: {
        labels: this.label,
        datasets: [
        {
            label: 'CASES',
            borderColor: 'rgba(245, 229, 27, 1)',
            backgroundColor: 'rgba(255, 236, 139,0.2)',
            data: this.chartData,
        }
        ]
      },
      options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
    }
    });
  }
}
</script>

Procedure:

Create a canvas for it in the template tag with a defined ref.
Define two props label and chartdata.
Under the mounted lifecycle method in Vue, create a new Chart and use the ref.
Define type of chart as line
Pass the props to the datasets and labels in the Chart
Your Chart is ready

Result:

Bar Chart

To create a bar chart, create a file called CasesBar.vue in Visuals/CasesBar.vue

<template>
  <canvas ref="myChart" width="900px" height="250px"></canvas>
</template>

<script>
import Chart from 'chart.js';
export default {
  props: {
    label:  {
      type: Array
    },
    chartData:  {
      type: Array
    }
  },
  async mounted() {
    await new Chart(this.$refs.myChart, {
      type: 'bar',
      data: {
        labels: this.label,
        datasets: [
        {
            label: 'CASES',
            backgroundColor: 'rgba(144,238,144 , 0.9 )',
            data: this.chartData,
        }
        ]
      },
      options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
    }
    });
  }
}
</script>

Procedure:

All the points are the same as linechart , except the point that here type should be bar.

Result:

DEV Community: Subbhashit Mukherjee

Map Visualization In Vue using Leaflet

About Leaflet

Why Leaflet?

Installation

Getting Started

Setting Up

Creating the Map component File

Creating the visual component for Map-file

Output

Work with Real-Time Data

Output

That's the End

Fetching and Visualizing Data in Vue using Axios and Chart.js

INTRODUCTION

GETTING STARTED

DATA FETCHING

Note:

So what does it do?

MAKING CHARTS

Line Chart

Bar Chart

THAT'S THE END