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
optional string A 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
optional RefObject<NetworkLayerRefProps> Ref prop for use with React's useRef or createRef. This allows access to the imperative part of the layer's API.
visible
optional boolean Whether 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.
string The unique identifier.
string The identity of the node at one end of the combo link.
string The 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.
string The 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
optional boolean
default: 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
optional string The key of the custom data value on the node's data property that defines each link's length.
weights
optional boolean
default: false If 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: [...] } NetworkItem NetworkNode | NetworkLink A node or link that can appear in a NetworkLayer.
Specifies the style of a NetworkLink.label.
backgroundColor
optional string
default: '#808080' The color of the label background.
border
optional object The label border.
color
optional string
default: '#404040' The border color.
radius
optional number | [number, number, number, number]
default: 20 The 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
optional number
default: 0 The border width in pixels.
color
optional string
default: 'white' The color of the label text.
fontFamily
optional string
default: 'sans-serif' The font family to use for the label text. Note this cannot be changed with overrideStyle.
fontSize
optional number
default: 10 The font size to use for the label text.
text
optional string The text to display on the label.
visible
optional boolean
default: true Whether the label is visible. Update with overrideStyle to conditionally reveal the label.
NetworkItemStyle NetworkNodeStyle & NetworkLinkStyle Specifies the style of a NetworkItem.
NetworkLayerData Record<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
optional object Options 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
optional boolean
default: false Whether adaptive opacity is enabled.
fullOpacityZoom
optional number
default: 10 The 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
optional number
default: 0.004 The 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
optional number
default: 10 The number of visible nodes over which opacity fades to minimumOpacity.
foreground
optional object Options related to foregrounding and backgrounding of nodes and links, which emphasizes foregrounded items by fading the rest into the background.
backgroundOpacity
optional number
default: 0.2 The opacity level to apply to backgrounded items.
ids
optional string[]
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
optional object Options related to node and link labels.
collision
optional object Options related to label collision, which hides labels that overlap with other labels.
enabled
optional boolean
default: true Whether hiding labels on collision is enabled.
priorityProp
optional string minLabelSize
optional number
default: 0 Minimum height of a label required to draw it, in pixels.
minLinkLength
optional number
default: 80 Minimum length of a link required to draw its label, in pixels.
screenFacing
optional boolean
default: false If 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
optional object Options related to links.
bundling
optional object Options 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
optional boolean
default: false If true, links are drawn as arcs along great circle paths to represent the shortest distance in 3D space.
showRoutes
optional boolean
default: false Whether to show links as routes using any provided route geometry.
nodes
optional object Options related to nodes.
adaptiveScaling
optional object Options related to adaptive scaling of nodes, which sizes nodes based on their internally calculated betweenness scores.
enabled
optional boolean
default: false Whether adaptive scaling is enabled.
fixedMinScale
optional number
default: 1 Minimum scale for a unique (i.e. all pairwise similarities = 0) fixed (geolocated) node.
floatingMinScale
optional number
default: 0.3 Minimum scale for a unique (i.e. all pairwise similarities = 0) free (non-geolocated) node.
minImageSize
optional number
default: 7 Minimum size for a node image to be displayed, in pixels.
zoomScaling
optional object Options related to scaling of nodes based on the current zoom level.
proximityCombine
optional object Options related to combining nodes and links based on their proximity to each other at a given zoom level.
enabled
optional boolean
default: false Whether 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
optional number
default: 16 The distance threshold that determines which nodes are grouped together, in pixels.
timeFilterRange
optional TimeRange
default: null The 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
optional number
default: 0 A 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
optional string[] 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
optional string
default: '#808080' The line color of the link.
data
optional any Used to store custom data for the link.
end1
optional object Properties for the id1 end of the link.
arrow
optional boolean Whether to show an arrow at the end.
end2
optional object Properties for the id2 end of the link.
arrow
optional boolean Whether to show an arrow at the end.
flow
optional object string The identity of the node at one end of the link.
string The 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
optional number
default: 2 The line width of the link in pixels.
Specifies the properties of a NetworkLink that can be overridden with overrideStyles.
color
optional string
default: '#808080' The line color of the link.
end1
optional object Properties for the id1 end of the link.
arrow
optional boolean Whether to show an arrow at the end.
end2
optional object Properties for the id2 end of the link.
arrow
optional boolean Whether to show an arrow at the end.
flow
optional object Options for the flow animation along the link. The flow moves from id1 to id2.
label
optionalProperties for the link's label.
width
optional number
default: 2 The line width of the link in pixels.
Defines a node in the NetworkLayer that can be connected to other nodes using links.
altitude
optional number
default: 0 The altitude of the node in meters above sea level.
border
optional object The node border.
children
optional string[] 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
optional string
default: '#808080' The fill color of the node.
data
optional any Used 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
optional object The image on the node.
color
optional string The color of the non-transparent areas of the image. If not specified, the image is shown in its original color.
offsetX
optional number
default: 0 The horizontal offset for the image in pixels.
offsetY
optional number
default: 0 The vertical offset for the image in pixels.
scale
optional number
default: 1 The scale factor for the image.
url
optional string The 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
optional number The latitude of a fixed (geolocated) node in degrees. Should be in the range -90 to 90.
longitude
optional number The longitude of a fixed (geolocated) node in degrees. Should be in the range -180 to 180.
scale
optional number
default: 1 Scales the node size by an enlargement factor.
size
optional number
default: 6 The 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
optional string
default: '#808080' The color of the label background.
border
optional object The label border.
color
optional string
default: '#404040' The border color.
radius
optional number | [number, number, number, number]
default: 20 The 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
optional number
default: 0 The border width in pixels.
color
optional string
default: 'white' The color of the label text.
fontFamily
optional string
default: 'sans-serif' The font family to use for the label text. Note this cannot be changed with overrideStyle.
fontSize
optional number
default: 10 The font size to use for the label text.
position
optional number | CompassPoint | "center"
default: 180 The 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
optional number The 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
optional string The text to display on the label.
visible
optional boolean
default: true Whether 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
optional object The node border.
color
optional string
default: '#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
optional object The image on the node.
color
optional string The color of the non-transparent areas of the image. If not specified, the image is shown in its original color.
offsetX
optional number
default: 0 The horizontal offset for the image in pixels.
offsetY
optional number
default: 0 The vertical offset for the image in pixels.
scale
optional number
default: 1 The scale factor for the image.
url
optional string The 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
optional number
default: 1 Scales the node size by an enlargement factor.
size
optional number
default: 6 The radius of the node in pixels.
NetworkRoute LngLatObject[] | LngLatArray[] Defines the route of a link connecting two nodes.
NodePositions Record<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
optional string
default: '#ff6d66' The color of the ping circle.
haloRadius
optional number
default: 30 The radius of the ping halo at the end of the animation in pixels.
haloWidth
optional number
default: 8 The width of the ping halo at the end of the animation in pixels.
repeat
optional number
default: 10 The number of times the ping animation repeats.
time
optional number
default: 800 The duration of the ping animation in milliseconds.
Defines the geographic position of a tracker node and whether it coincides with any trajectories.
number Altitude of a geographic position in meters.
boolean Whether a tracker node has a geographic position that coincides with any trajectories. If true, the tracker node is visible.
number Latitude of a geographic position in degrees [-90°, 90°].
number Longitude of a geographic position in degrees [-180°, 180°].
TrackerNodePositions Record<string, TrackerNodePosition> A dictionary of nodes, where the keys are node ids and the values are TrackerNodePosition objects.