Other versions of this documentation User manual Administration manual REST API documentation Ogma documentation Documentation home Linkurious website
All versions of this documentation
X

PNG with geographical map


Open in a new window. 
          <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.js"></script>
  <script src="../build/ogma.min.js"></script>
  <style>
    body {
      margin: 0;
      padding: 0;
      font-family: Helvetica, Arial, sans-serif;
    }

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

    img {
      height: 300px;
    }
  </style>
</head>

<body>
  <div id="graph-container"></div>
  <hr />
  Image preview:<br />

  <script>
    'use strict';

    var 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' } }
      ]
    };

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

    ogma.geo.enable()
      .then(function () {
        return ogma.export.png({
          download: false,
          clip: true,
          textWatermark: {
            content: 'image',
            repeat: true,
            angle: 45
          }
        });
      }).then(function (dataURL) {
        // Preview image
        if (dataURL) {
          var img = document.createElement('img');
          img.src = dataURL;
          document.body.appendChild(img);
        }
      });
  </script>
</body>

</html>