Vue ChartsMap Topology

ReactAngularVueJavascript

Enterprise

All AG Charts Map Series use the GeoJSON format for their topology data.

GeoJSON is an industry-standard specification for representing geographic shapes, lines, and points.

GeoJSON Features

A GeoJSON file contains a list of features. Each feature contains a description of geographic data (geometry) along with associated properties.

Geometry types

There are seven geometry types used, as listed in the table below.

Properties

The properties of a feature are represented as a JSON object. While there is no standard for which properties are included, they typically contain the name of the feature in the property called name.

"properties": {
    "name": "United Kingdom",
    "code": "GB"
}

Connecting Data to Topology

When using a Map Series which requires topology, both the topology and the data must be provided in the chart or series options.

series: [
{
    type: 'map-shape',
    topology: {
        type: 'FeatureCollection',
        features: [
            {
                type: 'Feature',
                geometry: {
                    type: 'Polygon',
                    coordinates: [...],
                },
                properties: {
                    name: 'United Kingdom',
                    code: 'GB'
                }
            }
        ],
        // ...
    },
    data: [
        { country: 'United Kingdom', population: 67330000 },
        { country: 'France', population: 67500000 },
        // ...
    ],
    idKey: 'country',
    topologyIdKey: 'name' //default value
}

• Each item in the data must contain a field that refers to the associated geometry for that data item. In the above example this is the country field.
• The series definition must contain an idKey which refers to this field.
• The series definition can contain an optional topologyIdKey to match to the relevant field in the GeoJSON properties. If not provided, this will default to name.
• In this example, the first data item which has the value of United Kingdom will match to the topology feature with the matching properties.name value.

Topology for Background Series

The Map Shape Background and Map Line Background series do not use any data. These series will render every relevant feature found in the provided topology.

Useful Resources

• Map Shaper - can simplify maps to reduce their filesize, convert other formats to GeoJSON, and has a command line to manipulate geographic data.
• GeoJSON.io - draw shapes on a map and export GeoJSON.
• GeoJSON Lint - validates GeoJSON.