Create a good looking map with Vue Great Nepal

If you are building an app that has to support different country maps, it might be a headache to do everything by yourself. That’s why there are different components for various types of maps. One of the components, that might be needed for you, is Vue Great Nepal map. This component will help you to implement interactive map.

Demo Check on GitHub

Component features

There are a few props that will help you to config things, such as colors, or map width.

Props	Accepts	Default	Desc
set-random-color	Boolean	false	Sets random color for every item in the map
hover-color	String (Color name e.g: red or color HEX code)	#eee4ed	Set background color on map hover
stroke-width	Number	1	Set line width of map
stroke-color	String (Color name e.g: red or color HEX code)	1	Set line color of map
province-colors	Array (Array of color codes for 7 provinces)	[]	Custom province color set e.g [‘red’, ‘blue’, ‘#FF00FF’…..] total 7. NOTE: Only applicable for DistrictMap and ProvinceMap
wrapper-class	String	null	Custom class for whole map wrapper
item-class	String	null	Custom class for each map item i.e. each district on DistrictMap

How to install and use Vue Great Nepal component

Process of installing the Great Nepal map for Vue component is easy and straightforward. Just like any other npm package, you can install it with:

npm install --save vue-great-nepal

After you’ve have the package locally, you can create a simple script in order to test if it works.

<template>   
  <div id="app">     
    <DistrictMap         
      set-random-color="true"        
      :stroke-width="2"        
      stroke-color="#000000"        
      :on-map-click="mapClicked"    
     />   
  </div> 
</template> 

<script> 
import { DistrictMap, ZoneMap, ProvinceMap } from 'vue-great-nepal'

export default {   
    name: 'App',   
    components: {    
      DistrictMap,     
      ZoneMap,     
      ProvinceMap   
    },   
    methods: {     
      mapClicked(data) {       
        console.log(data)     
      },   
    } 
 } 
</script>

There are two events you might trigger on the map:

Event	Desc
on-map-click	trigger on every map item click
on-map-hover	trigger on every map item hover

This is how you can test the events:

{
  area: 3312,
  headquarter: "Salleri",
  headquarter_ne: "सल्लेरी",
  max_elevation: 8848,
  name: "Solukhumbu",
  name_ne: "सोलुखुम्बु",
  population: 105886,
  province: 1,
  website: "www.ddcsolukhumbu.gov.np",
  zip: 56000
}

If you do want to check how it looks live, check the demo application, provided in the first paragraph of this article.