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

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

Clone this repo and run example:

cd vue-cmap/example
npm run dev

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>

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>

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: [] }
  // ...
]

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

Type: String Default: 100%

Width of map container.

Type: String Default: 550px

Height of map container.

Type: Array

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

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.

Type: Boolean Default: true

Whether to enable province view (zoom in to see cities of the province selecetd).

Type: Boolean Default: false

Whether to load tile map from Open Street Map.

Type: Boolean Default: true

Whether to show map zoom control widget.

Type: Boolean Default: true

Whether to enable box zoom.

Type: Boolean Default: true

Whether to enable double click zoom.

Type: Boolean Default: true

Whether to enable scroll wheel zoom.

Type: Number Default: 3

Min map zoom level.

Type: Number Default: Infinity

Max map zoom level.

Type: Array Default: [[18, 72], [54, 137]]

The latitude and longitude bound of map area. Zooming and panning of map are restricted in this area.

Type: Object

Tile style for city and province areas, default args are shown as below:

const tileStyle = {
  weight: 2,              // border width
  opacity: 1,             // content transparency
  borderColor: 'white',   // border color
  dashArray: 4,           // border dash length
  fillOpacity: 0.7        // border transparency
}

Type: Object

Tile style on hover, default args are shown as below:

const tileStyle = {
  weight: 5,              // border width
  borderColor: '#666',    // border color
  dashArray: 0,           // borer dash length
  fillOpacity: 0.7        // border transparency
}

By modifying the require code in modules/loader.js, you can modify the component size to fit the needs. When onlu contury view is needed, all code loading GeoJSON can be commented out to reduce Webpack chunk size.

• 0.0.4
  • Fix width and height style issue
  • Add zoom conf
• 0.0.3
  • Add conf interface
  • Add mask on data loading
  • Fix bug on empty provinces
  • Fix style bug on IE
  • Add doc
• 0.0.2 Implement data rendering on city data
• 0.0.1 Implement switching between country and province views

MIT