Appearance
Geo clustering
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;
}