Vue Great Nepal

Vue.js component for Greater Nepal Map

Installation

npm install --save vue-great-nepal

Live Demo

Visit the links below and play around with different types of map available.

https://jwn25.github.io/vue-great-nepal

OR

https://jeevandhakal.com.np/vue-great-nepal-playground

Usage

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

Available Props

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
provience-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

Available Events

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

Example event for DistrictMap (on district click or hover)

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

About Author

Jeewan Dhakal

[e-mail]

Credit

Thank you Kiran Neupane for this awesome idea. Check out his repository for react-js component for Nepal map.

License

MIT © jwn25