All versions of this documentation
X

PNG with geographical map


Open in a new window.
          <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <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; }
    .attribution { font-size: 0.75em; margin-top: -1em; margin-right: 0.5em; text-align: right; }
  </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',
  settings: {
    geo: {
      tileUrlTemplate: 'https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}.png', // indicates from which server the tiles must be retrieved
      attribution: '<div class="attribution">Map data &copy; <a target="_blank" href="http://osm.org/copyright">OpenStreetMap contributors</a></div>'
    }
  }
});

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>