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.

Simple example – Full screen:

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

Your JavaScript code in “basicCanvaMap.js”

The nice thing about CanvaMap is that provides a way to easly bing events to any image/shape you add. Some of the supported events are mouseHover, onClick, onDblClick.

Result – Full screen:

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

More examples and documentation will be coming.

5 thoughts on “HTML5 Canvas map framework: CanvaMap

  1. Has this updated? I wanna use this, however, I don’t know the interface , leading to my reading js document myself. Is there any document about this? Can you give me  reply? If so, please email to, and I’ll appreciate a lot.

  2. This is a great little widget, well done!  The only thing i would suggest is encapsulating all your variables (var map) to make it instantiable multiple times on the same page if needed.  But again, nice job!


  3. Pingback: max

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">