Custom Regional Map Data
Custom Regional Map Data
[File Name]: areaMapUserData.md [File Content Begin]
Custom Regional Map Data
The maps provided by ECharts 3 sometimes cannot meet our requirements. In such cases, we can introduce GeoJSON as the base map.
1 Prepare Data
Prepare your GeoJSON file, paying attention to the number of brackets. For GeoJSON format data, see the specific format at http://geojson.org/.
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [125.6, 10.1]
},
"properties": {
"name": "Dinagat Islands"
}
}Place the prepared map data under the ext/mapdata directory. It is recommended to refer to the directory structure of the default three-level administrative region map data for China (china directory) provided by the system and create a new folder.
ext
├── ext.css
├── ext.js
└── mapdata
├── area-code
│ ├── _default.json
│ ├── index.json
│ ├── world-area.json
│ └── world-area-cn.json
├── china
│ ├── china.json
│ ├── citycode.json
│ ├── counties
│ └── province
├── world-cn.json
└── world-en.json2 Directory Explanation
2.1 Regional Data Index Directory
Regional data index, map data metadata, used to register custom map data, informing the system how to read and organize custom data.
2.2 Regional Data Reading Index (index.json)
The data below are the three default registered regional indices. The areaPath is relative to the application root directory; external URLs can also be registered.
[
{
"label": "China Three-Level Administrative Divisions",
"areaPath": "ext/mapdata/area-code/_default.json"
},
{
"label": "World Map - en",
"areaPath": "ext/mapdata/area-code/world-area.json"
},
{
"label": "World Map - cn",
"areaPath": "ext/mapdata/area-code/world-area-cn.json"
}
]
For example: Register a new region.
2.3 Map Data Dictionary (_default.json)
Taking China's three-level administrative divisions (_default.json) as an example, explain the format of the map data dictionary.
| Attribute | Description |
|---|---|
| level | Hierarchy level |
| name | Name |
| code | Unique identifier, supports Chinese |
| dataPath | Path to the GeoJSON data file |
| items | Child nodes, structure same as Area. May have no child nodes. |
Data with child nodes can be used for regional map drill-down operations.
{
"level": 0,
"name": "China",
"code": "china",
"dataPath": "ext/mapdata/china/china.json",
"items": [
...
]
}Example:
{
"level": 0,
"name": "China",
"code": "china",
"dataPath": "ext/mapdata/china/china.json",
"items": [
{
"level": 1,
"name": "Guangdong Province",
"code": "44",
"dataPath": "ext/mapdata/china/province/44.json",
"items": [
{
"name": "Guangzhou City",
"code": "440100",
"level": 3,
"dataPath": "ext/mapdata/china/counties/440100.json"
},
]
}
....
]
}3 Example
3.1 Register Map
Add Wangmo County information to area-code/index.json.
[
{
"label": "China Three-Level Administrative Divisions",
"areaPath": "ext/mapdata/area-code/_default.json"
},
{
"label": "World Map - en",
"areaPath": "ext/mapdata/area-code/world-area.json"
},
{
"label": "Wangmo County",
"areaPath": "ext/mapdata/area-code/mowang-area.json"
}
]3.2 Metadata Definition
In the area-code directory, add a regional data metadata definition according to the format described in 2.3.
ext/mapdata/area-code/mowang-area.json
area-code
├── _default.json
├── index.json
├── mowang-area.json
└── world-area.json{
"level": 0,
"name": "Wangmo County",
"code": "mowang",
"dataPath": "ext/mapdata/mowang/mowang.json",
"items": [
... Township data information
]
}3.3 Add Map Data
Create a new directory ext/mapdata/mowang to store the GeoJSON data for the newly registered region.
mapdata
...
├── mowang
│ ├── 1-zhen // Folder: Town-related map data
│ ├── 2-cun // Folder: Village-related map data
│ ├── 3-zu // Folder: Group-related map data folder
│ └── mowang.json // File: County map data
4 Registration Complete
After successful registration, you can see the newly registered map in the "Map Data" dropdown when selecting a region for a regional map.
Tip
This file may be cached. Starting from version 1.4.3, the index file can be modified on the system configuration page.
After successful registration as demonstrated above, "Bianrao Town" below should actually display as "Wangmo County".
[File Content End]