Appearance

  2. Examples

US Airlines ​

geostyles

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;
}