Zoomable background for cytoscape js

Question

We're making a graph for a project right now. This graph should show all crossways of a city. And most ways between them. We started of using cytoscape.js for drawing the graph. Now we want a background behind the graph. This background will be the map of that city, so it has to be scrollable and at the right position.

Our first idea was to make a rectangle node and give it a background. Than we added the map and put in the right coördinates. Now the map is scrollable and is always at the right position. This gave us two problems. First the graph can't be panned anymore, cause when you try to pan you will try to select the underlying node. We fixed this by using the cytograh-panzoom plug-in.

The seccond problem is, that the edges aren't clickable anymore, because the background-node is now covering them and it seems impossible to get the edges on top.

The questions:

1. Is there a better library to draw such a graph?
2. If not, is it possible to draw edges on top of the nodes with cytoscape?
3. Is there another way with cytoscape to do this?

Kind regards

Answer 1

You could listen to viewport events and update the background-position and background-size properties of a background image set in the CSS for your cy div.

Or in lieu of a background image, you could have a separate div with an image that uses CSS transforms instead of background-* properties.