Geo annotations

GeoAnnotationsLayersOverlays

Draw SVG annotations by hand — with no annotations plugin — that stay meaningful when you switch between geo and node-link mode.

Two annotations sit on top of the graph:

• a box that wraps a cluster of nodes (Brussels, Amsterdam, Cologne);
• a text callout connected to the Paris node by an arrow.

The switch (built with @linkurious/ogma-ui-kit's GUI) toggles geo mode on and off.

The shapes are rendered in a custom SVG layer. The layer's draw function works in graph coordinate space and runs on every viewport update, so the annotations stay glued to the camera automatically. Node coordinates are completely different in each layout, so each shape is recomputed from the live node positions on every draw: the box from the group's bounding box, the callout and arrow from the anchor node. Sizes that should stay constant on screen (stroke widths, font size, the callout, the arrow head) are expressed in pixels and divided by the current zoom, so they don't blow up at geo-mode zoom levels.

In node-link mode the graph uses a force layout that has nothing to do with the geography, so toggling geo mode moves every node dramatically — yet the box and callout keep wrapping and pointing at the right nodes.

Files

• graph.json — the graph data (loaded with Ogma.parse.jsonFromUrl).
• annotations.ts — a rendering-backend-agnostic scene: buildScene turns the live node positions into a flat list of primitive shapes in graph space.
• svg-layer.ts — the SVG rendering backend that paints that scene.
• index.ts — wires the graph, styles, layer and the geo/node-link switch.

Keeping the scene separate from the backend means a Canvas backend could consume the very same buildScene output.