Geographical mode

geo

This example shows how to use the geo mode, which allows to display nodes on a map. It uses leaflet to display the tiles and the latitude and longitude data of the nodes to display them on the map.

index.tsindex.htmlstyles.css

import Ogma, { RawGraph } from '@linkurious/ogma';

Ogma.libraries['leaflet'] = window.L;

const graph: RawGraph = {
  nodes: [
    {
      id: 'Paris',
      data: { latitude: 48.858838, longitude: 2.343436 },
      attributes: { radius: 10, text: 'Paris', x: 0, y: 0 }
    },
    {
      id: 'London',
      data: { latitude: 51.509615, longitude: -0.134514 },
      attributes: { radius: 10, text: 'London', x: 100, y: 0 }
    },
    {
      // no geo coordinates in this one, it will be ignored
      id: 'Nowhere',
      attributes: { radius: 10, text: 'Nowhere', x: 100, y: 50 }
    }
  ],
  edges: [
    {
      id: 'Eurostar',
      source: 'Paris',
      target: 'London',
      attributes: { width: 5, text: 'Eurostar' }
    },
    {
      id: 'No road',
      source: 'Paris',
      target: 'Nowhere',
      attributes: { width: 5, text: 'No road' }
    }
  ]
};

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

const toggleGeo = () =>
  ogma.geo.toggle({
    duration: 1500,
    disableNodeDragging: false
  });

const modeCheckbox = document.querySelector<HTMLInputElement>('#mode')!;
modeCheckbox.addEventListener('change', function (evt) {
  modeCheckbox.disabled = true;

  toggleGeo().then(() => {
    modeCheckbox.disabled = false;
    modeCheckbox.checked = ogma.geo.enabled();
  });
});

setTimeout(toggleGeo, 200);

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>
    <div class="control-bar" id="controls">
      <label>
        <span>Geo mode</span>
        <input type="checkbox" id="mode" checked />
      </label>
    </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;
}

.control-bar {
  font-family: Helvetica, Arial, sans-serif;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
  border-radius: 4px;
  background: white;
  padding: 5px 10px;
}

#controls {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 9999;
}

#controls label span {
  line-height: 24px;
}

Geographical mode ​

Geographical mode