cytoscape-leaflet

Based on cytoscape-mapbox-gl by zakjan

Leaflet plugin for Cytoscape

Demo

Compatible with Leaflet v1.3.

Compatible not tested, but original plugin for mabox-gl is compatible with Cytoscape plugins:

• cytoscape-edgehandles
• cytoscape-lasso

Incompatible with Cytoscape plugins:

• cytoscape-panzoom
  • disable with cy.panzoom('destroy') after enabling cy.L(...)
  • add map navigation control
  • enable with cy.panzoom() after calling cyMap.destroy()

Install

npm install leaflet cytoscape-leaflet
yarn add leaflet cytoscape-leaflet

Usage

The plugin exposes a single function, which should be used to register the plugin to Cytoscape.js.

import cytoscape from 'cytoscape';
import cytoscapeLeaflet from 'cytoscape-leaflet';

cytoscape.use(cytoscapeLeaflet);

Plain HTML/JS has the extension registered for you automatically.

API

import {LatLng} from "leaflet";

export interface MapOptions {
  getPosition: (node: cytoscape.NodeSingular) => LatLng;
  setPosition?: (node: cytoscape.NodeSingular, lngLat: LatLng) => void;
  animate?: boolean;
  animationDuration?: number;
}

const cyMap = cy.L(mapOptions: L.MapOptions, options: MapOptions);

• mapOptions - see Leaflet docs for detailed documentation
• options
  • getPosition - function, should return node position, required
  • setPosition - function, should save the node position
  • animate - animate the transition between graph and map mode
  • animateDuration - animation duration for the transition between graph and map mode

If no setPosition option is provided, it's important to disable node dragging with Cytoscape methods, e.g. with cy.autoungrabify(true).

If node dragging is kept enabled and no setPosition option is provided, or setPosition returns without saving, node position is reverted back to the original position after node dragging is finished. This behavior can be also used for cancelling.

Basic

cy.autoungrabify(true); // disable node dragging
const cyMap = cy.L(..., {
  getPosition: (node) => {
    const lng = node.data('lng');
    const lat = node.data('lat');
    return typeof lng === "number" && typeof lat === "number"
      ? {lat, lng}
      : null;
  }
});

Node dragging enabled

const cyMap = cy.L(..., {
  getPosition: (node) => {
    const lng = node.data('lng');
    const lat = node.data('lat');
    return typeof lng === "number" && typeof lat === "number"
      ? {lat, lng}
      : null;
  },
  setPosition: (node, lngLat) => {
    node.data('lng', lngLat.lng);
    node.data('lat', lngLat.lat);
  }
});

Use raster basemap layer

cyMap = cy.L({
  minZoom: 0,
  maxZoom: 18,
}, {
  getPosition: (node) => {
    const lng = node.data('lng');
    const lat = node.data('lat');
    return typeof lng === "number" && typeof lat === "number"
      ? {lat, lng}
      : null;
  },
  setPosition: (node, lngLat) => {
    node.data('lng', lngLat.lng);
    node.data('lat', lngLat.lat);
    console.log(node.id(), lngLat);
  },
  animate: true,
  animationDuration: 1000,
});
L.tileLayer('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  minZoom: 0,
  maxZoom: 18,
}).addTo(cyMap.map);

OpenStreetMap tiles are not recommended for heavy use. See OpenStreetMap Tile Usage Policy for details. See Tile servers at OpenStreetMap wiki for possible alternatives, or consider commercial alternatives such as Mapbox, Maptiler, or running your own tile server.

Fit map to nodes

cyMap.fit(nodes = this.cy.nodes(), options)

• nodes - cytoscape.NodeCollection, the collection to fit to (default all nodes)
• options - L.FitBoundsOptions, see Mapbox GL JS docs for detailed documentation

Access Leaflet instance

cyMap.map

Destroy

cy.autoungrabify(false); // enable node dragging, if node dragging was disabled earlier with `cy.autoungrabify(true)`
cyMap.destroy();