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.
A Map Marker Series should be combined with a Map Shape Background Series.
data: data,
topology: topology,
series: [
// ...
{
type: 'map-marker',
idKey: 'name',
},
],
In this configuration:
- The
topologyanddataare provided once on the chart level. idKeydefines 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-backgroundseries has its topology defined on the series level. - The
map-shape-backgroundseries is rendered behind themap-markerseries 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
topologyis required for themap-markerseries. latitudeKeyandlongitudeKeyrefer 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:
sizeKeyprovides the numerical values determining the size of each marker.sizeNameis optional and configures the display name reflected in Tooltips.sizeprovides the size of the marker for the smallest data point.maxSizeprovides 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
Properties available on the AgMapMarkerSeriesOptions interface.
The text to display in the legend for this series.
If multiple series share this value, they will be merged for the legend toggle behaviour.
Primary identifier for the series. This is provided as seriesId in user callbacks to differentiate multiple series. Auto-generated ids are subject to future change without warning, if your callbacks need to vary behaviour by series please supply your own unique id value.
The data to use when rendering the series. If this is not supplied, data must be set on the chart instead.
The key to use to retrieve latitude values from the data, used to control the position of the markers.
The key to use to retrieve longitude values from the data, used to control the position of the markers.
The key to use to retrieve size values from the data, used to control the size of the markers.
The name of the node key containing the colour value. This value (along with colorRange config) will be used to determine the colour of the markers.
A human-readable description of the id-values. If supplied, this will be shown in the default tooltip and passed to the tooltip renderer as one of the parameters.
A human-readable description of the latitude values. If supplied, this will be shown in the default tooltip and passed to the tooltip renderer as one of the parameters.
A human-readable description of the longitude values. If supplied, this will be shown in the default tooltip and passed to the tooltip renderer as one of the parameters.
A human-readable description of the size values. If supplied, this will be shown in the default tooltip and passed to the tooltip renderer as one of the parameters.
A human-readable description of the colour values. If supplied, this will be shown in the default tooltip and passed to the tooltip renderer as one of the parameters.
A human-readable description of the label values. If supplied, this will be shown in the default tooltip and passed to the tooltip renderer as one of the parameters.
The colour range to interpolate the numeric colour domain (min and max colorKey values) into.
A callback function for adjusting the styles of a particular Map marker based on the input parameters.
The shape to use for the markers. You can also supply a custom marker by providing a Marker subclass.