cytoscape-leaflet v1.0.15
cytoscape-leaflet
Based on cytoscape-mapbox-gl by zakjan
Leaflet plugin for Cytoscape
Compatible with Leaflet v1.3.
Compatible not tested, but original plugin for mabox-gl is compatible with Cytoscape plugins:
Incompatible with Cytoscape plugins:
- cytoscape-panzoom
- disable with
cy.panzoom('destroy')
after enablingcy.L(...)
- add map navigation control
- enable with
cy.panzoom()
after callingcyMap.destroy()
- disable with
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 documentationoptions
getPosition
- function, should return node position, requiredsetPosition
- function, should save the node positionanimate
- animate the transition between graph and map modeanimateDuration
- 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();