I enjoy simplicity, in everything. Unnecessary complexity is evil. Have a look at my WordPress plugins.

Mapz

This plugin lets you create draggable image maps. Check out the Mapz demo for an example of what Mapz is capable of.

Features

  • Draggable map which means there are no image dimension limits.
  • Zooming, no limit on the number of zoom levels.
  • Zoom by arrow keys or by mousewheel (note: when using zoom by mousewheel, you’ll need Brandon Aaron’s mousewheel plugin)
  • Use HTML <area> elements to create links inside your image maps. The plugin will automatically calculate the coordinates for the different zooming levels.

Documentation

To get Mapz to work you need to have a HTML structure with accompanying CSS like this

HTML:

<div id="map-1-container">
 <div id="map-1">
 <img src="img/map-1.jpg" width="500" height="419" alt="" usemap="#map-for-map-1" class="current-level level" />
 <img src="img/map-2.jpg" width="750" height="629" alt="" class="level" />
 <img src="img/map-3.jpg" width="1000" height="839" alt="" class="level" />
 </div>
 <map name="map-for-map-1">
 <area title="City name" shape="rect" coords="5,165,75,195" href="#goes" alt="" />
 <area title="Train station" shape="rect" coords="270,365,320,390" href="#train-station" alt="" />
 </map>
</div>

CSS:

#map-1-container{ position:relative; width:400px; height:300px; overflow:hidden; }
#map-1{ width:500px; height:419px; position:absolute; left:0; top:0; }
.level{ position:absolute; left:0; top:0; z-index:10;}
.current-level{ z-index:20; }

This should show an image that overflows our #map-container. To make our image map draggable we just have to invoke the mapz function on it.

JavaScript:

$("#map-1").mapz();

This will make the image map draggable but adds no zoom functionality yet. You can enable zoon by passing a simple parameter to the options. You’ll have to add multiple image levels for this to work (like the HTML snippet above).

JavaScript:

$("#map-1").mapz({
zoom : true,
createmaps : true,
mousewheel : true
});

Available Mapz options

  • zoom – add zooming functionality? ( true | false )
  • createmaps – create html maps for all zooming levels ( true | false ). You’ll need to provide an html map for the first zooming level inside the map container for this to work. Mapz will then calculate the coordinates for all the other zooming levels.
  • mousewheel – allow zooming with the mousewheel? ( true | false )

Actions