BubbleLayer
The BubbleLayer component renders data points as bubbles on a map, accepting
an array of data points with required properties like latitude and longitude. It
supports customization of bubble size using the radius prop and optional
tooltips for displaying additional information.
Import
import { BubbleLayer } from '@dynatrace/strato-geo';
Use cases
For rendering data points with customizable radius a BubbleLayer component can
be used. The BubbleLayer component accepts an array of data points as data
prop. Data point's minimum required properties are latitude and longitude.
Size interpolation
The sizeInterpolation prop determines how the size of the bubbles changes with
zoom level.
'zoom': The size of the bubbles adjusts dynamically based on the zoom level of the map. As the user zooms in or out, the bubble sizes change accordingly to maintain relative proportions.'fixed':The size of the bubbles remains constant regardless of the zoom level. This means that as the user zooms in or out, the size of the bubbles on the map remains the same, offering consistent visual representation.
Scale and radius
The scale prop controls how the size of the bubbles is scaled, affecting their
visual representation on the map.
Linear Scaling
This is the default scaling mode, in which the size of the bubbles is scaled linearly based on the data range provided. The size of the bubbles increases or decreases proportionally to data values.
In this scaling mode, the value accessor has to be explicitly provided by
passing to the radius prop a callback that returns the value which will be
used to calculate the scale.
Additionally, when using linear scaling, you have the option to specify a
radiusRange, which is an array or the minimum and maximum sizes for the bubble
radius in pixels. This allows more control over the size range of bubble
displayed on the map.
Logarithmic Scaling
Alternatively, setting the scale prop to 'log' applies logarithmic scaling
to the bubble sizes. Logarithmic scaling is useful for representing data that
spans several orders of magnitude, as it compresses the range of values into a
more visually manageable scale.
Similar to linear scaling, logarithmic scaling also allows for specifying a
radiusRange to define the minimum and maximum sizes for the bubble radius.
In this scaling mode, the radius prop must be callback function that
dynamically calculates the radius based on the data points.
No Scaling
In contrast, when the scale prop is set to 'none', no automatic scaling is
applied to the bubble size. A constant number must be provided for the radius
prop to set the size of all bubbles uniformly, or a callback function that will
be run for each data point and the returned value used as a radius. When
radius prop is not set, the default radius of 12px will be applied.
Be aware, that the radiusRange prop is not supported in none scaling mode
because it's not possible to derive the scaling mechanism for the provided
range.
Tooltip
The BubbleLayer component has an optional tooltip that displays additional
data point information when hovering over data points from any of the data
layers. To enable the tooltip a BubbleLayer.Tooltip subcomponent should be
passed inside the BubbleLayer component. When a BubbleLayer.Tooltip
subcomponent is provided without any children, the default tooltip will be used.
By default, the tooltip will display the location information of the hovered bubble, but it can be heavily customized.
Coloring
The BubbleLayer supports two ways of color configuration: granular
configuration using the color prop, or using a one of the available legend
subcomponents (e.g. SequentialLegend, ThresholdLegend, or
CategoricalLegend).
Note: Detailed information about coloring can be found in the MapView
documentation page under the Coloring section.
Granular color configuration
For a granular color customization, layer's color prop should be used.
Color configuration using a legend
To connect a data layer to the legend, a color property of the layer should be
set to legend string.