PNG export with geographical map

This example uses the PNG export API to export the visualisation as a PNG. Geo mode tiles are exported as well.

index.tsindex.htmlstyles.css

import Ogma from '@linkurious/ogma';

const graph = {
  nodes: [
    {
      id: 'Paris',
      data: { latitude: 48.858838, longitude: 2.343436 },
      attributes: { x: 0, y: 0, text: 'Paris', radius: 10 }
    },
    {
      id: 'London',
      data: { latitude: 51.509615, longitude: -0.134514 },
      attributes: { x: 100, y: 0, text: 'London', radius: 10 }
    }
  ],
  edges: [
    {
      id: 'Eurostar',
      source: 'Paris',
      target: 'London',
      attributes: { width: 5, text: 'Eurostar' }
    }
  ]
};

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

await ogma.geo.enable();
const dataURL = await ogma.export.png({
  download: false,
  clip: true,
  textWatermark: {
    content: 'image',
    repeat: true,
    angle: 45
  }
});
// Preview image
if (dataURL) {
  const img = document.createElement('img');
  img.src = dataURL;
  document.body.appendChild(img);
}

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>
    <hr />
    &darr;<br />
    <script type="module" src="index.ts"></script>
  </body>
</html>

css

body {
  margin: 0;
  padding: 0;
  font-family: Helvetica, Arial, sans-serif;
}

#graph-container {
  height: 300px;
  position: relative;
}

img {
  height: 300px;
}

body {
  text-align: center;
}

PNG export with geographical map ​

PNG export with geographical map