Geo mode with Leaflet

Since version Ogma version 2.8.0 the Geo mode has been rewritten to work together with the leaflet.js mapping library.

This means that old code that used Geo mode needs few simple steps to migrate to the newer version.

The Ogma team worked hard to minimize the effort of this migration, therefore the only requirements for the migrations are the following:

• download or link the leaflet.css stylesheet file into your page/application
• download or link the leaflet.js file into your page/application
• register the leaflet library in Ogma - see below

If you are already using the library in your application for other maps, the only step to follow is this:

import Ogma from '@linkurious/ogma';
import L from 'leaflet';

import 'path/to/leaflet.css';

Ogma.libraries['leaflet'] = L;

const ogma = new Ogma({
  container: 'graph-container',
  graph: {
    nodes: [
      {
        id: 0,
        ...
      }
    ]
  }
});

ogma.geo.enable().then( ... )

In case you are using Ogma on a simple HTML page you can simply include the script for the leaflet assets as follow in the page before the Ogma code:

<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 src="../build/ogma.js">
</script>
<script>
  'use strict';

      const ogma = new Ogma({
          container: 'graph-container',
          graph: {
              nodes: [
              {
                  id: 0,
                  ...
              }
              ]
          }
      });

      ogma.geo.enable().then( ... )
</script>

No API changes occurred in the current version of Ogma, but some methods have been deprecated in the geo namespace. Please refer the the geo API documentation for more informations.

Exporting the map

By default, Ogma includes the routines to export basic layers to PNG. If you have a custom tile layer, you need to make sure it is positioned in the tilePane and exposes an export() method. While exporting, Ogma will call this method and pass you the canvas context to draw on. You can use this to export your custom layer. It's very easy to add this to your custom layer:

export class CustomTileLayer extends L.Layer.extend({
  options: {
    pane: 'tilePane',
  },

  export(ctx: CanvasRenderingContext2D): Promise<void> {
    return new Promise((resolve) => {
      // draw on the canvas context
      ctx.fillStyle = 'red';
      ctx.fillRect(0, 0, 100, 100);
    // resolve the promise when done
      resolve();
    });
  }
});