choropleth version of Nepal's map using covid-19 cases as a layer using vuejs

choropleth-nepal.vue

<!-- Working example of this gist is found here : https://codesandbox.io/s/choropleth-nepal-y5imk -->

<!-- This standalone script is a choropleth implementation of nepali map using vuejs framework -->
<!-- This script has these dependencies: vue-choropleth, vue2-leaflet & axios -->
<!-- To run this vue script you need to install these dependencies using npm as described below: -->
<!-- npm install vue-choropleth vue2-leaflet axios  -->
<!-- With that spin up your http server to serve this standalone map. -->
<!-- You also need to download or use nepal.json to work correctly -->
<!-- There's another file along with this gist package-lock.json which gives you the idea about dependecies nothing more than that, it's for Read-Only purpose -->
<!-- To run or test this vue file independently / standalone you could also run "vue serve choropleth-nepal.vue" for this to work you need to install a global package which will be guided by npm -->
<!-- Feel free to ask/comment if you need help or want to contribute | made by sidbelbase -->
<template>
  <div id="app">
    <l-map
      :center="[28.082, 84.078]"
      :zoom="7"
      style="height: 100vh; background-color: #0c0c0d;"
      :options="mapOptions"
    >
      <choropleth-layer
        :data="covidcases"
        title-key="name"
        id-key="name"
        :value="value"
        :extra-values="extraValues"
        geojson-id-key="district"
        :geojson="geodata"
        :color-scale="colorScale"
        strokeColor="333333"
        currentStrokeColor="999999"
        :currentStrokeWidth="2"
        :strokeWidth="2"
      >
        <template slot-scope="props">
          <info-control
            :item="props.currentItem"
            :unit="props.unit"
            title="District-Wide Covid Cases"
            placeholder="Hover over districts to see stats."
            position="topright"
          ></info-control>
        </template>
      </choropleth-layer>
    </l-map>
  </div>
</template>

<script>
import { InfoControl, ChoroplethLayer } from "vue-choropleth";
import { LMap } from "vue2-leaflet";
import nepalGeojson from "./assets/nepal.json";
import axios from "axios";

export default {
  name: "app",
  components: {
    LMap,
    "info-control": InfoControl,
    "choropleth-layer": ChoroplethLayer
  },
  data() {
    return {
      covidcases: [],
      geodata: null,
      colorScale: [
        "#333333",
        "#252525",
        "#525252",
        "#737373",
        "#969696",
        "#bdbdbd",
        "#d9d9d9",
        "#f0f0f0",
        "#f1f1f1"
      ],
      value: {
        key: "cases",
        metric: "Positive Cases"
      },
      extraValues: [
        {
          key: "recovered",
          metric: "Recovered Cases"
        },
        {
          key: "deaths",
          metric: "Death Cases"
        }
      ],
      mapOptions: {
        attributionControl: false
      }
    };
  },
  mounted() {
    this.geodata = nepalGeojson;
  },
  methods: {
    beautify: function(any_number) {
      if (typeof any_number === "undefined") {
        return "0";
      } else {
        return any_number;
      }
    }
  },
  created() {
    axios
      .get("https://aworkingapi.herokuapp.com/api/v1/covid/districts/all")
      .then(response => {
        Object.values(response.data).forEach(district => {
          this.covidcases.push({
            active: this.beautify(district.active),
            cases: this.beautify(district.cases),
            recovered: this.beautify(district.recovered),
            deaths: this.beautify(district.deaths),
            id: district.id,
            name: district.name
          });
        });
      });
  }
};
</script>

<style>
body {
  margin: 0 10px;
  background-color: #0c0c0d;
}
</style>

package.json

nepal.json