@sigma/layer-maplibre 3.0.0-beta.10

package/LICENSE.txt

@@ -0,0 +1,12 @@
+Copyright (C) 2013-2024, Alexis Jacomy, Guillaume Plique, Benoît Simard https://www.sigmajs.org
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"),
+to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,27 @@
+# Sigma.js - Maplibre background layer
+
+This package contains a maplibre background layer for [sigma.js](https://sigmajs.org).
+
+It displays a map on the graph's background and handle the camera synchronisation.
+
+## How to use
+
+First you need to install [maplibre](https://maplibre.org/) in your application.
+You can check this [page](https://maplibre.org/maplibre-gl-js/docs/) to see how to do it.
+Especially, don't forget to load `maplibre-gl.css` in your application.
+
+Then, within your application that uses sigma.js, you can use [`@sigma/layer-maplibre`](https://www.npmjs.com/package/@sigma/layer-maplibre) as following:
+
+```typescript
+import bindLeafletLayer from "@sigma/layer-maplibre";
+
+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);
+bindMaplibreLayer(sigma);
+```
+
+Please check the related [Storybook](https://github.com/jacomyal/sigma.js/tree/main/packages/storybook/stories/3-additional-packages/layer-maplibre) for more advanced examples.

package/dist/declarations/src/index.d.ts

@@ -0,0 +1,24 @@
+import Graph from "graphology";
+import { Attributes } from "graphology-types";
+import { Map, MapOptions } from "maplibre-gl";
+import { Sigma } from "sigma";
+import { graphToLatlng, latlngToGraph } from "./utils.js";
+/**
+ * On the graph, we store the 2D projection of the geographical lat/long.
+ *
+ * @param sigma The sigma instance
+ * @param opts.mapOptions Options that will be provided to map constructor.
+ * @param opts.getNodeLatLng Function to retrieve lat/long values from a node's attributs (default is lat & lng)
+ */
+export default function bindMaplibreLayer(sigma: Sigma, opts?: {
+    mapOptions?: Omit<MapOptions, "container" | "center" | "zoom" | "minPitch" | "maxPitch">;
+    getNodeLatLng?: (nodeAttributes: Attributes) => {
+        lat: number;
+        lng: number;
+    };
+}): {
+    clean: () => void;
+    map: Map;
+    updateGraphCoordinates: (graph: Graph) => void;
+};
+export { graphToLatlng, latlngToGraph };

package/dist/declarations/src/utils.d.ts

@@ -0,0 +1,31 @@
+import { Map } from "maplibre-gl";
+import { Sigma } from "sigma";
+export declare const MAX_VALID_LATITUDE = 85.051129;
+/**
+ * Given a geo point returns its graph coords.
+ */
+export declare function latlngToGraph(map: Map, coord: {
+    lat: number;
+    lng: number;
+}): {
+    x: number;
+    y: number;
+};
+/**
+ * Given a graph coords returns its lat/lng coords.
+ */
+export declare function graphToLatlng(map: Map, coords: {
+    x: number;
+    y: number;
+}): {
+    lat: number;
+    lng: number;
+};
+/**
+ * BBOX sync : map to sigma
+ */
+export declare function syncSigmaWithMap(sigma: Sigma, map: Map): void;
+/**
+ * BBOX sync : sigma to map
+ */
+export declare function syncMapWithSigma(sigma: Sigma, map: Map): void;

package/dist/sigma-layer-maplibre.cjs.d.mts

@@ -0,0 +1,3 @@
+export * from "./declarations/src/index.js";
+export { _default as default } from "./sigma-layer-maplibre.cjs.default.js";
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2lnbWEtbGF5ZXItbWFwbGlicmUuY2pzLmQubXRzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi9kZWNsYXJhdGlvbnMvc3JjL2luZGV4LmQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEifQ==

package/dist/sigma-layer-maplibre.cjs.d.ts

@@ -0,0 +1,3 @@
+export * from "./declarations/src/index.js";
+export { default } from "./declarations/src/index.js";
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2lnbWEtbGF5ZXItbWFwbGlicmUuY2pzLmQudHMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuL2RlY2xhcmF0aW9ucy9zcmMvaW5kZXguZC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSJ9

package/dist/sigma-layer-maplibre.cjs.default.d.ts

@@ -0,0 +1 @@
+export { default as _default } from "./declarations/src/index.js"

package/dist/sigma-layer-maplibre.cjs.default.js

@@ -0,0 +1 @@
+exports._default = require("./sigma-layer-maplibre.cjs.js").default;

package/dist/sigma-layer-maplibre.cjs.dev.js

@@ -0,0 +1,285 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var maplibreGl = require('maplibre-gl');
+
+function _toPrimitive(t, r) {
+  if ("object" != typeof t || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r || "default");
+    if ("object" != typeof i) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
+}
+
+function _toPropertyKey(t) {
+  var i = _toPrimitive(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+
+function _defineProperty(e, r, t) {
+  return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+    value: t,
+    enumerable: !0,
+    configurable: !0,
+    writable: !0
+  }) : e[r] = t, e;
+}
+
+function ownKeys(e, r) {
+  var t = Object.keys(e);
+  if (Object.getOwnPropertySymbols) {
+    var o = Object.getOwnPropertySymbols(e);
+    r && (o = o.filter(function (r) {
+      return Object.getOwnPropertyDescriptor(e, r).enumerable;
+    })), t.push.apply(t, o);
+  }
+  return t;
+}
+function _objectSpread2(e) {
+  for (var r = 1; r < arguments.length; r++) {
+    var t = null != arguments[r] ? arguments[r] : {};
+    r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {
+      _defineProperty(e, r, t[r]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
+      Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
+    });
+  }
+  return e;
+}
+
+/**
+ * Given a geo point returns its graph coords.
+ */
+function latlngToGraph(map, coord) {
+  var data = maplibreGl.MercatorCoordinate.fromLngLat(coord);
+  return {
+    x: data.x,
+    // Y are reversed between geo / sigma
+    y: map.getContainer().clientHeight - data.y
+  };
+}
+
+/**
+ * Given a graph coords returns its lat/lng coords.
+ */
+function graphToLatlng(map, coords) {
+  var mcoords = new maplibreGl.MercatorCoordinate(coords.x, map.getContainer().clientHeight - coords.y, 0);
+  var data = mcoords.toLngLat();
+  return {
+    lat: data.lat,
+    lng: data.lng
+  };
+}
+
+/**
+ * BBOX sync : map to sigma
+ */
+function syncSigmaWithMap(sigma, map) {
+  // Compute sigma center
+  var center = sigma.viewportToFramedGraph(sigma.graphToViewport(latlngToGraph(map, map.getCenter())));
+
+  // Compute sigma ratio
+  var mapBound = map.getBounds();
+  var northEast = sigma.graphToViewport(latlngToGraph(map, mapBound.getNorthEast()));
+  var southWest = sigma.graphToViewport(latlngToGraph(map, mapBound.getSouthWest()));
+  var viewportBoundDimension = {
+    width: Math.abs(northEast.x - southWest.x),
+    height: Math.abs(northEast.y - southWest.y)
+  };
+  var viewportDim = sigma.getDimensions();
+  var ratio = Math.min(viewportBoundDimension.width / viewportDim.width, viewportBoundDimension.height / viewportDim.height) * sigma.getCamera().getState().ratio;
+  sigma.getCamera().setState(_objectSpread2(_objectSpread2({}, center), {}, {
+    ratio: ratio
+  }));
+}
+
+/**
+ * BBOX sync : sigma to map
+ */
+function syncMapWithSigma(sigma, map) {
+  var viewportDimensions = sigma.getDimensions();
+
+  // Graph BBox
+  var graphBottomLeft = sigma.viewportToGraph({
+    x: 0,
+    y: viewportDimensions.height
+  }, {
+    padding: 0
+  });
+  var graphTopRight = sigma.viewportToGraph({
+    x: viewportDimensions.width,
+    y: 0
+  }, {
+    padding: 0
+  });
+
+  // Geo BBox
+  var geoSouthWest = graphToLatlng(map, graphBottomLeft);
+  var geoNorthEast = graphToLatlng(map, graphTopRight);
+
+  // Set map BBox
+  var bounds = new maplibreGl.LngLatBounds([geoSouthWest, geoNorthEast]);
+  map.fitBounds(bounds, {
+    duration: 0
+  });
+}
+
+/**
+ * On the graph, we store the 2D projection of the geographical lat/long.
+ *
+ * @param sigma The sigma instance
+ * @param opts.mapOptions Options that will be provided to map constructor.
+ * @param opts.getNodeLatLng Function to retrieve lat/long values from a node's attributs (default is lat & lng)
+ */
+function bindMaplibreLayer(sigma, opts) {
+  // Keeping data for the cleanup
+  var isKilled = false;
+  var prevSigmaSettings = sigma.getSettings();
+
+  // Creating map container
+  var mapLayerName = "layer-maplibre";
+  var mapContainer = sigma.createLayer(mapLayerName, "div", {
+    style: {
+      position: "absolute",
+      inset: "0"
+    },
+    // 'edges' is the first sigma layer
+    beforeLayer: "edges"
+  });
+  sigma.getContainer().prepend(mapContainer);
+
+  // Initialize the map
+  var map = new maplibreGl.Map(_objectSpread2({
+    container: mapContainer,
+    style: "https://demotiles.maplibre.org/style.json",
+    center: [0, 0],
+    zoom: 1,
+    minPitch: 0,
+    maxPitch: 0
+  }, (opts === null || opts === void 0 ? void 0 : opts.mapOptions) || {}));
+
+  // `stagePadding: 0` is mandatory, so the bbox of the map & Sigma is the same.
+  sigma.setSetting("stagePadding", 0);
+
+  // disable camera rotation
+  sigma.setSetting("enableCameraRotation", false);
+
+  // Function that change the given graph by generating the sigma x,y coords by taking the geo coordinates
+  // and project them in the 2D space of the map
+  function updateGraphCoordinates(graph) {
+    graph.updateEachNodeAttributes(function (_node, attrs) {
+      var coords = latlngToGraph(map, opts !== null && opts !== void 0 && opts.getNodeLatLng ? opts.getNodeLatLng(attrs) : {
+        lat: attrs.lat,
+        lng: attrs.lng
+      });
+      return _objectSpread2(_objectSpread2({}, attrs), {}, {
+        x: coords.x,
+        y: coords.y
+      });
+    });
+  }
+
+  // Function that sync the map with sigma
+  function fnSyncMapWithSigma() {
+    syncMapWithSigma(sigma, map);
+  }
+
+  // Function that sync sigma with map if it's needed
+  function fnSyncSigmaWithMap() {
+    if (!sigma.getCamera().isAnimated() && !map.isMoving()) {
+      // Check that sigma & map are already in sync
+      var southWest = graphToLatlng(map, sigma.viewportToGraph({
+        x: 0,
+        y: sigma.getDimensions().height
+      }));
+      var northEast = graphToLatlng(map, sigma.viewportToGraph({
+        x: sigma.getDimensions().width,
+        y: 0
+      }));
+      var diff = Math.max(map.getBounds().getSouthWest().distanceTo(new maplibreGl.LngLat(southWest.lng, southWest.lat)), map.getBounds().getNorthEast().distanceTo(new maplibreGl.LngLat(northEast.lng, northEast.lat)));
+      if (diff > 1) {
+        syncSigmaWithMap(sigma, map);
+      }
+    }
+  }
+
+  // When sigma is resize, we need to update the graph coordinate (the ref has changed)
+  // and recompute the zoom bounds
+  function fnOnResize() {
+    // Avoid sync map with sigma while we do the resize
+    // otherwise there is a sideeffect...
+    sigma.off("afterRender", fnSyncMapWithSigma);
+    var center = map.getCenter();
+
+    // Ask the map to resize
+    map.once("resize", function () {
+      // NB: resize can change the center of the map, and we want to keep it
+      map.setCenter(center);
+
+      // Map ref has changed, we need to update the graph coordinates
+      updateGraphCoordinates(sigma.getGraph());
+
+      // Do the sync
+      fnSyncSigmaWithMap();
+
+      // Re-enable the map sync with sigma in the next frame
+      setTimeout(function () {
+        fnSyncMapWithSigma();
+        sigma.on("afterRender", fnSyncMapWithSigma);
+      }, 0);
+    });
+    map.resize();
+  }
+
+  // Clean up function to remove everything
+  function clean() {
+    if (!isKilled) {
+      isKilled = true;
+      map.off("moveend", fnSyncSigmaWithMap);
+      map.remove();
+      sigma.killLayer(mapLayerName);
+      sigma.off("afterRender", fnSyncMapWithSigma);
+      sigma.off("resize", fnOnResize);
+
+      // Reset settings
+      sigma.setSetting("stagePadding", prevSigmaSettings.stagePadding);
+      sigma.setSetting("enableCameraRotation", prevSigmaSettings.enableCameraRotation);
+    }
+  }
+
+  // Update the sigma graph for geospatial coords
+  updateGraphCoordinates(sigma.getGraph());
+
+  // When the map is ready
+  map.once("load", function () {
+    // Compute sigma ratio bounds
+    // /!\ must be done after the first map render
+    map.once("moveend", function () {
+      fnSyncSigmaWithMap();
+    });
+    // Do the first sync
+    fnSyncMapWithSigma();
+
+    // At each render of sigma, we do the map sync
+    sigma.on("afterRender", fnSyncMapWithSigma);
+    // Listen on resize
+    sigma.on("resize", fnOnResize);
+    // Do the cleanup
+    sigma.on("kill", clean);
+    // Keep sigma camera on the map
+    map.on("moveend", fnSyncSigmaWithMap);
+  });
+  return {
+    clean: clean,
+    map: map,
+    updateGraphCoordinates: updateGraphCoordinates
+  };
+}
+
+exports["default"] = bindMaplibreLayer;
+exports.graphToLatlng = graphToLatlng;
+exports.latlngToGraph = latlngToGraph;

package/dist/sigma-layer-maplibre.cjs.js

@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === "production") {
+  module.exports = require("./sigma-layer-maplibre.cjs.prod.js");
+} else {
+  module.exports = require("./sigma-layer-maplibre.cjs.dev.js");
+}

package/dist/sigma-layer-maplibre.cjs.mjs

@@ -0,0 +1,5 @@
+export {
+  graphToLatlng,
+  latlngToGraph
+} from "./sigma-layer-maplibre.cjs.js";
+export { _default as default } from "./sigma-layer-maplibre.cjs.default.js";

package/dist/sigma-layer-maplibre.cjs.prod.js

@@ -0,0 +1,285 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var maplibreGl = require('maplibre-gl');
+
+function _toPrimitive(t, r) {
+  if ("object" != typeof t || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r || "default");
+    if ("object" != typeof i) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
+}
+
+function _toPropertyKey(t) {
+  var i = _toPrimitive(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+
+function _defineProperty(e, r, t) {
+  return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+    value: t,
+    enumerable: !0,
+    configurable: !0,
+    writable: !0
+  }) : e[r] = t, e;
+}
+
+function ownKeys(e, r) {
+  var t = Object.keys(e);
+  if (Object.getOwnPropertySymbols) {
+    var o = Object.getOwnPropertySymbols(e);
+    r && (o = o.filter(function (r) {
+      return Object.getOwnPropertyDescriptor(e, r).enumerable;
+    })), t.push.apply(t, o);
+  }
+  return t;
+}
+function _objectSpread2(e) {
+  for (var r = 1; r < arguments.length; r++) {
+    var t = null != arguments[r] ? arguments[r] : {};
+    r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {
+      _defineProperty(e, r, t[r]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
+      Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
+    });
+  }
+  return e;
+}
+
+/**
+ * Given a geo point returns its graph coords.
+ */
+function latlngToGraph(map, coord) {
+  var data = maplibreGl.MercatorCoordinate.fromLngLat(coord);
+  return {
+    x: data.x,
+    // Y are reversed between geo / sigma
+    y: map.getContainer().clientHeight - data.y
+  };
+}
+
+/**
+ * Given a graph coords returns its lat/lng coords.
+ */
+function graphToLatlng(map, coords) {
+  var mcoords = new maplibreGl.MercatorCoordinate(coords.x, map.getContainer().clientHeight - coords.y, 0);
+  var data = mcoords.toLngLat();
+  return {
+    lat: data.lat,
+    lng: data.lng
+  };
+}
+
+/**
+ * BBOX sync : map to sigma
+ */
+function syncSigmaWithMap(sigma, map) {
+  // Compute sigma center
+  var center = sigma.viewportToFramedGraph(sigma.graphToViewport(latlngToGraph(map, map.getCenter())));
+
+  // Compute sigma ratio
+  var mapBound = map.getBounds();
+  var northEast = sigma.graphToViewport(latlngToGraph(map, mapBound.getNorthEast()));
+  var southWest = sigma.graphToViewport(latlngToGraph(map, mapBound.getSouthWest()));
+  var viewportBoundDimension = {
+    width: Math.abs(northEast.x - southWest.x),
+    height: Math.abs(northEast.y - southWest.y)
+  };
+  var viewportDim = sigma.getDimensions();
+  var ratio = Math.min(viewportBoundDimension.width / viewportDim.width, viewportBoundDimension.height / viewportDim.height) * sigma.getCamera().getState().ratio;
+  sigma.getCamera().setState(_objectSpread2(_objectSpread2({}, center), {}, {
+    ratio: ratio
+  }));
+}
+
+/**
+ * BBOX sync : sigma to map
+ */
+function syncMapWithSigma(sigma, map) {
+  var viewportDimensions = sigma.getDimensions();
+
+  // Graph BBox
+  var graphBottomLeft = sigma.viewportToGraph({
+    x: 0,
+    y: viewportDimensions.height
+  }, {
+    padding: 0
+  });
+  var graphTopRight = sigma.viewportToGraph({
+    x: viewportDimensions.width,
+    y: 0
+  }, {
+    padding: 0
+  });
+
+  // Geo BBox
+  var geoSouthWest = graphToLatlng(map, graphBottomLeft);
+  var geoNorthEast = graphToLatlng(map, graphTopRight);
+
+  // Set map BBox
+  var bounds = new maplibreGl.LngLatBounds([geoSouthWest, geoNorthEast]);
+  map.fitBounds(bounds, {
+    duration: 0
+  });
+}
+
+/**
+ * On the graph, we store the 2D projection of the geographical lat/long.
+ *
+ * @param sigma The sigma instance
+ * @param opts.mapOptions Options that will be provided to map constructor.
+ * @param opts.getNodeLatLng Function to retrieve lat/long values from a node's attributs (default is lat & lng)
+ */
+function bindMaplibreLayer(sigma, opts) {
+  // Keeping data for the cleanup
+  var isKilled = false;
+  var prevSigmaSettings = sigma.getSettings();
+
+  // Creating map container
+  var mapLayerName = "layer-maplibre";
+  var mapContainer = sigma.createLayer(mapLayerName, "div", {
+    style: {
+      position: "absolute",
+      inset: "0"
+    },
+    // 'edges' is the first sigma layer
+    beforeLayer: "edges"
+  });
+  sigma.getContainer().prepend(mapContainer);
+
+  // Initialize the map
+  var map = new maplibreGl.Map(_objectSpread2({
+    container: mapContainer,
+    style: "https://demotiles.maplibre.org/style.json",
+    center: [0, 0],
+    zoom: 1,
+    minPitch: 0,
+    maxPitch: 0
+  }, (opts === null || opts === void 0 ? void 0 : opts.mapOptions) || {}));
+
+  // `stagePadding: 0` is mandatory, so the bbox of the map & Sigma is the same.
+  sigma.setSetting("stagePadding", 0);
+
+  // disable camera rotation
+  sigma.setSetting("enableCameraRotation", false);
+
+  // Function that change the given graph by generating the sigma x,y coords by taking the geo coordinates
+  // and project them in the 2D space of the map
+  function updateGraphCoordinates(graph) {
+    graph.updateEachNodeAttributes(function (_node, attrs) {
+      var coords = latlngToGraph(map, opts !== null && opts !== void 0 && opts.getNodeLatLng ? opts.getNodeLatLng(attrs) : {
+        lat: attrs.lat,
+        lng: attrs.lng
+      });
+      return _objectSpread2(_objectSpread2({}, attrs), {}, {
+        x: coords.x,
+        y: coords.y
+      });
+    });
+  }
+
+  // Function that sync the map with sigma
+  function fnSyncMapWithSigma() {
+    syncMapWithSigma(sigma, map);
+  }
+
+  // Function that sync sigma with map if it's needed
+  function fnSyncSigmaWithMap() {
+    if (!sigma.getCamera().isAnimated() && !map.isMoving()) {
+      // Check that sigma & map are already in sync
+      var southWest = graphToLatlng(map, sigma.viewportToGraph({
+        x: 0,
+        y: sigma.getDimensions().height
+      }));
+      var northEast = graphToLatlng(map, sigma.viewportToGraph({
+        x: sigma.getDimensions().width,
+        y: 0
+      }));
+      var diff = Math.max(map.getBounds().getSouthWest().distanceTo(new maplibreGl.LngLat(southWest.lng, southWest.lat)), map.getBounds().getNorthEast().distanceTo(new maplibreGl.LngLat(northEast.lng, northEast.lat)));
+      if (diff > 1) {
+        syncSigmaWithMap(sigma, map);
+      }
+    }
+  }
+
+  // When sigma is resize, we need to update the graph coordinate (the ref has changed)
+  // and recompute the zoom bounds
+  function fnOnResize() {
+    // Avoid sync map with sigma while we do the resize
+    // otherwise there is a sideeffect...
+    sigma.off("afterRender", fnSyncMapWithSigma);
+    var center = map.getCenter();
+
+    // Ask the map to resize
+    map.once("resize", function () {
+      // NB: resize can change the center of the map, and we want to keep it
+      map.setCenter(center);
+
+      // Map ref has changed, we need to update the graph coordinates
+      updateGraphCoordinates(sigma.getGraph());
+
+      // Do the sync
+      fnSyncSigmaWithMap();
+
+      // Re-enable the map sync with sigma in the next frame
+      setTimeout(function () {
+        fnSyncMapWithSigma();
+        sigma.on("afterRender", fnSyncMapWithSigma);
+      }, 0);
+    });
+    map.resize();
+  }
+
+  // Clean up function to remove everything
+  function clean() {
+    if (!isKilled) {
+      isKilled = true;
+      map.off("moveend", fnSyncSigmaWithMap);
+      map.remove();
+      sigma.killLayer(mapLayerName);
+      sigma.off("afterRender", fnSyncMapWithSigma);
+      sigma.off("resize", fnOnResize);
+
+      // Reset settings
+      sigma.setSetting("stagePadding", prevSigmaSettings.stagePadding);
+      sigma.setSetting("enableCameraRotation", prevSigmaSettings.enableCameraRotation);
+    }
+  }
+
+  // Update the sigma graph for geospatial coords
+  updateGraphCoordinates(sigma.getGraph());
+
+  // When the map is ready
+  map.once("load", function () {
+    // Compute sigma ratio bounds
+    // /!\ must be done after the first map render
+    map.once("moveend", function () {
+      fnSyncSigmaWithMap();
+    });
+    // Do the first sync
+    fnSyncMapWithSigma();
+
+    // At each render of sigma, we do the map sync
+    sigma.on("afterRender", fnSyncMapWithSigma);
+    // Listen on resize
+    sigma.on("resize", fnOnResize);
+    // Do the cleanup
+    sigma.on("kill", clean);
+    // Keep sigma camera on the map
+    map.on("moveend", fnSyncSigmaWithMap);
+  });
+  return {
+    clean: clean,
+    map: map,
+    updateGraphCoordinates: updateGraphCoordinates
+  };
+}
+
+exports["default"] = bindMaplibreLayer;
+exports.graphToLatlng = graphToLatlng;
+exports.latlngToGraph = latlngToGraph;

package/dist/sigma-layer-maplibre.esm.js

@@ -0,0 +1,279 @@
+import { MercatorCoordinate, LngLatBounds, Map, LngLat } from 'maplibre-gl';
+
+function _toPrimitive(t, r) {
+  if ("object" != typeof t || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r || "default");
+    if ("object" != typeof i) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
+}
+
+function _toPropertyKey(t) {
+  var i = _toPrimitive(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+
+function _defineProperty(e, r, t) {
+  return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+    value: t,
+    enumerable: !0,
+    configurable: !0,
+    writable: !0
+  }) : e[r] = t, e;
+}
+
+function ownKeys(e, r) {
+  var t = Object.keys(e);
+  if (Object.getOwnPropertySymbols) {
+    var o = Object.getOwnPropertySymbols(e);
+    r && (o = o.filter(function (r) {
+      return Object.getOwnPropertyDescriptor(e, r).enumerable;
+    })), t.push.apply(t, o);
+  }
+  return t;
+}
+function _objectSpread2(e) {
+  for (var r = 1; r < arguments.length; r++) {
+    var t = null != arguments[r] ? arguments[r] : {};
+    r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {
+      _defineProperty(e, r, t[r]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
+      Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
+    });
+  }
+  return e;
+}
+
+/**
+ * Given a geo point returns its graph coords.
+ */
+function latlngToGraph(map, coord) {
+  var data = MercatorCoordinate.fromLngLat(coord);
+  return {
+    x: data.x,
+    // Y are reversed between geo / sigma
+    y: map.getContainer().clientHeight - data.y
+  };
+}
+
+/**
+ * Given a graph coords returns its lat/lng coords.
+ */
+function graphToLatlng(map, coords) {
+  var mcoords = new MercatorCoordinate(coords.x, map.getContainer().clientHeight - coords.y, 0);
+  var data = mcoords.toLngLat();
+  return {
+    lat: data.lat,
+    lng: data.lng
+  };
+}
+
+/**
+ * BBOX sync : map to sigma
+ */
+function syncSigmaWithMap(sigma, map) {
+  // Compute sigma center
+  var center = sigma.viewportToFramedGraph(sigma.graphToViewport(latlngToGraph(map, map.getCenter())));
+
+  // Compute sigma ratio
+  var mapBound = map.getBounds();
+  var northEast = sigma.graphToViewport(latlngToGraph(map, mapBound.getNorthEast()));
+  var southWest = sigma.graphToViewport(latlngToGraph(map, mapBound.getSouthWest()));
+  var viewportBoundDimension = {
+    width: Math.abs(northEast.x - southWest.x),
+    height: Math.abs(northEast.y - southWest.y)
+  };
+  var viewportDim = sigma.getDimensions();
+  var ratio = Math.min(viewportBoundDimension.width / viewportDim.width, viewportBoundDimension.height / viewportDim.height) * sigma.getCamera().getState().ratio;
+  sigma.getCamera().setState(_objectSpread2(_objectSpread2({}, center), {}, {
+    ratio: ratio
+  }));
+}
+
+/**
+ * BBOX sync : sigma to map
+ */
+function syncMapWithSigma(sigma, map) {
+  var viewportDimensions = sigma.getDimensions();
+
+  // Graph BBox
+  var graphBottomLeft = sigma.viewportToGraph({
+    x: 0,
+    y: viewportDimensions.height
+  }, {
+    padding: 0
+  });
+  var graphTopRight = sigma.viewportToGraph({
+    x: viewportDimensions.width,
+    y: 0
+  }, {
+    padding: 0
+  });
+
+  // Geo BBox
+  var geoSouthWest = graphToLatlng(map, graphBottomLeft);
+  var geoNorthEast = graphToLatlng(map, graphTopRight);
+
+  // Set map BBox
+  var bounds = new LngLatBounds([geoSouthWest, geoNorthEast]);
+  map.fitBounds(bounds, {
+    duration: 0
+  });
+}
+
+/**
+ * On the graph, we store the 2D projection of the geographical lat/long.
+ *
+ * @param sigma The sigma instance
+ * @param opts.mapOptions Options that will be provided to map constructor.
+ * @param opts.getNodeLatLng Function to retrieve lat/long values from a node's attributs (default is lat & lng)
+ */
+function bindMaplibreLayer(sigma, opts) {
+  // Keeping data for the cleanup
+  var isKilled = false;
+  var prevSigmaSettings = sigma.getSettings();
+
+  // Creating map container
+  var mapLayerName = "layer-maplibre";
+  var mapContainer = sigma.createLayer(mapLayerName, "div", {
+    style: {
+      position: "absolute",
+      inset: "0"
+    },
+    // 'edges' is the first sigma layer
+    beforeLayer: "edges"
+  });
+  sigma.getContainer().prepend(mapContainer);
+
+  // Initialize the map
+  var map = new Map(_objectSpread2({
+    container: mapContainer,
+    style: "https://demotiles.maplibre.org/style.json",
+    center: [0, 0],
+    zoom: 1,
+    minPitch: 0,
+    maxPitch: 0
+  }, (opts === null || opts === void 0 ? void 0 : opts.mapOptions) || {}));
+
+  // `stagePadding: 0` is mandatory, so the bbox of the map & Sigma is the same.
+  sigma.setSetting("stagePadding", 0);
+
+  // disable camera rotation
+  sigma.setSetting("enableCameraRotation", false);
+
+  // Function that change the given graph by generating the sigma x,y coords by taking the geo coordinates
+  // and project them in the 2D space of the map
+  function updateGraphCoordinates(graph) {
+    graph.updateEachNodeAttributes(function (_node, attrs) {
+      var coords = latlngToGraph(map, opts !== null && opts !== void 0 && opts.getNodeLatLng ? opts.getNodeLatLng(attrs) : {
+        lat: attrs.lat,
+        lng: attrs.lng
+      });
+      return _objectSpread2(_objectSpread2({}, attrs), {}, {
+        x: coords.x,
+        y: coords.y
+      });
+    });
+  }
+
+  // Function that sync the map with sigma
+  function fnSyncMapWithSigma() {
+    syncMapWithSigma(sigma, map);
+  }
+
+  // Function that sync sigma with map if it's needed
+  function fnSyncSigmaWithMap() {
+    if (!sigma.getCamera().isAnimated() && !map.isMoving()) {
+      // Check that sigma & map are already in sync
+      var southWest = graphToLatlng(map, sigma.viewportToGraph({
+        x: 0,
+        y: sigma.getDimensions().height
+      }));
+      var northEast = graphToLatlng(map, sigma.viewportToGraph({
+        x: sigma.getDimensions().width,
+        y: 0
+      }));
+      var diff = Math.max(map.getBounds().getSouthWest().distanceTo(new LngLat(southWest.lng, southWest.lat)), map.getBounds().getNorthEast().distanceTo(new LngLat(northEast.lng, northEast.lat)));
+      if (diff > 1) {
+        syncSigmaWithMap(sigma, map);
+      }
+    }
+  }
+
+  // When sigma is resize, we need to update the graph coordinate (the ref has changed)
+  // and recompute the zoom bounds
+  function fnOnResize() {
+    // Avoid sync map with sigma while we do the resize
+    // otherwise there is a sideeffect...
+    sigma.off("afterRender", fnSyncMapWithSigma);
+    var center = map.getCenter();
+
+    // Ask the map to resize
+    map.once("resize", function () {
+      // NB: resize can change the center of the map, and we want to keep it
+      map.setCenter(center);
+
+      // Map ref has changed, we need to update the graph coordinates
+      updateGraphCoordinates(sigma.getGraph());
+
+      // Do the sync
+      fnSyncSigmaWithMap();
+
+      // Re-enable the map sync with sigma in the next frame
+      setTimeout(function () {
+        fnSyncMapWithSigma();
+        sigma.on("afterRender", fnSyncMapWithSigma);
+      }, 0);
+    });
+    map.resize();
+  }
+
+  // Clean up function to remove everything
+  function clean() {
+    if (!isKilled) {
+      isKilled = true;
+      map.off("moveend", fnSyncSigmaWithMap);
+      map.remove();
+      sigma.killLayer(mapLayerName);
+      sigma.off("afterRender", fnSyncMapWithSigma);
+      sigma.off("resize", fnOnResize);
+
+      // Reset settings
+      sigma.setSetting("stagePadding", prevSigmaSettings.stagePadding);
+      sigma.setSetting("enableCameraRotation", prevSigmaSettings.enableCameraRotation);
+    }
+  }
+
+  // Update the sigma graph for geospatial coords
+  updateGraphCoordinates(sigma.getGraph());
+
+  // When the map is ready
+  map.once("load", function () {
+    // Compute sigma ratio bounds
+    // /!\ must be done after the first map render
+    map.once("moveend", function () {
+      fnSyncSigmaWithMap();
+    });
+    // Do the first sync
+    fnSyncMapWithSigma();
+
+    // At each render of sigma, we do the map sync
+    sigma.on("afterRender", fnSyncMapWithSigma);
+    // Listen on resize
+    sigma.on("resize", fnOnResize);
+    // Do the cleanup
+    sigma.on("kill", clean);
+    // Keep sigma camera on the map
+    map.on("moveend", fnSyncSigmaWithMap);
+  });
+  return {
+    clean: clean,
+    map: map,
+    updateGraphCoordinates: updateGraphCoordinates
+  };
+}
+
+export { bindMaplibreLayer as default, graphToLatlng, latlngToGraph };

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@sigma/layer-maplibre",
+  "version": "3.0.0-beta.10",
+  "description": "A plugin to set a geographical map in background",
+  "main": "dist/sigma-layer-maplibre.cjs.js",
+  "module": "dist/sigma-layer-maplibre.esm.js",
+  "types": "dist/sigma-layer-maplibre.cjs.d.ts",
+  "files": [
+    "/dist"
+  ],
+  "sideEffects": false,
+  "homepage": "https://www.sigmajs.org",
+  "bugs": "http://github.com/jacomyal/sigma.js/issues",
+  "repository": {
+    "type": "git",
+    "url": "http://github.com/jacomyal/sigma.js.git",
+    "directory": "packages/layer-maplibre"
+  },
+  "keywords": [
+    "graph",
+    "graphology",
+    "sigma"
+  ],
+  "contributors": [
+    {
+      "name": "Benoît Simard",
+      "url": "http://github.com/sim51"
+    }
+  ],
+  "license": "MIT",
+  "preconstruct": {
+    "entrypoints": [
+      "index.ts"
+    ]
+  },
+  "peerDependencies": {
+    "maplibre-gl": "^4.5.0",
+    "sigma": ">=3.0.0-beta.10"
+  },
+  "exports": {
+    ".": {
+      "module": "./dist/sigma-layer-maplibre.esm.js",
+      "import": "./dist/sigma-layer-maplibre.cjs.mjs",
+      "default": "./dist/sigma-layer-maplibre.cjs.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "gitHead": "40bd5266410be119863fc2557f72d98d0bf754ee"
+}