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.

hasCityView

Type: Boolean Default: true

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

hasTileLayer

Type: Boolean Default: false

Whether to load tile map from Open Street Map.

hasZoomControl

Type: Boolean Default: true

Whether to show map zoom control widget.

boxZoom

Type: Boolean Default: true

Whether to enable box zoom.

doubleClickZoom

Type: Boolean Default: true

Whether to enable double click zoom.

ScrollWheelZoom

Type: Boolean Default: true

Whether to enable scroll wheel zoom.

minZoom

Type: Number Default: 3

Min map zoom level.

maxZoom

Type: Number Default: Infinity

Max map zoom level.

countryBounds

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.

tileStyle

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
}

highlightStyle

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
}

Custom

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.

Changelog

• 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

License

MIT