HTML5 Canvas map framework: CanvaMap

CanvaMap is a JavaScript program, which takes advantage of HTML5 and Canvas to display a map with several overlays. It’s very small and weights just 8.8kB. CanvaMap is in Alpha stage, so it has bugs, the code is not well documented and some parts of it should be restructured; but for basic tasks it’s quick and easy to deploy. It can also be used to display large images as it offers zoom-in/out and navigation capabilities.

A very basic example is shown below. Double clicking on any of the leftmost buildings, zooms in and shows the floor plans. Zoom can also be achieved using the mouse wheel.

A more complex example is this one. It features additional shapes such as rooms, a floor switcher, ajax data loading, and a few more goodies. Keep in mind that only the leftmost buildings have associated floor plans. To be up and running with a simple image all you need to do is the following:

HTML Page

<html>
	<head>
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
		<script type="text/javascript" src="http://www.fdev.eu/bloguploads/canvamap/jquery.mousewheel.min.js"></script>
		<script type="text/javascript" src="http://www.fdev.eu/bloguploads/canvamap/ImageManager.js"></script>
		<script type="text/javascript" src="http://www.fdev.eu/bloguploads/canvamap/Map.js"></script>
		<script type="text/javascript" src="http://www.fdev.eu/bloguploads/canvamap/basicCanvaMap.js"></script>
		<script type="text/javascript">
				$("#mainCanvas").ready(startCanvas);
 
		</script>
		
		<style>
			.fs {
				 position:absolute; 
				 width:100%; 
				 height:100%; 
				 padding:0px; 
				 margin:0px;
			}
		</style>
		
	</head>
	<body class="fs">
	 	<canvas id="mainCanvas" class="fs">Canvas required</canvas>
	</body>
</html>

Javascript

function startCanvas() {
    map = new Map("mainCanvas");
    var imageManager = map.imageManager;
    imageManager.addImage("map", "http://www.fdev.eu/bloguploads/canvamap/town_landscape-wide.jpg", 0, 0, 0, {"isVisible" : true}, function() {map.center(this, true); });
}

Try to zoom in with the mouse wheel and drag the image.

If you want to check how the initial loading spinner works check it here