Map

Introduction

A map is a type of chart that visualizes a data lake as a Region color or fill effect to display geographic location. Typically, map charts use administrative boundary layers or map tiles as the base map, and use color or fill levels to represent Region-specific data values.

Chart composition

The map is mainly composed of elements such as path data and labels that resemble geographic Regions.

The path primitive shaped like a geographic Region is the basic element of the map, and the relevant drawing configuration is essential:

mapChart.type: Chart type, the type of map is'map'
mapChart.nameField: Classification field, map the geographic Region represented by the path primitive
mapChart.valueField: Numerical field, map the color of the path primitive

Since mapping Geographical Regions requires the support of map data, the configuration of map data is also essential:

VChart.registerMap(mapName, mapData): VChart provides an api for map data registration, wheremapNameIndicates the name of the registered map data,mapDataRefers to the specific map data, the default isgeojsonType map data, also supportedtopojson Type map data.
mapChart.map: Specify to use the registered map data name

For more map related configurations, seeMap

Get started quickly

Map Features

data

Two pieces of data are required in the map:

Base map data The most basic element of the map chart is the map base map, and loading the map is divided into 3 steps:

Get remote basemap data, such as:await fetch(xxx)
Register map data such as:

VChart.registerMap('china', china_topojson, {
  type: 'topojson',
  object: 'china'
});

VChart provides api for map data registrationVChart.registerMap(mapName, mapData), in whichmapNameIndicates the name of the registered map data,mapDataRefers to the specific map data, the default isgeojsonType map data, also supportedtopojson Type map data as in the example below.

Specify the use of registered map data names, such asVChart.map: 'mapName'

Meta map data

one地理维度Field specifying the Region to be colored on the base map
one数值Field used to map the specified visual channel such as shading depth Note: If the Region name in the incoming Geographic Dimension field does not correspond to the base map data, you need to passmapChart.nameMapSpecify.

Specify nameMap

As mentioned above, if the Region name in the metadata map data does not correspond to the base map data, you need to passmapChart.nameMapSpecify. For example inBase mapIn the example of, the Region name in the metadata map data does not have an administrative unit, but it is in the base map data, so it needs to be configuredmapChart.nameMap.

Custom Mapping

By default, the map uses discrete coloring to color each Region, that is, the color of each Region is not continuous. But in many scenarios, the map Region needs to represent the numerical size through the shading depth, so as to facilitate and quickly find outliers. In VChart, this can be achieved by customizing the color map.

color: {
    type: 'linear',
    range: ['rgb(252,250,97)', 'rgb(252,150,134)', 'rgb(87,33,15)']
  }

Custom projection

Can be configured in Map Regionprojection: typeTo configure the map projection type, you can refer to the specific configuration itemsConfiguration Item Document.

interaction

The map supports the interaction of zooming and dragging, which can be configured in the map Regionroam: trueEnable interaction, and the zoom size can also be configured through configuration.zoomLimitTo limit:

{
  "region": [
    {
      "roam": true,
      "coordinate": "geo",
      "zoomLimit": {
        "min": 1,
        "max": 6
      }
    }
  ]
}

Here is an example of a map zoom interaction:

Map