Network Layer – MapWeave Docs

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",
  },
};

Nodes

Nodes are points in the network and are connected by links. In the API they are defined as a NetworkNode in NetworkLayerData.

Fixed Nodes

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.

This example shows the locations of bike share stations in Los Angeles, CA (taken from Los Angeles Metro Bike Share Trip Data) as fixed nodes.

Fixed Nodes

Free Nodes

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.

This example shows the bikes available arranged around each bike share station as free nodes, in orange. Try clicking and dragging one of the bikes.

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

Free Nodes

Free nodes are excluded from the bounds calculations in the fitBounds() and getBounds() methods.

Pinned Nodes

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.

Pinned nodes are free nodes that have been pinned using the pin prop. 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.

mapweave.on('drag-end', (e) => {
  if (e.id) {
    networkLayer.pin({ [e.id]: e.position });
  }
});

To keep the pin in place, pass the state of pinned nodes in the pin prop and update it in the onDragEnd event.

function App() {
  const [pinnedNodes, setPinnedNodes] = useState({});
  return (
    <MapWeave
      options={options}
      onDragEnd={({ id, position }) => {
        if (id) {
          setPinnedNodes({ [id]: position });
        }
      }}
    >
      <NetworkLayer data={laFree} pin={pinnedNodes} />
    </MapWeave>
  );
}

Links

Links are the connections between nodes. In the API they are defined as a NetworkLink in NetworkLayerData. Links can be animated using flow.

This example shows the journeys taken from one bike share station to another represented as links.

Regular Links

The flow property has been set in the link data, for example:

link5721: {
    type: 'link',
    color: 'rgba(119, 66, 153, 0.25)',
    id1: '3022',
    id2: '3014',
    flow: { velocity: 75, color: '#774299' },
  },

Regular Links

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 Links

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 in combination with NetworkLayerOptions.

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.

Adaptive Styling

Adaptive styling is a collection of features that work together to change the styling of nodes and links according to their importance in the current view. The importance is calculated from the betweenness score and the amount of items visible at the current zoom level.

Adaptive Scaling makes more important nodes larger.
Zoom Scaling changes the node size in proportion to the zoom level.
Adaptive Opacity increases the opacity for more important nodes and links.
Link bundling 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.