Best way to do a strategic map for a 4X space game on a web page?

Question

I'm currently looking at the options regarding how to do a strategic map for a web application.

My goals here are :

• a synthethic view of what's happening in a stelar system
• the ability to management movements (through displaying trajectories of some ships and planets/star(s))
• the development should'nt take years, since we're few on the project

The usability challenges at hands are IMHO:

• scale issues: both in terms of ships/planets/stars volumes and distance. In the end, I guess markers/symbols are the way to go
• density of information: there could be much there
• frequent updates of the map needed (every 30 seconds or so, would be better if partial reload/refresh possible)

Options I'm aware of:

use of a table, through the background image and cells images

• + easy to do on my own
• + partial refresh possible (ajax on a per cell basis)
• - very low resolution => looks poor

JavaScript map drawing

• + looks very powerful
• - big work needed (I haven't found pre existing plugin/library/framework doing this, whereas I'm not a JavaScript guru)
• - way to go unclear: canvas or dom manipulation?

use of svg pictures

• + resolution amazing
• + http://raphaeljs.com/ to the rescue
• - I don't know much about svg

CSS3

• I'm rather clueless about it, what about performance/cross browser support and the like...

As a side note, I don't want to bother too much for IE.

Did I miss something obvious? What would you suggest?

thanks in advance best

BTW, a related topic but more focused on svg: Is SVG a viable technology choice for web-based game?

Answer 1

Before you roll your own map, I'd have a look at existing map frameworks. OpenLayers seems to be a good candidate that already has a lot of your requirements implemented.

If that doesn't fit your needs, you could still implement it yourself. SVG is particularly interesting, because you get an infinite level of zoom (given your assets are vector-graphics).

You're going to need JavaScript for the refresh code and dynamic positioning of elements anyway, so there's no way around JavaScript. Usually you'll use canvas to draw graphics, but you could use DOM elements (and CSS3) or SVG for your drawing. There's this question that lists some JavaScript libraries for game-dev.

Another interesting API is Paper.js which allows you to draw vector-graphics and images using a JavaScript API.

In the end it highly depends on your requirements. A zoomable map will look best with SVG but requires you to create your assets as SVG graphics. An existing framework like OpenLayers is probably the best way to get something on screen fast though.