React ChartsMaps - Markers and Points of Interest

The Map Marker Series visualises data for geographic points, with the ability to vary the size to represent data values.

Simple Map Markers

To create a Map Marker Series, use the map-marker series type and provide data and topology. These can be provided in either the chart or series objects.

data: data,
topology: topology,
series: [
    // ...
    {
        type: 'map-marker',
        idKey: 'name',
    },
],

In this configuration:

• The topology and data are provided once on the chart level.
• idKey defines the property key in the data that will be matched against the property value in the topology. See Connecting Data to Topology for more details.
• The map-shape-background series has its topology defined on the series level.
• The map-shape-background series is rendered behind the map-marker series due to their order in the series array.

Map Marker Position from Data

Instead of using a topology file, the Map Marker Series can use geographic data from within the data. This is best suited for data containing latitude and logitute coordinates such as crime data.

data: data,
series: [
    // ...
    {
        type: 'map-marker',
        latitudeKey: 'lat',
        longitudeKey: 'lon',
    },
],

In this configuration:

• No topology is required for the map-marker series.
• latitudeKey and longitudeKey refer to fields in the provided data, and are used to position the marker.

Proportional Marker Size

To vary the size of the marker to denote the magnitude of the data values use sizeKey, size and maxSize.

series: [
    // ...
    {
        type: 'map-marker',
        latitudeKey: 'lat',
        longitudeKey: 'lon',
        sizeKey: 'count',
        sizeName: 'Count',
        size: 3,
        maxSize: 50,
    },
],

In this configuration:

• sizeKey provides the numerical values determining the size of each marker.
• sizeName is optional and configures the display name reflected in Tooltips.
• size provides the size of the marker for the smallest data point.
• maxSize provides the size for the largest data point.

Customisation

It is possible to customise the fill, stroke and shape of the markers, as well as to add labels. See the API Reference for more details.

API Reference