Tips for creating an interface similar to Google Maps

Question

I'm trying to make some board games online, and I want the interface to be stony and scalable. As in Google Maps, you can move and scale the map, I want the game panel to be moved and enlarged. Unlike Google Maps, I do not want to work with images.

Can someone give me recommendations on which technology to use? Would this work well for plain HTML? HTML 5 Canvas? or svg? Any specific JS libraries to recommend or something else entirely?

I would like to avoid flash and Java. Browser compatibility is a plus, but not the most important factor. For example, I think it would probably be fine to require Chrome Frame for older IEs.

Any ideas / tips would be appreciated.

Answer 1

A few thoughts:

• Use the OpenLayers interface with the fixed "strategy for loading vector graphics for your board right away. (This is probably too heavy, but comes with panorama and compatibility with IE).

• Use Raphael to create your SVG board using RaphaelZPD for panning. RaphaelZPD is not cross-browser (although Raphael), so you'll need a Chrome Frame for compatibility with IE. I think that would be very easy.

• Use pure SVG for your board, use SVGpan for panning. Chrome Frame is also required, although you can use SVGweb if you want. You can draw your boards directly in Inkscape, clear the SVG and add any identifier you need in XML (SVG - XML ​​under the hood), and interact with the board using jQuerySVG, if you like, or a script with manual interaction. Did I mention CSS works with SVG? I think this is your best choice.

• I can't think of the benefits of using Canvas here if you didn't have a lot of animation or bitmap images. SVG is much more transparent in how it works - it is XML under the hood and when rendered on the page becomes DOM nodes that you can easily manipulate in modern browsers.

• Simple HTML is likely to be difficult to handle scaling. I saw a lot of image scalers, but I didn’t see the complex HTML structures, and the complexity would be aggravated by the need to pan at an increased level.

Answer 2

If you want full control over your development environment, you can create your own plataform web rendering. I think you can use HTML 5 canvas as a browser interface.

You can easily implement drag and drop, pan, and zoom using an HTML canvas. This approach is very similar to the development of the game in many boards. Here's an example of using HTML canvas 5 for an interface that supports panning, dragging, and zooming.

Managing your environment will have a wide range of possibilities.

Answer 3

If you don't mind tiling, I would suggest checking out Polymaps "JavaScript library for images and vector tile maps using SVG." You can probably take some parts from there for panning and zooming.