vue-cmap

Vue China map visualizing component, supports drilldown and lazy loading.

Feature

Smooth switch between country and province views.
Support OpenStreetMap tile map.
Lazy loading province view shape data, based on code splitting.
Super lightweight, init loading size less than 80KB.

Demo

Clone this repo and run example:

cd vue-cmap/example
npm run dev

Import

Import CMap as a typical Vue component:

<template>
  <c-map :mapData="myMapData"></c-map>
</template>

<script>
import CMap from 'vue-cmap'

export default {
  data() {
    return {
      myMapData: [
        { name: "安徽", value: 200, children: [] }
      ]
    }
  },
  components: { CMap }
}
</script>

API

Pass data and conf through Vue props. If map data stays static after loading CMap, the v-once directive can be added to optimize performance.

<c-map
  v-once
  :mapData="myMapData"
  :mapConf="myMapConf">
</c-map>

mapData

Pass in province and city data through this props. Since the number of Chinese cities remains static, so full dataset of provinces and cities can be passed in once. You can pass in a subset of full country data with arbitrarily order. Data format is shown below:

const myMapData = [
  {
    // name must be corresponding to province's Chinese name 
    name: "安徽",
    value: 200,
    children: [
      { name: "黄山市", value: 100 },
      { name: "合肥市", value: 100 }
      // ...
    ]
  },
  { name: '北京', value: 300, children: [] }
  // ...
]

mapConf

Pass in configuration arguments through this props. Arguments will be assigned with default args shown below, then used to render map.

export default {
  colors: ['#800026', '#BD0026', '#E31A1C', '#FC4E2A', '#FD8D3C', '#FEB24C', '#FED976', '#FFEDA0'],
  scale: null,
  hasCityView: true,
  hasTileLayer: false,
  hasZoomControl: true,
  countryBounds: [[18, 72], [54, 137]],
  tileStyle: {
    weight: 2,
    opacity: 1,
    borderColor: 'white',
    dashArray: 4,
    fillOpacity: 0.7
  },
  highlightStyle: {
    weight: 5,
    borderColor: '#666',
    dashArray: 0,
    fillOpacity: 0.7
  }
}

width

Type: String Default: 100%

Width of map container.

height

Type: String Default: 550px

Height of map container.

colors

Type: Array

Map color array, number of colors is not limited. Lower-ranking color is used for area with larger data.

scale

Type: Object Default: null

Pass in this arg if you need to handle scale manually. When this arg is specified, the colors args does not work.

const scale = [
  { color: 'green', threshold: 100 },  // Green for areas whose value less then 100
  { color: 'yellow', threshold: 200 }, // Yellow for areas whose value less then 200
  { color: 'red', threshold: 300 },    // Red for areas whose value less then 300
]

By default scale is generated by CMap from data passed in, you don't have to declare this arg manually.