This demo uses KeyLines with Leaflet to visualise data over ordinary images (in this case SVG and JPG).

The data shows two physical sites connected to a central server via VPN, as well as the wider internet. Each site contains a number of terminals and factory machines which regularly communicate with each other.

An alert is used to highlight traffic from a machine on the internal network heading directly to the outside world, which could indicate some sort of malfunction or malicious operation.

Interaction

Nodes marked with a glyph can be double-clicked to see a representation of either a factory floor or the central server's network infrastructure. This can help to better understand the flow of traffic between machines and their physical location.

Double-click on the background while viewing a site to return to the world view.

CRS Mapping

This demo uses a Leaflet ImageLayer to draw the background images, and Leaflet's SimpleCRS to map latitude/longitude positions to x/y points on this image.

A CRS, or Coordinate Reference System, defines how coordinates are projected onto a map. By providing an alternative CRS, you can use different mapping standards - or even draw something that doesn't look like a map at all.

By default, Leaflet uses Spherical Mercator projection, but it does include other CRSs. This demo uses L.CRS.Simple. Read more about CRS in the relevant version of the Leaflet API Reference.

Image Attribution

World map image from Wikimedia Commons.

Key functions used:

• chart.combo().combine
• chart.combo().uncombine
• chart.map().leafletMap
• chart.map().options
• chart.map().show