Appearance

  2. Examples

Geo clustering ​

geotransformationsgrouping

This example shows how to group nodes in geo mode using the geoClustering tranformation. It regroups nodes on zoom and ungroup them when zooming out.

js
import Ogma from '@linkurious/ogma';

Ogma.libraries['leaflet'] = L;

let ogma = new Ogma({
  container: 'graph-container'
});

ogma.styles.addRule({
  nodeAttributes: {
    outline: { enabled: false },
    outerStroke: { width: 0 },
    innerStroke: { width: 0 }
  },
  nodeDependencies: {
    adjacentNodes: true
  }
});
// add geo clustering
const clustering = ogma.transformations.addGeoClustering({
  enabled: true
});

// generate a grid of nodes in geo
const rows = 20;
const columns = 20;
ogma.geo
  .enable({ zoom: 8 })
  .then(() =>
    ogma.generate.grid({
      columnDistance: 3,
      rowDistance: 3,
      rows,
      columns
    })
  )
  .then(graph => {
    graph.nodes.forEach((node, i) => {
      node.data = {
        latitude: 15.2 + ((i % columns) / columns) * 3.3,
        longitude: 15.3 + (Math.floor(i / rows) / rows) * 3.3,
        group: i % 4
      };
    });
    return ogma.setGraph(graph);
  })
  .then(() => ogma.geo.setView(16.5, 16.5, 5));
html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.3/leaflet.css"
    />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.3/leaflet.js"></script>
    <link type="text/css" rel="stylesheet" href="styles.css" />
  </head>

  <body>
    <div id="graph-container"></div>
    <script src="index.js"></script>
  </body>
</html>
css
html,
body {
  margin: 0;
}

#graph-container {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: absolute;
  margin: 0;
  overflow: hidden;
}