Appearance
US Airlines
This example demonstrates the performances of the geo mode over a huge graph.
ts
import Ogma from '@linkurious/ogma';
const ogma = new Ogma({
container: 'graph-container',
options: {
edgesAlwaysCurvy: true
}
});
ogma.styles.addRule({
edgeAttributes: {
width: e => +e.getSource().getAttribute('radius') / 4,
color: 'source',
shape: { body: 'triangle', head: 'arrow' }
}
});
Ogma.parse
.gexfFromUrl('airlines.gexf')
.then(g => ogma.setGraph(g))
.then(() =>
ogma.geo.enable({
// detectRetina: true,
latitudePath: 'latitude',
longitudePath: 'longitude',
// indicates from which server the tiles must be retrieved
duration: 0,
sizeRatio: 1.5
})
);
// Add halo masking around selected nodes
ogma.styles.setSelectedNodeAttributes({
halo: {
color: 'rgba(255,255,255,0.7)',
width: 100,
hideNonAdjacentEdges: true
}
});
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 type="module" src="index.ts"></script>
</body>
</html>
css
html,
body {
margin: 0;
}
#graph-container {
top: 0;
bottom: 0;
left: 0;
right: 0;
position: absolute;
margin: 0;
overflow: hidden;
}