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

Draggable image map with zoom in jQuery

Let’s say you want to create some kind of ‘world map’ thingy where you have an image inside a viewport so that most of your ‘map’ overflows the viewport. You want the user to be able to drag around the image to view other area’s on the map and to zoom into different levels. Also, you want to use the html <map> tag to be able to link certain area’s on the map to certain pages on your website.

This could all be done relatively easy by using the jQuery UI library, some basic HTML + CSS and draggable(). This will however lead to some problems.

For example, when just invoking draggable on a map inside a viewport you will be able to drag the image out of the viewport. This isn’t what we want because a map has edges, and there is nothing but emptiness beyond those edges. This can be solved by using the ‘containment‘ option of draggable but we’ll have to create a constraint div. Wouldn’t it be easy if there was a plugin that took care of all this? Well, since last week there is. I’ve created a simple lightweight jQuery plugin called Mapz that takes care of this.

You can specify different zoom levels, whether to use the mousewheel for zooming and it makes sure that your map cannot be dragged out of view.

Getting started: the HTML mark-up

Ok, let’s get going. Let’s create the HTML mark-up that is necessary to properly create our image map. In this example we’re going to create an image map with just 2 levels of zoom and a few linked area’s.

HTML

CSS

.map-viewport{ position:relative; width:300px; height:300px; overflow:hidden; }
.level{ position:absolute; left:0; top:0; z-index:10;}
.current-level{ z-index:20; }
#map{ width:1200px; height:900px; position:absolute; left:0; top:0; cursor:move;}

As you can see, we’re only specifying an html <map> element for the first zoom level. Mapz will automatically create additional image maps for all zoom levels. Adding a zoom level is easy: just add an image with the ‘level‘ class to the #maps div.

Now, when loading this page you’ll see your viewport with only the top-left corner of your image map visible. Let’s add some JavaScript to add the drag & zoom functionality.

Loading Mapz.js

First, make sure you’ve loaded both the jQuery as the jQuery UI library. I like to use Google Libraries for this, which would make your head section look somewhat like this:


(note: Mousewheel is a jQuery plugin by Brandon Aaron which lets you bind events to usage of the mousewheel. We’ll need this if we want to be able to zoom in or out by using the mousewheel) After we’ve loaded jQuery, jQuery UI and Mousewheel (optionally) let’s load Mapz.js and invoke the mapz function on our image map.

Actually, that’s all there is to it. We’ve specified some options, you can read more about these options on the Mapz plugin page. If you followed all the above steps and did things right you should now have a working image map with zooming functionality.

Take a look at the demo which uses the exact code snippets as in this post. I’ve used some kind of fantasy world map for this example and added only two html area’s to it but you should get the idea. If not, drop me a line trough the comments!

Share this post: on Twitter on Facebook

17 Responses to “Draggable image map with zoom in jQuery”

  1. This looks like it is going to be really useful.

    I have been looking for something like this for sometime, it is nearly exactly what I need for a project I am thinking of.

    The one missing thing I am looking for, is for the html area that is currently under the mouse ( as per the MAP/AREA definition ) to be highlighted in some way. Is that actually possible?

  2. Hi just trying this out with a simple demo ( no zooming or map areas ).

    I get a JS error at jquery.mapz.js at line 114

    if(map.position().left < constraint.position().left) map.css('left',constraint.position().left);

    Uncaught TypeError : Cannot read property 'left' of null

    Clearly it works in your example, any ideas what I might have done wrong.

  3. Very nice – works just as I need, with the exception of the map points – it would be nice if you could create/destroy elements over the map points that could be styled, rather than a) having to edit the image to indicate where they are, and b) relying on the browser’s default hover state tooltip…

  4. Hey’! That is what I was looking for quite long!

    But to make it useful to me, I need to place some links on the map on specific locations. Is it possible to realize with you script?

    Thank you very much in advance!

  5. Danny,
    This is Awesome!! Can you help me add the scroll bar and up and arrows, like the ones on Google map…..I know a little about HTML, but nothing like this!! I’m just self taught….
    Thanks for sharing…..
    Shirley

    • Hey Shirley. Glad you like it! Adding the scroll bar and arrows would take me quite a few hours too. I like the challenge though, might look into it as soon as I find myself having some spare time! :) I’ll let you know (by e-mail)!

  6. Would it be possible, for map points, to specify a small image or icon to show on that spot? I have a rather big map for a game, with ever evolving locations, due to terraforming etc. This would help identify locations that exist since the map isn’t updated often.

  7. Hi Danny,
    This is a really great tool. I like it.
    I have an issue though. The “image map” defined by “usemap” does not endure through zooming.
    I have a world map with 3 levels of zoom. It zooms fine and scrolls as it should. I tried attaching two extra “image maps” with a greater level of zoom. These do not work. The hover zones do not present or activate.

    Any ideas?

    Thanks,

    Adam

  8. Hello,

    Danny do you still maintain this? Can map points be expanded to include an icon… some image you specify that will be placed where the map point is?

    Thanks,

    Stephen

  9. Hi Danny,

    I’m a self-proclaimed hack when it comes to building websites, but I have somehow managed to make a (meager) living doing it. I’m more of an seo/internet-marketing guy. I have just desided to switch over to WordPress. http://www.delheystukadoors.nl is my first try. After installing your WYSIWYG Widget editor I was exited. However, it seems to be stuck in HTML mode, it simply does not want to go in to WYSIWYG mode. Any suggestions?

    Thanks,
    Hans

    • Hi Hans,

      Actually I kind of stopped supporting WYSIWYG Widgets, it was too hard to maintain compatibility with everyone using outdated browsers and running a lot of different plugins which all load their JS files on the widgets page (while totally unnecessary). Maybe, just maybe, whenever I gathered enough courage to give it another try I will. For now, it seems to be working in Chrome with the latest version of WordPress for most people…

  10. I hate to spam your comments section, but hadn’t gotten an actual reply. Would you be willing to add an img option for map points.. I’d like to display a small icon(s) on each map point. I don’t mind paying for the addition either.

    Thanks,

    Stephen

  11. Hi Danny van Kooten,

    The map is good! Is there anyway to use a button to zoom in and out the map, instead using mousewheel? Thanks for your share!

Leave a Reply