All versions of this documentation
X

Geographical mode


Open in a new window.
          <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <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; }

    .attribution {
      font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
      font-size: 11px;
      padding: 1px 5px;
      background: rgba(255, 255, 255, 0.7);
    }

    .control-bar {
      font-family: Helvetica, Arial, sans-serif;
      box-shadow: 0 1px 5px rgba(0,0,0,0.65);
      border-radius: 4px;
      background: white;
      padding: 5px 10px;
    }

    #controls {
      position: absolute;
      top: 10px;
      right: 10px;
    }

    #controls label span { line-height: 24px; }


  </style>
</head>
<body>
<div id="graph-container"></div>
<div class="control-bar" id="controls">
  <label>
    <span>Geo mode</span>
    <input type="checkbox" id="mode" checked />
  </label>
</div>

<script>
  'use strict';

  var graph = {
    nodes: [
      {
        id: 'Paris',
        data: { latitude: 48.858838, longitude: 2.343436 },
        attributes: { radius: 10, text: 'Paris', x: 0, y: 0 }
      }, {
        id: 'London',
        data: { latitude: 51.509615, longitude: -0.134514},
        attributes: { radius: 10, text: 'London', x: 100, y: 0 }
      }, { // no geo coordinates in this one, it will be ignored
        id: 'Nowhere',
        attributes: { radius: 10, text: 'Nowhere', x: 100, y: 50 }
      }
    ],
    edges: [
      { id: 'Eurostar', source: 'Paris', target: 'London', attributes: { width: 5, text: 'Eurostar'} },
      { id: 'No road', source: 'Paris', target: 'Nowhere', attributes: { width: 5, text: 'No road'} }
    ]
  };

  var url = window.devicePixelRatio === 2 ? // retina displays
    'https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}@2x.png' :
    'https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}.png';

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

  function toggleGeo() {
    return ogma.geo.toggle({
      tileUrlTemplate: url, // 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>',
      duration: 1000
    });
  }

  document.querySelector('#mode').addEventListener('change', function(evt) {
    var checkbox = evt.target;
    checkbox.disabled = true;
    toggleGeo().then(function () {
      checkbox.disabled  = false;
      checkbox.checked = ogma.geo.enabled();
    });
  });

  toggleGeo();

</script>
</body>
</html>