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 © <a target="_blank" href="http://osm.org/copyright">OpenStreetMap contributors</a>'
});
});
</script>
</body>
</html>
