All versions of this documentation
X

US Airlines


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>
    html,
    body {
      margin: 0;
    }

    #graph-container {
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      position: absolute;
      margin: 0;
      overflow: hidden;
    }
  </style>
</head>

<body>
  <div id="graph-container"></div>

  <script>
    'use strict';

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

    ogma.parse.gexfFromUrl('files/airlines.gexf')
      .then(function (g) { return ogma.setGraph(g); })
      .then(function () { return ogma.getEdges().setAttributes({ width: 0.25 }); })
      .then(function () {
        ogma.geo.enable({
          // detectRetina: true,
          latitudePath: 'latitude',
          longitudePath: 'longitude',
          // indicates from which server the tiles must be retrieved
          tileUrlTemplate: 'https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}.png',
          transitionDuration: 0,
          sizeRatio: 1.5,
          attribution: 'Map data &copy; <a target="_blank" href="http://osm.org/copyright">OpenStreetMap contributors</a>'
        });
      });
  </script>
</body>

</html>