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

[email protected]

Credit

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

License

MIT © jwn25