AoA Map Viewer - 20120901

This past week I decided to jump onto AoA again, continuing where I left off - the painful Map viewer. I jumped over a hurtle that had been paining me in my last attempts to move forward with this project, and now that I have a long weekend (labour day!), I'm plenty enthused to move forward.

For now, I just want to see if I can embed the viewer within the blog for show-off purposes. The viewer itself is in some pretty rudimentary stages, but a lot of the foundations are in place. The viewer takes in different 'map' objects that contain information regarding their grids and images - the grids themselves are defined very easily with offsets, dimensions and cell sizes. Based on this, all the functions are already in place to convert between coordinate spaces. This includes:

• Viewer Space: Where clicks are registered (generally between 0,0 and 800,600 or whatever the viewer's dimensions are)
• Map Space: The original dimensions of the map image (generally between 0,0 and 2000,1500). Any layered decals built on top of the images will be processed in this space, and finally reduced to viewer space at the end. This is so that I can work in a single, consistent space despite all of my zooming and panning.
• Grid Space: The x,y position within the cells. On the main world map, this is between 0,0 and 38,28.

Currently, the only features in place include the ability to zoom and pan around (with a grid that remains attached to the map, but is consistently 1 pixel thick regardless of how much you zoom in) and the ability to double click on a cell to switch to a different map image (currently just a blank piece of parchment).

This is pretty close to as far as I got with the Legend map viewer - however, this application is significantly better in many ways. For example, the grid is no longer redrawn, cell by cell, every time the image is changed. Instead, I cached all of my grids to hidden canvases, and draw the entire grid to the application with a single draw call. I intend to use this method extensively, especially with highlighting cells, and map decals.

So, without further ado, here's the map viewer in its current state. Note that I had to cut it down to 50% of the size to keep it from messing up the blog layout. If you want to see it at the full intended size, check it out here: http://ambidextrous-designs.net/ageofavarice/mapviewer/. Also, this will not work in older browsers (like IE8).

Click and drag to pan around, right click to recenter the map, scroll wheel to zoom. Double click to load into the other blank map page.

I hope to have a more impressive display soon! But I'm pretty damn pleased with how this has come out so far. If you want to check out the javascript behind it, it's right here: http://ambidextrous-designs.net/ageofavarice/mapviewer/js/mapviewer.js