Skip to content

Home

Network Weathermap NG Logo
# Network Weathermap NG
A modernized, actively maintained network weathermap panel plugin for Grafana 11+.
Maintained by Tamir Suliman — Plugin ID: tamirsuliman-weathermap-panel

📖 Documentation

New here? Start with the step-by-step guide:

  • Getting Started — from an empty panel to a live traffic map in ~10 minutes
  • Nodes (Devices) — labels, icons, status coloring, node tooltips, dashboard links
  • Links — queries & bandwidth, units, direction labels, port labels, parallel links, VIAs
  • Panel Options — background image, value display modes, timeline slider, color scale, tooltips
  • Interactions & Editing — pan/zoom/select on Linux, Windows & macOS; VIA editing; export
  • Use Cases — capacity planning, incident retros, floor plans, multi-hop paths, and more

About This Fork

This plugin is a continuation of the original knightss27/grafana-network-weathermap, which was archived in 2023. What began as a compatibility rescue — keeping a much-loved panel working on modern Grafana — has since grown into an actively maintained project with new capabilities, a full documentation site, a hardened core, and runnable demos. This page is a short tour of where the fork stands today.

What's new since the fork

The panel does considerably more than the archived original, and every capability below is driven entirely by the metrics you already query — no extra agents, no packet capture.

  • Live traffic animation — links animate moving dots whose speed and density track real utilization, with a down-link ✕ badge. See the Traffic Animation guide.
  • BGP neighbor status maps — turn session state into a live map, with fleet and detail dashboards and an SNMP/gNMI collection kit. See the BGP guide.
  • Timeline / incident replay — scrub back through history and watch link utilization and node status replay step by step.
  • View-mode zoom & pan — an opt-in setting that lets dashboard viewers zoom and pan without opening the editor.
  • Faceplate & rack generators — one-click Generate Port Grid (switch faceplates, patch panels, PDU strips, blade chassis) and Generate Rack Elevation (devices laid out by rack unit) build whole port boards as editable nodes in a single step.
  • Richer nodes & labels — larger node sizing, scalable font color with an optional background box, and per-side port-label positioning to keep labels clear of icons and parallel links.
  • 1064 bundled icons across 12 sets — networking, cloud, vendors, platforms, databases, country flags and more, all served by the plugin itself (air-gap friendly). Browse the Icon Reference.
  • Runnable demos — a Docker demo stack provisions every scenario (WAN utilization, incident replay, rack boards, the world-map backbone) against Prometheus, InfluxDB, Elasticsearch, and Zabbix. Explore them in the Use Cases guide.
  • Dashboard backup/restore utility — a dependency-free tool to snapshot your existing Grafana dashboards, queries, and data sources before installing or upgrading.

Documentation

The fork ships this full documentation site — a step-by-step Getting Started tutorial, deep-dive guides for Nodes, Links, Panel Options, and Interactions & Editing, feature guides for Traffic Animation and BGP Neighbor Status, a Data Sources reference with per-source notes, a gallery of Use Cases, the Icon Reference, and an FAQ.

Reliability & fixes

Reliability is treated as a feature. The panel is tested against hostile input — malformed saved options, links pointing at deleted nodes, empty data frames — so it renders instead of crashing, and the editor state is deep-frozen in tests so accidental mutation fails CI. Playwright end-to-end suites run on real Grafana from the declared minimum through the latest release. Along the way the fork has fixed data-source binding across Prometheus, InfluxDB, Elasticsearch, and Zabbix (wide-frame value binding, Zabbix alignment and trends), corrected link gradient rendering to the arrow tips, and stays on top of dependency security advisories.

Under the hood

The original was rebuilt for modern Grafana. What changed from the archived plugin:

Area Change
Plugin ID tamirsuliman-weathermap-panel (was knightss27-weathermap-panel)
Grafana SDK @grafana/data / runtime / ui updated and verified from Grafana 11 → 13 (requires 11.0.0+)
React Upgraded 17 → 18 (React 19 findDOMNode crash fixed)
TypeScript On 5.4+ — all @ts-ignore overrides removed
Styling Deprecated stylesFactory → useStyles2 + @emotion/css
Deprecated APIs Vector.get() replaced with direct array indexing
Datasource compat Value extraction finds the first numeric field instead of hardcoding fields[1]; wide-frame binding across Prometheus / InfluxDB / Elasticsearch / Zabbix
Security URL sanitization for dashboard links, icons, and background images; window.open() uses noopener,noreferrer; locationService replaces window.location
Testing Playwright E2E (@grafana/plugin-e2e) on real Grafana, declared minimum through latest
CI / CD Node.js 24, signed + attested releases, Grafana API-compatibility matrix, packaging checks, GitHub Pages docs deploy

