Vector tiles

This example shows the integration with mapbox vector tiles format and mapbox-gl-js. This is achieved by using the adapter plugin.

index.tsindex.htmlstyles.css

import Ogma from '@linkurious/ogma';
Ogma.libraries['leaflet'] = L;

const graph = {
  nodes: [
    {
      id: 'A',
      data: { latitude: 48.858838, longitude: 2.343436 },
      attributes: { radius: 10, text: 'A', x: 0, y: 0 }
    },
    {
      id: 'B',
      data: { latitude: 48.838833, longitude: 2.3536 },
      attributes: { radius: 10, text: 'B', x: 100, y: 0 }
    },
    {
      // no geo coordinates in this one, it will be ignored
      id: 'L',
      attributes: { radius: 10, text: 'L', x: 100, y: 50 }
    }
  ],
  edges: [
    {
      id: 'X',
      source: 'A',
      target: 'B',
      attributes: { width: 5 }
    },
    {
      id: 'X',
      source: 'B',
      target: 'L',
      attributes: { width: 5 }
    }
  ]
};

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

const toggleGeo = () => {
  // create mapbox GL layer using the adapter
  const 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', evt => {
  const checkbox = evt.target;
  checkbox.disabled = true;
  toggleGeo().then(() => {
    checkbox.disabled = false;
    checkbox.checked = ogma.geo.enabled();
  });
});
toggleGeo();

html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <!-- Leaflet -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.3/leaflet.css"
    />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.3/leaflet.js"></script>

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

    <!-- Leaflet mapbox gl adapter -->
    <script src="https://cdn.jsdelivr.net/npm/mapbox-gl-leaflet@0.0.14/leaflet-mapbox-gl.min.js"></script>

    <link type="text/css" rel="stylesheet" href="styles.css" />
  </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 src="index.ts" type="module"></script>
  </body>
</html>

css

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;
}

Vector tiles ​

Vector tiles