Skip to main content

Network Layer

The network layer takes a data format of nodes and links, and is used to add interactive graph visualizations to the map. These graphs visually represent connected data and allow you to analyze the patterns, relationships and structures within the data.

Data Format​

An example of a NetworkLayerData object with nodes and links is as follows:

const parkedAtChargingStations = {
  Hamilton_station: {
    type: "node",                 // Fixed node
    latitude: 49.279516,
    longitude: -123.115166,
    label: { text: "775 Hamilton St" },
  },
  Vehicle_1: {
    type: "node",                 // Free node
    label: { text: "Vehicle 1" },
  },
  link1: {
    type: "link",                 // Link will position the free node near the fixed node
    id1: "Vehicle_1",
    id2: "Hamilton_station",
  },
};

Explore the Nodes and Links examples to learn more.

Nodes​

Fixed​

Fixed nodes have geographical coordinates specified in their data, which determines their position on the map. They will stay fixed in their position even during zooming. Fixed nodes cannot be dragged by the user.

Free​

Free nodes can adjust their positions to achieve an optimal graph layout. This can happen during an initial layout, when the data changes, and when the map is zoomed.

By default, when you drag a free node and release it, it will move to its optimal position unless it is pinned.

Pinned​

Pinned nodes are free nodes that have been pinned using the pin() function. When you drag a pinned node and release it, the pin is removed.

To keep the pin in place, call pin() in the handler of the drag-end event.

See the Pinning and Unpinning example to try it out.

Regular​

Regular links represent the shortest distance on a 2D map projection. They can be drawn as direct flat lines, or as a 3D arc raised above the map surface when the optional arcHeight property is set.

Geodesic​

Geodesic links are drawn as arcs following a great circle curve which represents the shortest distance in 3D space. They can be set using the geodesic property.

Layout and Zooming​

The graphs in the network layer are laid out to ensure that all fixed nodes are placed according to their coordinates. The remaining free nodes are positioned relative to the fixed nodes in a way that minimizes link crossings as much as possible.

By default, MapWeave will make subtle adjustments to node sizes based on zoom level, and to the positions of free nodes in order to create the clearest possible view at any zoom level.

In addition to these subtle default changes, you can switch on additional clutter reduction features that simplify large networks significantly.

Reducing Clutter​

MapWeave provides a number of features that reduce clutter and improve readability at any zoom level. All these features can be enabled independently or used in combination.

Proximity Combining​

Setting the proximityCombine option combines fixed nodes or their links together if they are too close to each other at a given zoom level. This improves readability by reducing the number of items in view.

Creating combined nodes and combined links calls the onCombineNodes and onCombineLinks functions. These functions are passed the information about the underlying children, and can also be used to style the combined node or link using the setStyle styling function.

See the Proximity Combining examples to learn more.

Adaptive Styling​

Adaptive styling changes the styling of nodes and links according to their importance in the current view, which is based on the betweenness score. It also takes into account the amount of items visible at the current zoom level.

  • adaptiveScaling - adjusts the node size based on their betweenness score
  • zoomScaling - adjusts the node size based on the current zoom level
  • adaptiveOpacity - changes the opacity of nodes and links to highlight the most important items based on their betweenness score and zoom level

Setting the bundling option to true adjusts the path of links by grouping the neighboring links together into bundles. This helps reduce link crossings, identify clear patterns and highlight the most important flows even from a distance.

Adaptive styling and link bundling work very well in combination. See this in the Adaptive Styling examples.