NetworkLayer
The network layer visualizes connected data as nodes and links. See the Network Layer docs for details.
Parameters
object
data
optionalThe data to load into the layer.
id
optionalstringA unique id of the layer. If not specified, it will be generated automatically.
options
optionalThe options to set on the layer.
overrideStyles
optionalOverrides the style properties set in NetworkLink and NetworkNode.
pin
optionalPins the specified nodes on the map. When you drag a pinned node and release it, the pin is removed. To keep the pin in place, pass the state of pinned nodes in the pin prop and update it in the onDragEnd event.
ref
optionalRefObject<NetworkLayerRefProps>Ref prop for use with React's useRef or createRef. This allows access to the imperative part of the layer's API.
visible
optionalbooleanWhether the layer is visible.
Returns ReactNode
A function to be imported to enable the graph engine in the network layer:
import { NetworkLayer, createNetworkGraphEngine } from 'mapweave/react/layers';Once imported, call the function to create a graph engine instance and pass in the data to analyze it. See the Graph Analysis docs for details.
Parameters
Returns NetworkGraphEngine
The analyzed data.
A definition of a combo link returned by the onCombineLinks function. See the Proximity combining docs for details.
stringThe unique identifier.
stringThe identity of the node at one end of the combo link.
stringThe identity of the node at the other end of the combo link.
Record<string, NetworkLink>A dictionary of links included in the combo link, indexed by link id.
A function to style the combo.
Parameters
Returns void
A definition of a combo link returned by the onCombineNodes function. See the Proximity combining docs for details.
stringThe unique identifier.
Record<string, NetworkNode>A dictionary of nodes included in the combo node, indexed by node id.
A function to style the combo.
Parameters
Returns void
LngLatArray[number, number]An array that defines longitude and latitude in that order in degrees from the Greenwich meridian and the equator respectively.
The graph engine instance created by createNetworkGraphEngine().
Measures the number of times a node lies on the shortest path between other nodes. Shows important nodes that would have the greatest impact on the network connectivity if removed.
Parameters
- options optional
object- 'chart' - Divides the scores of all nodes in the graph by a single value.
- 'component' - Divides the scores of each unconnected part of a graph separately and by a different value.
- 'unnormalized' - No normalization is used.
directed
optionalbooleandefault: false.Whether the betweenness computation should consider the direction of links.
normalization
optional"unnormalized" | "chart" | "component"default: 'component'Defines how the results should be normalized. Normalization divides the results to ensure that values are between 0 and 1. This avoids extremes and creates a more proportional range e.g. for styling.
value
optionalstringThe key of the custom data value on the node's data property that defines each link's length.
weights
optionalbooleandefault: falseIf true, the path length of any link is the reciprocal of the value ( 1 / value ).
Returns Record<string, number>
A dictionary of items where the keys are the node ids and the values are their betweenness values.
Calculates the separate 'connected components' of the graph.
Returns object[]
An array of objects in the format:
[
{ nodeIds: [...], linkIds: [...] },
{ nodeIds: [...], linkIds: [...] },
...
]Measures the number of direct, 'one hop' connections each node has to other nodes within the network. Shows very connected nodes which can quickly connect with the wider network.
Parameters
- options optional
object- 'from': counts only links with arrows pointing away from nodes (out-degree).
- 'to': counts only links with arrows pointing to nodes (in-degree).
- 'any': counts all links regardless of whether they have arrows.
direction
optional"from" | "to" | "any"default: 'any'How to treat the direction of links:
Note that to use 'from' or 'to', your graph must have arrows on links.
Returns Record<string, number>
A dictionary of items where the keys are the node ids and the values are their degrees values.
Finds the nodes that are linked to the node or nodes passed in.
Parameters
Returns object
An object in the format:
{ nodeIds: [...], linkIds: [...] }NetworkItemNetworkNode | NetworkLinkA node or link that can appear in a NetworkLayer.
Specifies the style of a NetworkLink.label.
backgroundColor
optionalstringdefault: '#808080'The color of the label background.
border
optionalobjectThe label border.
color
optionalstringdefault: '#404040'The border color.
radius
optionalnumber | [number, number, number, number]default: 20The outer radius for label border corners. Specified in pixels as a single number or an array of four numbers. If an array is used, the corners are defined in the order of top left, top right, bottom right and bottom left.
width
optionalnumberdefault: 0The border width in pixels.
color
optionalstringdefault: 'white'The color of the label text.
fontFamily
optionalstringdefault: 'sans-serif'The font family to use for the label text. Note this cannot be changed with overrideStyle.
fontSize
optionalnumberdefault: 10The font size to use for the label text.
text
optionalstringThe text to display on the label.
visible
optionalbooleandefault: trueWhether the label is visible. Update with overrideStyle to conditionally reveal the label.
NetworkItemStyleNetworkNodeStyle & NetworkLinkStyleSpecifies the style of a NetworkItem.
NetworkLayerDataRecord<string, NetworkItem>A dictionary of items to be displayed in a NetworkLayer, where the keys are item ids and the values are NetworkItem objects.
Options related to the network layer.
adaptiveOpacity
optionalobjectOptions related to adaptive opacity, which changes the opacity of nodes and links to highlight the most important items. Nodes are assigned an opacity based on their internally calculated betweenness score which can be adjusted for zoom level. Links match the highest opacity of their associated nodes.
enabled
optionalbooleandefault: falseWhether adaptive opacity is enabled.
fullOpacityZoom
optionalnumberdefault: 10The zoom level at which the item opacity level will be at 100% and all items will be fully visible. Must be in the range 0 to 22 where 0 is fully zoomed out and 22 is fully zoomed in.
minimumOpacity
optionalnumberdefault: 0.004The minimum opacity applied when adaptive opacity is enabled. Must be in the range 0 to 1 where 0 is transparent and 1 is fully visible.
nodeCountThreshold
optionalnumberdefault: 10The number of visible nodes over which opacity fades to minimumOpacity.
foreground
optionalobjectOptions related to foregrounding and backgrounding of nodes and links, which emphasizes foregrounded items by fading the rest into the background.
backgroundOpacity
optionalnumberdefault: 0.2The opacity level to apply to backgrounded items.
ids
optionalstring[]default: []The id(s) of item(s) to be foregrounded. If specified, the items not included in the array are backgrounded. If empty, all items are foregrounded.
labels
optionalobjectOptions related to node and link labels.
collision
optionalobjectOptions related to label collision, which hides labels that overlap with other labels.
enabled
optionalbooleandefault: trueWhether hiding labels on collision is enabled.
priorityProp
optionalstringminLabelSize
optionalnumberdefault: 0Minimum height of a label required to draw it, in pixels.
minLinkLength
optionalnumberdefault: 80Minimum length of a link required to draw its label, in pixels.
screenFacing
optionalbooleandefault: falseIf view has a pitch or bearing set manually or if viewRotation is enabled, defines how the labels are oriented in relation to the user's screen. If true, the labels face the user's screen. If false, the labels lie flat on the surface of the map.
links
optionalobjectOptions related to links.
bundling
optionalobjectOptions related to link bundling, which adjusts the paths of links by grouping the neighboring links together into bundles. Link labels are hidden and routes are disabled when bundling is enabled.
colorGradient
optionalWhen bundling is enabled, applies a color gradient to bundled links based on the relative density of the bundle. The colorGradient takes precedence over individual link colors.
geodesic
optionalbooleandefault: falseIf true, links are drawn as arcs along great circle paths to represent the shortest distance in 3D space.
showRoutes
optionalbooleandefault: falseWhether to show links as routes using any provided route geometry.
nodes
optionalobjectOptions related to nodes.
adaptiveScaling
optionalobjectOptions related to adaptive scaling of nodes, which sizes nodes based on their internally calculated betweenness scores.
enabled
optionalbooleandefault: falseWhether adaptive scaling is enabled.
fixedMinScale
optionalnumberdefault: 1Minimum scale for a unique (i.e. all pairwise similarities = 0) fixed (geolocated) node.
floatingMinScale
optionalnumberdefault: 0.3Minimum scale for a unique (i.e. all pairwise similarities = 0) free (non-geolocated) node.
minImageSize
optionalnumberdefault: 7Minimum size for a node image to be displayed, in pixels.
zoomScaling
optionalobjectOptions related to scaling of nodes based on the current zoom level.
proximityCombine
optionalobjectOptions related to combining nodes and links based on their proximity to each other at a given zoom level.
enabled
optionalbooleandefault: falseWhether combining of fixed (geo-located) nodes and their links is enabled.
A function called by the NetworkLayer when a combo link is created. Use it to style the combo link.
Parameters
An object containing the information about the created combo link and a
setStylestyling function.
Returns void
A function called by the NetworkLayer when a combo node is created. Use it to style the combo node.
Parameters
An object containing the information about the created combo node and a
setStylestyling function.
Returns void
radius
optionalnumberdefault: 16The distance threshold that determines which nodes are grouped together, in pixels.
timeFilterRange
optionalTimeRangedefault: nullThe time filter range. If non-null, items will be hidden if all their timestamps are outside the range.
An instance method to return the bounds of the items in the layer with the specified ids, or all items if no ids are specified. Returns null if there are no items to compute bounds for.
Parameters
- ids optional
string[]
Returns LngLatBounds
An object defining the bounds of the specified items.
An instance method to return pinned node ids and their geographic positions.
Returns NodePositions
An object containing all the pinned node ids and their geographic positions.
An instance method to return tracker node ids, their geographic positions and whether they coincide with any trajectories.
Returns TrackerNodePositions
An object containing all the tracker node ids, their geographic positions and whether they coincide with any trajectories.
Adds a temporary animated halo effect to nodes.
Parameters
Returns void
void
Defines the style properties to override for the specified nodes and links.
string | string[]The id or ids of the NetworkLink and NetworkNode items.
The style properties to apply to the specified nodes and links.
Defines a link connecting two nodes in the NetworkLayer.
arcHeight
optionalnumberdefault: 0A multiplier of link height. The default value of 0 creates flat links. If set to a higher value, the link is shown as a 3D arc raised above the map surface. The height multiplier is based on the distance between the two ends.
children
optionalstring[]If used with a combo link, lists the child links contained within this combo link. This property is only used when accessing combo links created via proximityCombine.
color
optionalstringdefault: '#808080'The line color of the link.
data
optionalanyUsed to store custom data for the link.
end1
optionalobjectProperties for the id1 end of the link.
arrow
optionalbooleanWhether to show an arrow at the end.
end2
optionalobjectProperties for the id2 end of the link.
arrow
optionalbooleanWhether to show an arrow at the end.
flow
optionalobjectstringThe identity of the node at one end of the link.
stringThe identity of the node at the other end of the link.
label
optionalProperties for the link's label.
route
optionalA polyline defining the geographic route of the link. Enable the display of routes using showRoutes.
The time entry or entries associated with the link.
"link"The type of the item.
width
optionalnumberdefault: 2The line width of the link in pixels.
Specifies the properties of a NetworkLink that can be overridden with overrideStyles.
color
optionalstringdefault: '#808080'The line color of the link.
end1
optionalobjectProperties for the id1 end of the link.
arrow
optionalbooleanWhether to show an arrow at the end.
end2
optionalobjectProperties for the id2 end of the link.
arrow
optionalbooleanWhether to show an arrow at the end.
flow
optionalobjectOptions for the flow animation along the link. The flow moves from id1 to id2.
label
optionalProperties for the link's label.
width
optionalnumberdefault: 2The line width of the link in pixels.
Defines a node in the NetworkLayer that can be connected to other nodes using links.
altitude
optionalnumberdefault: 0The altitude of the node in meters above sea level.
border
optionalobjectThe node border.
children
optionalstring[]If used with a combo node, lists the child nodes contained within this combo node. This property is only used when accessing combo nodes created via proximityCombine.
color
optionalstringdefault: '#808080'The fill color of the node.
data
optionalanyUsed to store custom data for the node.
halos
optionalConcentric circles drawn around the node. Add one or more.
// add a single halo as an object
halos:
{color: 'rgb(127, 255, 127)', width: 10, radius: 15},
// add multiple halos as an array of objects
halos: [
{color: 'rgb(127, 255, 127)', width: 10, radius: 15},
{color: 'rgba(127, 255, 127, 0.5)', width: 10, radius: 25},
],image
optionalobjectThe image on the node.
color
optionalstringThe color of the non-transparent areas of the image. If not specified, the image is shown in its original color.
offsetX
optionalnumberdefault: 0The horizontal offset for the image in pixels.
offsetY
optionalnumberdefault: 0The vertical offset for the image in pixels.
scale
optionalnumberdefault: 1The scale factor for the image.
url
optionalstringThe URL of the node image. Unavailable images are shown as a blue X. If requesting images directly from external domains, consider restrictions on Cross-Origin Resource Sharing.
label
optionalThe label or labels on the node - can use empty objects as array placeholders
latitude
optionalnumberThe latitude of a fixed (geolocated) node in degrees. Should be in the range -90 to 90.
longitude
optionalnumberThe longitude of a fixed (geolocated) node in degrees. Should be in the range -180 to 180.
scale
optionalnumberdefault: 1Scales the node size by an enlargement factor.
size
optionalnumberdefault: 6The radius of the node in pixels.
The time entry or entries associated with the node.
"node"The type of the item.
Defines the style of NetworkNode.halos.
Specifies the style of a NetworkNode.label.
backgroundColor
optionalstringdefault: '#808080'The color of the label background.
border
optionalobjectThe label border.
color
optionalstringdefault: '#404040'The border color.
radius
optionalnumber | [number, number, number, number]default: 20The outer radius for label border corners. Specified in pixels as a single number or an array of four numbers. If an array is used, the corners are defined in the order of top left, top right, bottom right and bottom left.
width
optionalnumberdefault: 0The border width in pixels.
color
optionalstringdefault: 'white'The color of the label text.
fontFamily
optionalstringdefault: 'sans-serif'The font family to use for the label text. Note this cannot be changed with overrideStyle.
fontSize
optionalnumberdefault: 10The font size to use for the label text.
position
optionalnumber | CompassPoint | "center"default: 180The label position:
- number - an integer number of degrees clockwise from the top
- CompassPoint - e.g. 'n', 'ne' or 'se'
- "center" - positions the label at the center of the node
radius
optionalnumberThe distance between the node and the label. Measured from the node center to the closest point of the label to the node center. If not specified, the label is placed at the edge of the node. Ignored if position is "center".
text
optionalstringThe text to display on the label.
visible
optionalbooleandefault: trueWhether the label is visible. Update with overrideStyle to conditionally reveal the label.
Specifies the properties of a NetworkNode that can be overridden with overrideStyles.
border
optionalobjectThe node border.
color
optionalstringdefault: '#808080'The fill color of the node.
halos
optionalConcentric circles drawn around the node. Add one or more.
// add a single halo as an object
halos:
{color: 'rgb(127, 255, 127)', width: 10, radius: 15},
// add multiple halos as an array of objects
halos: [
{color: 'rgb(127, 255, 127)', width: 10, radius: 15},
{color: 'rgba(127, 255, 127, 0.5)', width: 10, radius: 25},
],image
optionalobjectThe image on the node.
color
optionalstringThe color of the non-transparent areas of the image. If not specified, the image is shown in its original color.
offsetX
optionalnumberdefault: 0The horizontal offset for the image in pixels.
offsetY
optionalnumberdefault: 0The vertical offset for the image in pixels.
scale
optionalnumberdefault: 1The scale factor for the image.
url
optionalstringThe URL of the node image. Unavailable images are shown as a blue X. If requesting images directly from external domains, consider restrictions on Cross-Origin Resource Sharing.
label
optionalThe label or labels on the node - can use empty objects as array placeholders
scale
optionalnumberdefault: 1Scales the node size by an enlargement factor.
size
optionalnumberdefault: 6The radius of the node in pixels.
NetworkRouteLngLatObject[] | LngLatArray[]Defines the route of a link connecting two nodes.
NodePositionsRecord<string, LngLatAlt>A dictionary of nodes, where the keys are node ids and the values are LngLatAlt objects.
Defines the style of a ping animation.
color
optionalstringdefault: '#ff6d66'The color of the ping circle.
haloRadius
optionalnumberdefault: 30The radius of the ping halo at the end of the animation in pixels.
haloWidth
optionalnumberdefault: 8The width of the ping halo at the end of the animation in pixels.
repeat
optionalnumberdefault: 10The number of times the ping animation repeats.
time
optionalnumberdefault: 800The duration of the ping animation in milliseconds.
Defines the geographic position of a tracker node and whether it coincides with any trajectories.
numberAltitude of a geographic position in meters.
booleanWhether a tracker node has a geographic position that coincides with any trajectories. If true, the tracker node is visible.
numberLatitude of a geographic position in degrees [-90°, 90°].
numberLongitude of a geographic position in degrees [-180°, 180°].
TrackerNodePositionsRecord<string, TrackerNodePosition>A dictionary of nodes, where the keys are node ids and the values are TrackerNodePosition objects.