search

plotly / dash-cytoscape

Interactive network visualization in Python and Dash, powered by Cytoscape.js
https://dash.plot.ly/cytoscape
MIT License
605 stars 120 forks source link

[Feature request]: Integration with maps #85

Open optimulate opened 4 years ago

optimulate commented 4 years ago

Hi Cytoscape team. First of all: Great work! It would also be great if there was an easy way to overlay cytoscape elements on a map, e.g. like the integration of Mapbox with Plotly Scatter plots. Or is there already a documented or undocumented way to do this?

xhluca commented 4 years ago

Hi @optimulate, it seems like this might be helpful: https://js.cytoscape.org/demos/tokyo-railways/

Overlaying might be hard since the way Plotly graphs and Cytocape are rendered are fairly different and independent from each other. If you do find an example that successfully overlay Cytoscape.js to a map, feel free to share it.

Alternatively, you might want to check out the newly released Dash Leaflet to see if it might fulfill some of your requirements (it's not exactly networks, but it has many rich features).

optimulate commented 4 years ago

Hi @xhlulu,

Thank you for your reply.

I have seen one course implementation described here: https://stackoverflow.com/questions/50624028/integrating-maps-in-cytoscape. Basically, it draws cytoscape in a layer on top of google maps, using the provided api layer functionality.

I considered this option, but was afraid of the implications for the other extensions and manual enhancements I had made to my cytoscape powered front-end (drag and drop funcitonality from a second canvas, making connections, deletions, etc.). Therefore, I went the other way: last week, I was able to display google maps in a div underneath the cytoscape Canvas. I have disabled user zooming in cytoscape and capure zoom and pan events to be able to synchronize both the cytoscape and map layers. It's quite some work and I'm still working out some last issues with the synchronization of the layers.

I looked at the canvas plugin for Cytoscape, but wasn't able to leverage it for this. If that plugin could be expanded to also allow for a regular div layer, and potentially offer some built-in functionality to synchronize panning/zooming (with the fact that maps can inly zoom in exponents of 2), it would be great.

xhluca commented 3 years ago

Hi @optimulate , sorry for the late response. I think the extension you linked would be an interesting addition and could be loaded with load_extra_layout. if you had a chance to use it inside cytoscape and would like to contribute a PR, i'd be happy to review it!

As for the alternative approach using Div, if it works well I'm happy to add it to the demos if it is open-source.