@sigma/layer-leaflet

Sigma.js - Leaflet background layer

This package contains a leaflet background layer for sigma.js.

It displays a map on the graph's background and handle the camera synchronisation.

How to use

First you need to install leaflet in your application. You can check this page to see how to do it. Especially, don't forget to load leaflet.css in your application.

Then, within your application that uses sigma.js, you can use @sigma/layer-leaflet as following:

import bindLeafletLayer from "@sigma/layer-leaflet";

const graph = new Graph();
graph.addNode("nantes", { x: 0, y: 0, lat: 47.2308, lng: 1.5566, size: 10, label: "Nantes" });
graph.addNode("paris", { x: 0, y: 0, lat: 48.8567, lng: 2.351, size: 10, label: "Paris" });
graph.addEdge("nantes", "paris");

const sigma = new Sigma(graph, container);
bindLeafletLayer(sigma);

Please check the related Storybook for more advanced examples.