Simple Multi-Layer Zoom (map) Tiles in HTML / JavaScript

Question

I'm trying to create a simple multi-layer zoom map with tiles in JavaScript (similar to Google Maps --- the more you zoom in the more details you see). I don't want to use the Google Maps API because I am creating fictional treasure maps.

I only want 2 zoom levels --- zoomed out and zoomed in. I made 500 pixel by 500 pixel tiles. The zoomed out view uses only one tile and the zoomed in view uses 4 tiles. The viewable area for the tiles is 75 pixels by 75 pixels (window). In both views the user can pan.

Below are both views:

I'm having a tough time getting started. I would like to do this in HTML / CSS / JavaScript. I found something called Polymaps (http://polymaps.org) which seems to offer what I want but with a lot of extra features. There's no tutorial on creating a map with custom tiles. Is this possible to easily do with JavaScript? Any recommendations on what to use?

Answer 1

Try SVGPan library :

The SVGPan library features:

• Panning (pan à la Google maps) (click on the white background and pan)

• Zooming (using the mouse wheel)

• Element dragging (click on a drawing element and drag it somewhere else)

• Combinations of the above like zooming while dragging

demo

Answer 2

Here are three options for implementing zoomable, multi-resolution images:

• Simple image pan/zoom library: CanvasZoom
• Use Google Maps API and supply your own tiles. See: Mike Couturier's Zoomable Image examples
• OpenLayers is an extensive, open-source mapping library that supports custom tile layers.

Answer 3

Maybe these js libs will serve the purpose:

• https://github.com/hackyon/jQuery-Tiles: Very like google maps, but waaay simpler
• http://labs.webcodingstudio.com/tilezoom/index.html: This one is a bit different, as it's less for maps and more for general images with specific POIs, but definitely can be used for maps.

I'm using jQuery-Tiles to display a fantasy map for a personal/fun project.