I have to draw a graph with many nodes, and I thought that an user interface like what Google maps offers could be nice to navigate the graph. I'm currently using Java for my application (a web application): what technologies/libraries should I use to build an interface like google maps? What approach?

edit: I'm interested mainly in creating a draggable map with zooming capabilities
edit2: I'm not looking for the exact solution of the problem, but for some starting point

I have to draw a graph with many nodes, and I thought that an user interface like what Google maps offers could be nice to navigate the graph. I'm currently using Java for my application (a web application): what technologies/libraries should I use to build an interface like google maps? What approach?

edit: I'm interested mainly in creating a draggable map with zooming capabilities
edit2: I'm not looking for the exact solution of the problem, but for some starting point

• java
• javascript
• user-interface
• graph

• 1 What exactly do you mean by "interface". The drag-and-move map? The nice buttons? The bubbles? The lookup search? The navigation bar? – Pekka Commented Nov 18, 2010 at 10:30
• Mainly the drag-and-move map and the zoom in/out – cdarwin Commented Nov 18, 2010 at 10:32
• 4 Java... JavaScript.... Car... Carpet. – Ivo Wetzel Commented Nov 18, 2010 at 10:34
• 1 "How to create a user interface like Google maps?" - Recruit a team of 10 or so smart engineers, and give them 3 to 5 years to get it right. – Stephen C Commented Nov 18, 2010 at 10:39
• @Stephen C.: ok, this question is a big question, but I thought that I could get some suggestions to start creating something at least similar to what google maps does – cdarwin Commented Nov 18, 2010 at 10:42

5 Answers 5

If you have a massive data to display, one approach is to create an interactive interface that let the user to navigate in your data. Higher the zoom, greater the details.

An example of google maps like interface for other purpose is zoompy

Are you familiar with OpenLayers? It is JavaScript map visualization library. Combined with something like OpenStreetMap, you can get some very powerful visualization with data for free.

Take a look at the tools in Eclipse's Graphical Modeling Project.

Take a look at Polymaps, specifically the support for vector data via geoJSON. It's a Javascript library that handles doing all the slippy-map interface: zooming, scrolling, and loading new sections of the map via HTTP. It renders to SVG, so it looks great and works in every browser except pre-9.0 MSIE.

It's a bit odd to use a geographic tool to draw arbitrary graphs, but it's totally doable. The Mandlebrot example is a proof of concept.

I was successful using modestmaps for Processing (find it here). A processing PApplet can be embedded in a swing GUI as explained here. I guess you could use the source to draw your graph in processing and then use the already implemented 'slippy map' features.