Skip to content
  1. Tutorials

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:

js
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:

html
<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.