All versions of this documentation
X

Vector tiles

This example shows the integration with mapbox vector tiles format and mapbox-gl-js. This is achieved by using the adapter plugin. Note how the layer was added as a basemap.

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

<head>
  <meta charset="utf-8">
  <!-- Leaflet -->
  <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>

  <!-- Mapbox GL -->
  <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.2.0/mapbox-gl.css" rel='stylesheet' />
  <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.2.0/mapbox-gl.js"></script>

  <!-- Leaflet mapbox gl adapter -->
  <script src="https://unpkg.com/mapbox-gl-leaflet@0.0.10/leaflet-mapbox-gl.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;
    }

    .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;
      z-index: 9999;
    }

    #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';

    Ogma.libraries['leaflet'] = L;

    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 ogma = new Ogma({
      graph: graph,
      container: 'graph-container'
    });

    function toggleGeo() {
      // create mapbox GL layer using the adapter
      var mapboxGlLayer = L.mapboxGL({
        attribution: '&copy; Mapbox &copy; OpenStreetMap Contributors',
        accessToken: 'no-token', // or your Mapbox API token
        style: 'https://api.maptiler.com/maps/streets/style.json?key=gbetYLSD5vR8MdtZ88AQ',
        // enable this option if you want to use export
        // https://docs.mapbox.com/mapbox-gl-js/api/#map
        // preserveDrawingBuffer: true
      });
      return ogma.geo.toggle({
        // add it as the base layer
        tiles: mapboxGlLayer,
        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>