Contributions and bug reports are welcome at github.com/allamiro/grafana-network-weathermap-ng.

Installation

Installing on a local Grafana

Requires Grafana 11.0.0 or later.

Option A — Grafana Marketplace (once approved)

grafana-cli plugins install tamirsuliman-weathermap-panel

The plugin will be installed into your Grafana plugins directory (default /var/lib/grafana/plugins). More on the CLI tool.

Option B — Manual install from GitHub release

  1. Download the latest ZIP from the Releases page
  2. Extract it into your Grafana plugins directory:
unzip tamirsuliman-weathermap-panel-*.zip -d /var/lib/grafana/plugins/
  1. Restart Grafana and enable the plugin under Administration → Plugins.

2: Add the Panel to a Dashboard

Installed panels are available immediately in the Dashboards section in your Grafana main menu, and can be added like any other core panel in Grafana.

To see a list of installed panels, click the Plugins item in the main menu. Both core panels and installed panels will appear.

Testing

For testing with Docker, follow the instructions on the testing README. This will provide you with an instance to play around with.

Creating a New Weathermap

  1. In Grafana, create a new Empty Panel.
  2. Change the visualisation in the top right corner to Network Weathermap.
  3. You now have a brand new network weathermap panel! 🎉
  4. Learn about weathermap basics below!

On Startup

By default, the panel will start completely blank, looking something like this:

Blank Panel

Adding Nodes

  • Make sure you have selected Edit on the panel in Grafana.

  • On the right hand side, find the Nodes editor.

    Nodes 0

  • Click Add Node to create a new node.

  • Nodes have three basic fields:
    • X position (number): Node's X position.
    • Y position (number): Node's Y position.
    • Label (string): The text visible on the node.
  • You can then move the node by dragging it with your mouse.
  • Ensure you have at least two nodes.

  • On the right hand side, find the Links editor.

    Nodes 1

  • Click Add Link to create a new link.

  • Links are split into two sides, A and B.
  • Each side has four central fields:
    • Side (Node): The node this side of the link connects to.
    • Query (Query): A query representing the current side's throughput in the specified units.
    • Bandwidth # (number): A number representing the bandwidth of this side in specified units.
    • Bandwidth Query (Query): A query representing the bandwidth of this side in the specified units.
    • Units (unit): The units the link expects to recieve its data as. This is used for both the main query and bandwidth. Defaults to bits/sec (SI) (bps).
  • Select A and B side nodes from their respective dropdowns.

Adding Data

  • The weathermap expects a data frame with two fields, a time and a number.
  • You probably want this number in bits/sec, unless your links are expecting something else (each link has customizable units, and default units are customizable in the global settings for the panel).
  • The weathermap will always choose the most recent data point available. If you want your links graphs to have data, make sure your queries are ranges and not "Instant" queries, as this will mean there is no data to show on each graph.
  • Once you have added a query in the panel editor, you can can see all queries and select one from the dropdown in the Query fields of the links.
  • See the FAQ or Github issues if you are having issues adding data (especially Zabbix datasource users).

PLEASE NOTE: Queries with the exact same labels will be considered as such. If you have multiple queries and are unable to select the one that you want, double check to make sure it is labeled uniquely.

Setting Thresholds

  • The weathermap color scale allows you to color links based on their bandwidth usage.
  • On the right hand side, find the Color Scale editor. Nodes 2
  • Click Add Scale Value to create a new threshold.
  • Each threshold has two basic fields:
    • % (number): The percent of bandwidth usage at which to start this threshold.
    • Color (picker): The color of this threshold, can be any valid CSS color chosen or input with the picker.
      • green | #00FF00 | rgb(0, 255, 0)
  • By default, the scale will fill from the highest threshold to 100%. You can see the scale in the top left of the panel. When updating numerical values, click off of the input when you're finished to allow the scale to update.

Interacting with the Weathermap

  • In editing mode:
    • Click + Drag nodes to move them.
    • Shift + Drag or hold and drag Middle Mouse to move the map.
    • Scroll to zoom.
    • Ctrl + Click to select/deselect multiple nodes before dragging.
    • Double Click to deselect all nodes.
  • Outside of editing mode (including read-only users):
    • Shift + Scroll to zoom.
    • Shift + Drag to move the map.
  • Hover over links to see tooltip information.
    • Hold Shift while hovering to free up the mouse.
    • Hover over the same link or another to unfreeze the tooltip.