Join our HiFi mailing list to receive the latest news & updates

A jQuery Plugin for Zoomable, Interactive Maps

100 Comment(s) | Posted | by Joel Sutherland | |

What is it and why was it built?

A couple of months ago we launched a site about Marine Science in North Carolina with one of our design partners, Liaison Design Group. A key part of the project was an interactive map that allowed visitors to find important Marine Science resources in North Carolina.

Each location on the map would be represented by a bullet. Clicking the bullet would bring up more information on the location. Since the locations of the bullets tended to be highly clustered, zooming into select subregions was possible.

We wanted the experience to be engaging as possible but also easily updatable in the future. We settled on jQuery as the interface technology to use as it made it simple to build, display and animate the map. I did a longer writeup on the detailed mechanics of how this worked two weeks ago in one of our most popular posts. Due to the great feedback we got on it, this is a follow-up with a revised version of the code as a jQuery plugin which should make it easier to integrate into other projects.

Demos

This project is being used in production on a number of sites. Below is a listing of a couple. If you have used this in a project you would like to see listed, let me know.

NC Marine Science Sici.org Raleigh Photonics
interactive map interactive map interactive map
Liaison Design Shadowbox Creative Liaison Design

Documentation

Limitations

This was originally developed for one project with very specific requirements. While I have taken the time to generalize that code into a plugin, I have not made it as generic as I would have liked and will do more in the future to improve it given enough interest. Here is a list of its current biggest limitations:

  • Data Required In Plugin Setup - Ideally all of the required data would be stored in the html pages that drive the bullets. This would allow a CMS to more easily generate additional depth levels without needing to play with the javascript. All that is required in the js now is an array of the sub-regions along with their dimensioning data.
  • Data Accessibility Unaddressed - The plugin currently does nothing on its own to make content available to search engines and those with disabilities. This is left up to the developer to do, though it shouldn't be too challenging since the plugin requires all of the data to be expressed in html.
  • API - Right now it is impossible to programatically interact with the map once it is launched. Eventually it will have a simple API to assist in navigation and other manipulations.

Even with these limitations, this is ready for production and is being used on several sites as seen above in the demos.

Instructions

There are four main components required to make the plugin run: the background images, links to pages that contain html data in the correct format, some CSS for style and finally the plugin call. Below are instructions on each.

1. Background Images

There are very limited requirements on the background images:

  • They must all be the same size. Sub-region background maps grow to fill the entire map area
  • They should line up. Just prior to zooming, a sub-region map is placed over an area of the main map, if this doesn't line up properly, some of the zooms effect will be lost.
  • The main map should highlight the zoomable regions. The plugin does not otherwise make these obvious. (Though the css could be edited to add a border or background image to the zoomable region.)

2. HTML Data

The plugin assumes a certain structure for the html data it loads via AJAX. As long as the basic structure is kept, a developer is free to add any type of content styled however they would like. Aside from the unavoidable requirements imposed by the animation, all style is isolated to CSS.

The HTML format contains information for the location and applied class of the bullets, a convention based link between the bullets and the pop-up content and the content itself. The html returned should just be a listing of the bullets and popups in the following format:

 

[POPUP-ID] should be unique for each bullet/popup. The jQuery uses this along with the "-box" convention to open the correct popup when a bullet is clicked.

3. CSS Style

As much as possible, the plugin is designed to operate exclusively on the DOM, leaving styling up to CSS. A basic css file is included with the demo zip. Here is some rough minimal css:

#map { position: relative; width: 700px; height: 470px; overflow: hidden; }
#returnlink { display: block; position: absolute; bottom: 0; right: 0; }
#map a.bullet { display: block; position: absolute; width: 10px; height: 10px; background: yellow; }
#map img.zoomable { }
#map div.popup{ display: none; position: absolute; width: 200px; height: 300px; }
#map div.popup a.close{ display: block; position: absolute; bottom: 0; right: 0; }

The code above will work just fine as a starting point. Obviously a lot of embellishment can be added to make the map look as good as the one's Liaison designed in the examples. Here are some things to note:

  • The main '#map' container must be positioned absolute or relative.
  • Popups must have 'display: none' set to make sure they don't flicker when they are loaded.
  • Popups must be positioned using CSS. The jQuery only shows/hides them.

4. jQuery Plugin Call

The last piece that needs to be put in place is a call to the jQuery zoommap plugin that makes it all happen. In the call, we must pass the in some settings as well as a data structure that sets up the map and its different zoom levels. Here is a call for a simple two level map that contains all of the possible settings:

$('#map').zoommap({
	// Width and Height of the Map
	width: '500px',
	height: '580px',
		
	//Misc Settings
	blankImage: 'images/blank.gif',
	zoomDuration: 1000,
	bulletWidthOffset: '10px',
	bulletHeightOffset: '10px',
	
	//ids and classes
	zoomClass: 'zoomable',
	popupSelector: 'div.popup',
	popupCloseSelector: 'a.close',
	
	//Return to Parent Map Link
	showReturnLink: true,
	returnId: 'returnlink',
	returnText: 'return to previous map',
	
	//Initial map to be shown
	map: {
		id: 'campus',
		image: 'images/campus.jpg',
		data: 'popups/campus.html',
		maps: [
		{
			id: 'quads',
			parent: 'campus',
			image: 'images/quads.png',
			data: 'popups/quads.html',
			width: '200px',
			height: '232px',
			top: '18px',
			left: '176px'
		}
		]
	}
});

Here is a breakdown/description of each of the settings:

  • width/height - The width and height of the map container.
  • blankImage - Path to an (transparent) image that will be used over the zoomable regions until their map is loaded.
  • zoomDuration - Duration in milliseconds of the map zoom effect.
  • bullet(Width/Height)Offset - Offsets that allow the coordinates of the bullets to be placed in the center of the target, rather than the corner.
  • zoomClass - Class that should be applied to the zoomable region imgs.
  • popupSelector - Selector the plugin should use to find the popups in the html
  • showReturnLink - Whether a return link should be shown on child maps
  • returnId - Id to use for the return link.
  • returnText - Text to be placed in the return link.
  • map - The top level map that should be shown.

Additionally each map has the following properties and can infinately nest more maps:

  • id - Id that should be used for the zoomable region.
  • image - Path to the image that should be used for the map. This image should be large enough to fill the entire map space.
  • data - Path to the html data for the maps popups and bullets.
  • width/height - Width and height of the zoomable region.
  • top/left - Absolute position of the zoomable region
  • maps - Children maps.

Here is a minimal call that relies on the default settings:

	
$('#map').zoommap({
	width: '500px',
	height: '580px',
	blankImage: 'images/blank.gif',		
	map: {
		// Map structure
	}
});

And here are the default settings:

	
settings = $.extend({
	zoomDuration: 1000,
	zoomClass: 'zoomable',
	popupSelector: 'div.popup',
	popupCloseSelector: 'a.close',
	bulletWidthOffset: '10px',
	bulletHeightOffset: '10px',
	showReturnLink: true,
	returnId: 'returnlink',
	returnText: 'Return to Previous Map'
}, settings);

Download the Project Zip

View the project Demo or download the project zip.

Questions/Comments?

This project will be revised in the future and is certainly open to suggestions. If there are any suggestions or questions, please leave them in the comments.

 

Update (8/2/2011): Daniel Madejak found this plugin and liked it so much that he wrote a Windows desktop application that generates the config files for you! You can check out that application along with the documentation here: http://shaimad.pl/webmapcreator/. Note that it is an early release and improvements are still being made.

100 Comment(s) | Posted | by Joel Sutherland | |

Comments

  1.  Geof Harries's avatar
    Geof Harries
    | Permalink

    Thank you for sharing the code and documenting it so thoroughly. I started down the path of reverse engineering what you'd already written, but it was taking way too much time ;)

  2. Joel Sutherland's avatar
    Joel Sutherland
    | Permalink

    Let me know if you have any trouble with this Geof -- I'm happy to help! Also be sure to share your project once it is up and running.

  3.  Kevin's avatar
    Kevin
    | Permalink

    Plugin is very nice and easy to set up but I've had inconsistent results of using the hash in the url. It seems to work for the first area sporadically and not at all for the other areas.

  4.  Joel Sutherland's avatar
    Joel Sutherland
    | Permalink

    Kevin,

    Is there any way you could zip your project and send it to joel@newmediacampaigns.com along with a description of the issues you are having? I'll look into it and get back to you.

  5.  Joel Sutherland's avatar
    Joel Sutherland
    | Permalink

    Kevin,

    I've sent you an updated script that allows for hashs in the url. I've also updated the zip file on this post.

  6.  Steve's avatar
    Steve
    | Permalink

    I am almost finished implementing the map plugin, I am having a problem with a 3rd level map where the return link does not work.

    See: http://savourmuskoka.com/map

    Click the top right sector and then click on Huntsville on the next map, the return link does nothing?

    Thanks..
    Steve

  7.  Pratik's avatar
    Pratik
    | Permalink

    Hello everyone,

    Somebody Help me out for problem....
    The given example runs fine on my PC... but when I uploaded it to server (Linux), the bullets did not appear. uploaded examples link is http://www.ushawoods.com/test/u2/example.html

    Thanks

  8. Joel Sutherland's avatar
    Joel Sutherland
    | Permalink

    @Steve I will take a look at this and let you know what I find.

    @Pratik It looks like the bullet data is not loading. Try checking your paths.

  9.  JPS's avatar
    JPS
    | Permalink

    @Pratik and @Joel,

    Im having the same problem. Just as a test I simply uploaded the demo, didnt change the file structure at all. No bullets.

    http://eleph.us/zoommap/example.html

    Despite that, great work Joel!

    JPS

  10.  Luther's avatar
    Luther
    | Permalink

    Hi,
    congratulation for this great work, but... there is a little problem with internet explorer...

    If you click and zoom an area, then return to map and reclick again the area, it doesn't work.
    You must to close and reopen the browser if you want to work on it...

  11.  Steve's avatar
    Steve
    | Permalink

    @Joel - Just in case my email is: sts at ihosttech.com

  12. Almar's avatar
    Almar
    | Permalink

    Absolutely love this kind of map. Got it to work fine, however I run into a problem with the Safari browser, similar to what Luther above mentions for Internet Explorer:

    Click and zoom into an area, and the bullet data shows up. Zoom out, click another area, zoom in and bullets show up. Move to another site/page, then return to the map. Click the same zoomable areas again and there are no more bullets.

    It looks like it only happens with Safari, I do not experience problems in other Browsers.

    Keep up the good work!

  13.  Dean's avatar
    Dean
    | Permalink

    @Pratik and @Joel and @JPS

    first of all a big thanks for making this map

    i'm having the same problem as Pratik and Joel and JPS

    you can change the paths to images no problem but if you change the paths to the bullet html/data they don't show up

    any ideas what can be tweeked to fix this? or am i doing something wrong? i checked the paths carefully

    regards

    dean

  14. Joel's avatar
    Joel
    | Permalink

    @all I am on the road today through Monday. Ill look at these issues and let you know what I find early next week.

  15.  dean's avatar
    dean
    | Permalink

    thanks joel - it would be a big help

    also (and i know i'm being super cheeky here) - i can't seem to work out how to add another zoom map region on the main map

    do i just add the code to setup.js file in this bit?

    //Initial Region to be shown
    map: {
    id: 'uk',
    image: 'images/uk.jpg',
    data: 'popups/uk.html',
    maps: [
    {
    id: 'scotland',
    parent: 'uk',
    image: 'images/scotland.jpg',
    data: 'popups/scotland.html',
    /*click/zoom area size and placement*/
    width: '100px',
    height: '100px',
    top: '0px',
    left: '0px'
    /*click/zoom area size and placement ends*/
    /*More maps can be nested
    maps : [ ] */

    }

    if there's any way you could give a bit of guidance (or code) i'd be forever in your debt

    dean

  16.  dean's avatar
    dean
    | Permalink

    scrap last comment - worked it out - was missing a comma between maps! doh!

  17.  chris's avatar
    chris
    | Permalink

    Great work.. just wanted to ask about IE6 compatibility?

    I want to incorporate this at my work, and unfortunately we still have a lot of IE6 users.

    When you click into a zoomed map, then click back out, the original map disappears.

    Otherwise this is a great product! Very useful.

  18.  dean's avatar
    dean
    | Permalink

    unfortunately this map does not work in ie6 ie7 or Opera (mac and pc)

    the linked to project does at the marine science site

    but this demo does not

    shame - just spent 3 days working on it

  19. Joel Sutherland's avatar
    Joel Sutherland
    | Permalink

    @chris @dean

    The bug with the original map background image disappearing in IE6 has been corrected. The zip has the updated files.

  20.  steve's avatar
    steve
    | Permalink

    @Joel - Any luck with figuring out why my 3rd level maps won't work with return link?

    Thanks! - Steve

  21. Kyle's avatar
    Kyle
    | Permalink

    I seem to be having a problem on some of the maps (including my own) in IE 7+, (it behaves as expected in FF3..), where the initial zoom works fine, but after returning to the original map and trying to zoom again, nothing happens, typically.. the zoomable area and bullets disappear..

    Great plugin though, its working out great other than this
    Thanks!

  22.  Kyle's avatar
    Kyle
    | Permalink

    @all

    For anyone experiencing the problems in my post above, and to notify Joel of my changes/solution, I was able to solve the issue by slightly modifying the plugin.

    jQuery Documentation on element load event:
    Note: load will work only if you set it before the element has completely loaded, if you set it after that nothing will happen. This doesn't happen in $(document).ready(), which jQuery handles it to work as expected, also when setting it after the DOM has loaded.

    Working under this assumption, i modified the plugin to wire up the zoom image load events before applying the the source images on a zoom..

    Original Code:
    $(this).hide()
    .attr('src',region.image);.load(function(){
    $(this).fadeIn('slow').animate({
    ...existing code...
    displayMap(region); }); });

    Modified Code:
    $(this).load(function(){
    ...existing load code...
    });
    $(this).siblings().fadeOut();
    $(this).hide().attr('src', region.image);

    Of course this should be tested a little more thoroughly, but it seems to work for me well so far.. Definitely a relief to get it working reliably in IE! :-)

    Thanks!

  23. Kyle's avatar
    Kyle
    | Permalink

    I also made a few other minor changes, such as allowing the user the ability to choose what corner the returnLink shows up in, etc... I will send you the new plugin soon for you to consider the changes :-)

  24.  Joel Sutherland's avatar
    Joel Sutherland
    | Permalink

    @Kyle Send it over and Ill take a look. I am also planning on adding a couple of other changes that could make using the map handier.

  25.  Joel Sutherland's avatar
    Joel Sutherland
    | Permalink

    @steve Things are testing fine for me here. Could you send over a zip of your project and Ill take a look.

  26.  graeme's avatar
    graeme
    | Permalink

    A strange one here.
    I've created pins for the clickable popup data. They show up fine on my machine and also in localhost. When I upload to webserver the pins don't show and i can't click the areas.
    This is an annoying problem since it seems so simple.
    Help?

  27. Juan's avatar
    Juan
    | Permalink

    I managed to fix the pins that were not showing up by just renaming the html files inside the popups folder to php

  28.  Pratik's avatar
    Pratik
    | Permalink

    @Juan
    your solution worked for me .. :) Thanks

    @Joel
    Thanks for your efforts.

  29.  Ben's avatar
    Ben
    | Permalink

    Top marks for your efforts here, great job Joel! My question is... how can I remove the extra map levels. i.e. I want to have a map that only has clickable bullets with info popups. Cheers.

  30.  Ben's avatar
    Ben
    | Permalink

    Forget my last comment. Got it! Much respect to ya.

  31. aLI's avatar
    aLI
    | Permalink

    Hi;
    I want to duplicate Initial map to show 2 place can be zoom.

    I don't know where I should put the codes,

    can you tell me what should I do?

    Regardes

  32. Ragdoll's avatar
    Ragdoll
    | Permalink

    Ben, I'm trying to do the same thing. If you are still reading this, can you share how you did this?

  33. Joel Sutherland's avatar
    Joel Sutherland
    | Permalink

    Ben and Ragdoll,

    Just set "maps" to a blank string or empty. That should do the trick.

    Ragdoll -- Nice to see your connection to Arbor Day. I am originally from Nebraska!

  34. sam ambrose's avatar
    sam ambrose
    | Permalink

    joel-
    I am still getting the IE6 background image bug... I downloaded the zip file listed above (and have read through the comments) but in IE6 the background disappears when you click to return to the main map.

    Any help would be awesome!

  35. Ragdoll's avatar
    Ragdoll
    | Permalink

    I have two things: one bug and one that may be helpful to others.

    1) Like sam ambrose, above, the background disappears in IE(6&7) when I return to the main map.

    2) I solved my first problem I mentioned earlier in the comments. I'm not sure if Joel's explanation works, but here is what I did. Since none of my maps will ever have bullets, I commented out the "//place bullets" code inside loadRegionData, and then after the "//Create Return Link" code, before the closing load bracket, I added "showPopup($(region).attr('id'));"

    You still need both the <a> and the <div> in the HTML data, though you'll want to use CSS to change the <a>'s visibility to "hidden". You don't have to put all the HTML data in individual files; you can put them all in a single file, as long as everything has its own name.

    Hopefully this helps somebody in the future.

  36. sam ambrose's avatar
    sam ambrose
    | Permalink

    Does anyone have a solution to the IE6 background 'houdini'?

    I am 90% done with launching a new subsite and the map is essential... but like everyone who designs/develops I fall victim to the IE majority when it comes to our target audience.

  37. Joel Sutherland's avatar
    Joel Sutherland
    | Permalink

    Sam,

    Could you send me a link to the site you are working on. I will take a look and see what I find. There are a number of deployments out there working great in IE so it is probably something small.

  38. Matt's avatar
    Matt
    | Permalink

    Joel:

    I just finished an implementation of your plugin, which is really great, as a building map, but IE6 is a problem.

    The map is for a public library.
    http://www.westlakelibrary.org/?q=wpplmap

    My IE6 issues largely have to do with transparencies. I have a hovering transparency for the different regions of the building, and I used blank images linked to popups for rooms and things that weren't suited to the bullets. I'm using transparent pngs. Should I switch to transparent gifs? (maybe not in the scope of your plugin, but thought I'd ask.).

    Thanks for your work. I aim to make another building map for staff as a safety training tool.

    Matt

  39. Joel Sutherland's avatar
    Joel Sutherland
    | Permalink

    Matt,

    Gifs will be easier. There are complications using 24-bit pngs in IE6 -- especially when they are being created and destroyed.

    You can use them, but if you can get away with gif files I would suggest it.

  40. Sam Ambrose's avatar
    Sam Ambrose
    | Permalink

    Joel-
    I've downloaded the zipped folder(above), extracted and placed on the server.

    Here is the url- http://lcmsdistricts.org/zoommap/example.html

    thx in advance

  41. sam ambrose's avatar
    sam ambrose
    | Permalink

    Matt-
    Sorry for the delay...

    My link is- http://www.lcmsdistricts.org/zoommap/example.html

    I also noticed your demo has the same IE6 bg problem-
    http://www.newmediacampaigns.com/files/posts/interactive-map/zoommap/example.html

    thanking you in advance

  42. Ragdoll's avatar
    Ragdoll
    | Permalink

    Has anybody figured out the IE Houdini Bug, yet? I've got a project that is finished except for this problem. I'd love to hear any possible solutions.

  43. Ragdoll's avatar
    Ragdoll
    | Permalink

    This might help get closer to the solution, but JavaScript isn't my strong suit, so I don't exactly understand what's going on here.

    In the displayMap function, there is a variable set called "check", which isn't used anywhere else in the code. Check checks the css background-image. If you put "alert(check);" after this, the background will show up along with the alert.

    Why would this happen? Oh IE, why can you never play nice?

  44. Joel Sutherland's avatar
    Joel Sutherland
    | Permalink

    So does that solve it? If so be sure to send over your changes and I will update the plugin.

  45. Ragdoll's avatar
    Ragdoll
    | Permalink

    It doesn't really solve the problem, because then you have an alert going off every time a new background is set.

    But I don't know why IE won't set the background otherwise.

    I notice it works fine on Sici.org, but they also have the backgrounds fade in and out, which your plug-in does not. I'm going to try to incorporate this into my own code, but I need some time to figure out how to make it work; Sici's code is a little bit different, and I haven't figured out how to duplicate it with what I have.

  46. Mauko Quiroga's avatar
    Mauko Quiroga
    | Permalink

    Joel,

    Recently a client contacted me for a web-related job that includes an interactive map, so your post really help me a lot.

    Here goes my question: In order to catch dynamic data, How'd you do it?

    The facts: You have a CMS relational db with "customers" and "events" published by them ("tomorrow 10% disc. on pizza"), and I want the map to grab the customer data AND the events associated.

    Would you mess directly with database, middleware or framework? Or let the CMS to generate the html on load before jQuery grab that data?

    It will be a charm if you can tell me your opinion about that, since the work you've done seems to be the best aprox. to the solution i was thinking.

    Thank you in advance,
    Mauko Quiroga

  47. Joel Sutherland's avatar
    Joel Sutherland
    | Permalink

    Mauko,

    The data is already being loaded via AJAX. So all you need to do is make sure that your CMS is generating the pages dynamically and you will be good to go!

    Joel

  48. Mina.'s avatar
    Mina.
    | Permalink

    Dear Joel,

    Thank you very much for this great plugin. I am actually building a site and I am trying to use it. Actually, I'm a big novice in java and I only manage to change some elements... I am using the bullets but I also would like to use some bigger "zones" that would have the same effect (same type of popup appearing).
    I tried to create a #map a.zone in the css file but it didn't work... Or is there a way I can do it through the setup.js by changing the 'quads' part? I don't need the zoom, just a popup.

    Thank you for your help!

  49. Joel Sutherland's avatar
    Joel Sutherland
    | Permalink

    Mina,

    You can control the size of the bullets using CSS. You can even control them individually using their ids.

    Joel

  50. Mina.'s avatar
    Mina.
    | Permalink

    Joel,

    Thank you, I've finally managed to do it! (that was just a simple thing I had to change)
    Now I have another problem - sorry to bother you, I guess this is just a simple thing I have not done correctly again but I've been spending hours without figuring out what it could be : the plugin works fine but my other divs now get crazy. The size of the text is automatically reduced and I don't know why.

    If you have time to take a look, I have given the direct link to the page. Thanks again.

  51. Spec's avatar
    Spec
    | Permalink

    Really great implementation of jQuery. I was also wondering if this may be used commercially, and if so, what the conditions are.

  52. Joel Sutherland's avatar
    Joel Sutherland
    | Permalink

    Spec,

    It is under the MIT License so you can do just about anything with it, commercial or otherwise.

  53. Spec's avatar
    Spec
    | Permalink

    Thanks, I actually just stumbled across the mention of the license in the js file. :) Totally awesome.

    I think the only extra functionality that would be really great to add to this would be the ability to toggle the bullet points so that you could show all of x, or all of y bullet points. Probably just a simple addition when it comes to jQuery, but I haven't looked into it yet.

  54. Joel Sutherland's avatar
    Joel Sutherland
    | Permalink

    Spec,

    You can toggle the bullets easily. Just give each one a class (you may have done this already to style them). Then you can do something like:

    $("#redtoggle").click(function(){
    $(".red").show().siblings().hide();
    });

  55. E. Russell's avatar
    E. Russell
    | Permalink

    Hi Joel! First, I would just like to thank you for the great plugin. I was initially building my map in javascript, so I'm really enjoying how much easier this is to work with.

    That being said, I do have a question about something. The problem in my case is that my zoomed regions do not always look proper when resized to the same dimensions as the parent map. I also noticed that if the zoomed region doesn't cover the parent map completely, it is tiled.

    Is there any way to adjust this behavior? Ideally it seems like it should show the parent map underneath if they're not the same size, or perhaps a solid background. Thanks!

  56. Joel Sutherland's avatar
    Joel Sutherland
    | Permalink

    E.,

    You will need to work on the css and the plugin code itself to make this happen. Ideally you could use zoomed regions of the same aspect ratio.

    If you want to have a zoomed region partially cover the map you will need to edit the js that animates on zoom. You may also need to add options to the plugin that allows you to specify dimensions of the maps. It might be a performance issue to measure this dynamically.

  57. E. Russell's avatar
    E. Russell
    | Permalink

    Joel,

    I figured out a workaround for the tiling issue. I simply modified the displayMap() function and appended:

    backgroundRepeat: 'no-repeat'

    where it clears the map and sets the background image. Then to fix the return link I simply changed its CSS to display on the top instead of the bottom.

    This makes it so sub-maps will zoom and look correct even if their dimensions are different. Naturally if the sub-map has a shorter width, you'd probably want to position the return link in the upper left or something.

  58. caugust's avatar
    caugust
    | Permalink

    @samAmbrose on sept. 23 -

    I'm seeing exactly the same thing you are. When I run example.html from my filesystem, it works fine -- the bullets show up (in other words, it's able to find the popup "includes" and read the bullet info like the rel attribute).

    But if I take it and put it on my server with zero modifications and access example.html via http... no dice. The zoomable region zooms, the "return to campus map" link works, but nothing from the popup files is pulled in, and the bullets don't work.

    As far as I can tell it's not a mapping thing. First of all nothing changes, and since it's all relative links with a very basic folder structure, it shouldn't be an issue. But if I hardcode the full URLs, still no dice.

    I'd love to use this, but I'm afraid I'll have to abandon this and keep looking.

  59. macca002's avatar
    macca002
    | Permalink

    Any news on the IE6 problem? I have the same issue when after returning to the main map.
    Click to return to the 'zoomed' area and no bullet points load.
    Thanks in advance!

  60. geert baven's avatar
    geert baven
    | Permalink

    @Juan Thanks for pointing this out. Changing the file extensions to php makes the bullets appear

  61. Toby Miller's avatar
    Toby Miller
    | Permalink

    I like the custom designs that this plugin delivers but I miss the functionality the more complete APIs provide. Did you attempt to apply any custom skinning to one of the existing map api's (i.e. Google, Bing, Yahoo, etc) before going down this path?

  62. Joel Sutherland's avatar
    Joel Sutherland
    | Permalink

    Toby,

    I have used the Google Maps API before -- this was certainly not intended to replace it!

    It was intended to be simple from the beginning. For anything more I would recommend moving to one of the other APIs. I wrote this pre-Bing, but that seems to have an especially good one.

  63. Toby Miller's avatar
    Toby Miller
    | Permalink

    I've shared this with some designers and they're in love with what you've done so kudos to you for that. The other map implementation that I've been impressed with lately is this one:

    http://rideoregonride.com/trails/

    I love how attainable map functionality has become over the past few years. Thanks for adding to it.

  64. Joel Sutherland's avatar
    Joel Sutherland
    | Permalink

    WOW! That map is beautiful. I am originally an Oregon native and a biker so I find it interesting as well!

    Thanks for the kind words!

  65. Butch's avatar
    Butch
    | Permalink

    The inability to create the bullets have to do with script mapping of file extensions on the server. In our case, .html is not allowed for GET and POST.

    The AJAX/load uses GET or POST to retrieve the popup files. So the file extension used has to be what's allowed (.aspx, .php) on your server to accept these requests.

  66. Greg's avatar
    Greg
    | Permalink

    Firstly thanks for the code. I'm pretty poor on coding but would like to use this in a slightly different way by putting an image of a different map in the popup content html rather than using the zoom effect. However when I try to do this the image won't show. It's probably a very basic question I know, but any help would be appreciated.

    Thanks

  67. Joel Sutherland's avatar
    Joel Sutherland
    | Permalink

    Greg,

    If you visit the url source of the popup that is being pulled via ajax can you see the image?

    Are you using a relative or absolute url as the image source?

  68. Kateva's avatar
    Kateva
    | Permalink

    For those with the problem of the popup files not loading (the bullets don't appear). If you're running IIS and a .NET server changing the file names to .aspx (instead of .php) solves the problem as well.

    Thanks!

  69. LadynRed's avatar
    LadynRed
    | Permalink

    "The AJAX/load uses GET or POST to retrieve the popup files. So the file extension used has to be what's allowed (.aspx, .php) on your server to accept these requests."

    There should be a way to enable IIS to handle that type of request so changing file extensions isn't necessary. Off to research!

  70. Greg's avatar
    Greg
    | Permalink

    "Are you using a relative or absolute url as the image source?"

    DOH!!

    Thanks Joel - I always miss the little things! I'll post a link when it's finished. Thanks again for the code.

  71. Ben's avatar
    Ben
    | Permalink

    Mike, to nest additional maps make sure that you have a comma in between each nested map...

    Example:

    maps: [
    {
    id: 'quads',
    parent: 'campus',
    image: 'images/quads.png',
    data: 'popups/quads.html',
    width: '200px',
    height: '232px',
    top: '18px',
    left: '176px'
    },
    {
    id: 'otherMap',
    parent: 'campus',
    image: 'images/otherMap.png',
    data: 'popups/otherMap.html',
    width: '200px',
    height: '232px',
    top: '40px',
    left: '380px'
    }
    ]

  72. Yarik's avatar
    Yarik
    | Permalink

    I downloaded the Project Zip using link above and have trouble with zooming. Plugin working properly only with Firefox (ver. 3.5.7). In Opera (ver. 10.10) and IE 8 zooming works only at first time when html page loaded. What i do:

    1) Open example.html (from Project above)
    2) Click on zoomable region
    3) It zooms with animation
    4) Click "Return to campus map" and it closes
    5) Click again on zoomable region. Bullets fades out, but after it nothing happens. Map becomes inactive (just picture). If i reload page, bullets appears but when i click on zoomable region, bullets fades out and nothing happens. Etc.

    Strange feature in Opera: if you click twice on zoomable region, it zooms and works always, but two zoom maps open.

    I thing something wrong in addZoom function (zoommap.js). In line 135:

    $(this).siblings().fadeOut();

    All right and it works always properly (bullets fade out).

    Line 137:

    $(this).hide()
    .attr('src', region.image).load(function(){
    ...

    Don't work. Maybe something with compatibility of jQuery Load?

  73. Yariv's avatar
    Yariv
    | Permalink

    hey there, great work !
    my website has a page for the map, and a diffrent page acts as an index for all bullets..
    i was wondering if its possible to create links that redirect to the map page and loads the correct map and popup ?
    if possible i would appreciate some guidance :)

    thanks man
    yariv.

  74. Phil's avatar
    Phil
    | Permalink

    Nice plugin, although there's some delay in loading the zoom image and it pops in the first time you click rather than a gradual zoom (in firefox anyway).

    Here's an alternative method I used for a clients site with 4 levels of zoom http://www.venusrock.com/masterplan.asp

    After the first zoom in.. click different areas for popups or click venus rock signature residences to access the 3rd and 4th level of zoom (or click zoom in button down the bottom right)

  75. Denis's avatar
    Denis
    | Permalink

    I just downloaded this and put it on my local machine. Haven't modified anything. The map and the zoom map display fine, but the yellow bullets do not display...what am I missing?

    Denis

  76. Tyler's avatar
    Tyler
    | Permalink

    I am trying to use this in Plone (our CMS) and in Plone I can not use '$' so I replacing all '$' with 'jQuery' and it did not work, I know you arent a Plone person but how should I run this in no conflict mode?

  77. Ron's avatar
    Ron
    | Permalink

    Hi for all that can not get the bullets when integrating with a cms,

    it is most likely a GET or POST setting on your platform.
    I have finally managed to integrate the map into DooPHP with all data being dynamic (js on the fly).
    all map data read from database. next thing up is getting the xy position for frontend so new bullets can be added :)

    Nice plugin!!!

  78. Riogrande's avatar
    Riogrande
    | Permalink

    Hello,

    Is there a way to populate the map with a JSON datasource instead of the html files ?

    Thank you.

    Rio

  79. Tom Grant's avatar
    Tom Grant
    | Permalink

    Riogrande:

    Anything is possible my friend. I'm wrapping up on adapting this really cool script/app to a MODx CMS I have setup for my company's website. I'm using XML as a datasource.

  80. Ben Bishop's avatar
    Ben Bishop
    | Permalink

    There seems to be some sort of issue with the bullets not being displayed in Chrome on the mac. Does anyone have any ideas?

    Cheers

  81. Jan Hanak's avatar
    Jan Hanak
    | Permalink
    Wonderful product, thank you! I wonder, I'd like the popups to appear on rollover and not on click. How/where would I change that? Thanks!
  82. Jonathan's avatar
    Jonathan
    | Permalink
    Hello, thanks for the tutorial, it works great! I'm having an issue though implementing it in IE8. The bullets disappear, though the map is loaded. It works perfectly well in Firefox, Safari, and Chrome, just no IE. I also placed the original demo file up and it didn't work in IE8 either, out of the box. Any ideas? My map is at: http://p2pays.org/mrftest/ Thanks!
  83. Seb Font's avatar
    Seb Font
    | Permalink
    Hi Joel, thank you for the great plugin, i manage to make it work with a very large (2200 pixels) map and made it draggable/scrollable, the bullets are loaded via ajax, everything works fine, however there just a little thing that i can not resolve: how can i open the popups so they appear relative to the selected bullet? the way it's working now makes the popups invisible if you scroll the map, someone?
    thanks - Seb
  84. Raz's avatar
    Raz
    | Permalink
    Great code.

    If people are having problems with using this plugin with IIS, just change the file extensions to .aspx forthe example.html and \popup files.

    .aspx will allow the GET POST verbs in order to make the bullets appear.

    The problem I have is altering the zoommap.js to fix the behavoir with IE 7 and 8.

    I noticed your demos do not exhib this behavior.

    To recap, with IE and Opera if you click the zoom area it will expand as normal but returning to the original map and reclicking the same link causes the bullets to dissapear and all zoom areas to stop working.

    Code fix examples would be helpful.
  85. Brian's avatar
    Brian
    | Permalink
    Nice one dude, outstanding work. Thanks for the share
  86. jan's avatar
    jan
    | Permalink
    Hi!

    Thanks for sharing this great plugin! And thank you so much for spending time writing this. This is just simply what I have been looking for: easy to integrate and no issues with compatibility with modern browsers!

    Again, Thank You!!!
  87. Mike's avatar
    Mike
    | Permalink
    Is there an issue with google Chrome? Your example is fine on most browsers but Chrome. ( Right now I'am using (6.0.472.63), thnks!
  88. nachomaans's avatar
    nachomaans
    | Permalink
    Hello, thank you for the great plugin.

    I'm experiencing the same issue as Yarik:

    - everything works fine with all browsers except IE(6-8)
    - with IE6-8, the map will zoom once, but after going back to the main map and clicking on a zoomable area, all bullets disappear and the map becomes inactive (no bullets, no zoom)

    Has anyone found a solution to this?
  89. Rob's avatar
    Rob
    | Permalink
    Hi great script i can finally make my maps work on ipad, as you know flash is a no go for ipads so this one is great, just a thing i would like to know perhaps someone already found out how to do this, is there a way to make the buttons or in my case icons to make them visible in stead of the yellow square, what code do i add, also is the only way to place the buttons via coordinates or is there a way to drag them on your map, and or perhaps a coordinates plugin or so for images in dreamweaver cs5 thx again
  90. Gareth Price's avatar
    Gareth Price
    | Permalink
    We're using this at Florida Hospital's Global Mission Initiative site to show where our mission trips are serving. Thanks for all the great work!

    http://www.fhglobalmission.com/where-we-serve
  91. Jasper's avatar
    Jasper
    | Permalink
    I have several pages on which I use this great plugin. Some pages do not (yet) have regions on them, only pop-ups so I was wondering how I could hide the button to zoom in when there are no regions behind. Is there an easy if else way for this?
  92. Mark's avatar
    Mark
    | Permalink
    This is a great plugin. I have my map finished but I am trying to find a way to link to the map from another page and have one of the regions already visible when I arrive. For example, if Im on page "A" there is a link that says "View China" and when I click it I go to page "B" which contains the map and the China popup already visible. I tried every possible combination using the functions from the zoomap.js but can't get it to work. I feel like it should be simple. Does anyone have a solution for this?

    Thanks, Mark.
  93. Matt's avatar
    Matt
    | Permalink
    Hey Joel

    Was wondering if there was an IE fix, have got it working with everything else but not IE?

    http://www.campbelljoinerysolutions.com/porfolio.html

    Any help would be great!

    Matt
  94. Antonio's avatar
    Antonio
    | Permalink
    hello to everyone! I hope someone can answer me.

    I'm experiencing the same problem as many of you, as nachomaans says:

    "- everything works fine with all browsers except IE(6-8)
    - with IE6-8, the map will zoom once, but after going back to the main map and clicking on a zoomable area, all bullets disappear and the map becomes inactive (no bullets, no zoom)"

    Has anyone found a solution and can post the code?
    Thanks to all of you and thanks to this plugin: really a great job!

    Antonio
  95. Jasper's avatar
    Jasper
    | Permalink
    Fixed the issue with hiding the zoom button when need be. Was easier then I thought. Now I would like to make the legend work as the map does. Meaning clicking one icon on the legend should activate zooming/map changing on the map. I could add another hotspot on a legend icon, But I wonder how I can make it trigger a map action. Any hints for me g
    GetHiFi?
  96. Joel Sutherland's avatar
    Joel Sutherland
    | Permalink
    Jasper,

    I use a legend in the Photonics example above. All you need to do for zooming is just trigger the click event on the region you want to zoom.
  97. Jasper's avatar
    Jasper
    | Permalink
    Thanks for the quick reply Joel! Any sample of such a trigger would be great. Still a JavaScript junior and am not quite sure what trigger to use. I found something like:
    var link = document.getElementById['yourLinksIdAttrbuteValue'];
    link.click();
    Will play with it and see if that works.
  98. Doosa's avatar
    Doosa
    | Permalink
    HI Tom Grant,

    Would please share how you did it using XML or TXT file as data source inistead of HTML files ?

    Thankyou
  99. John Lopez's avatar
    John Lopez
    | Permalink
    Greetings! Looking for a simple map that can have a custom appearance like this allows, but will take coordinates from a in the HTML. All I need are markers on a custom map, without the need to zoom. Any ideas? Any help is appreciated!

    Cheers,
    John
  100. John Lopez's avatar
    John Lopez
    | Permalink
    BTW, feel free to drop a line directly, thanks so much! invertedcommas -at- gmail

    Thanks again!
  101. Omegakenshin's avatar
    Omegakenshin
    | Permalink
    I wonder how can I do a link from another page on my site, so when is clicked, go to the page with the map and popup the "bullet" that was clicked on the last page.

    Is there a way to do this?

    Because that is what I need to do :D

    Can someone help me??
  102. Dave Filchak's avatar
    Dave Filchak
    | Permalink
    So, I am not sure if this blog is working or not as this is the second time I have posted and my first attempt never showed up. I am still looking for a solution to the map going dead in IE8. In fact, even your example script does not work in IE8 and I have noted a few others here with the same problem.

    Are there any ideas we could try as to how to fix this? I really would like to use this map as opposed to Google or Bing, as we want to show videos etc in the popups but not working in IE is a non-starter for my client.

    Cheers

    Dave
  103. Umit's avatar
    Umit
    | Permalink
    I am trying to implement this in Wordpress but not successfull so far ... What do I have to do ....
  104. Richard Taylor's avatar
    Richard Taylor
    | Permalink
    I absolutely love this, but I can't get past the bug that occurs in IE where you can't zoom to the same map segment twice. Has anyone managed to crack this yet? Any feedback would be much appreciated.
  105. Jasper's avatar
    Jasper
    | Permalink
    Hi Joel,
    I managed to add a legend trigger to trigger a click effect for a zoomable area on the map using jQuery click();. Thanks for the push in the right direction! Now I have one remaining issue. After several zoom ins and outs zooming no longer works until I refresh the page or wait for quite some time. Somehow javascript: void(0); keeps on showing in Firefox bottom bar after zooming out and stays there for a while. I think that is connected to the zoom failure. Do you have any ideas?
  106. Dhaval's avatar
    Dhaval
    | Permalink
    Hi john I have some problem with Google map api. Here I mention the URL of my project. I want hotel icon behind the user image in google map when I click on any user on home page. Please help me out.

    e2v.sapps.in is my project URL
  107. Justin Kees's avatar
    Justin Kees
    | Permalink
    Kyle's comment from above nails how to fix the IE-zoom bug. I managed to modify this how he suggested and get the zoom to work a second time in IE6-8. It will work if you change the following code:

    Line 135 in zoommap.js:
    $(this).siblings().fadeOut();
    $(this).hide()
    .attr('src', region.image).load(function(){
    $(this).fadeIn('slow')
    .animate({
    width: width,
    height: height,
    top: '0px',
    left: '0px'
    }, settings.zoomDuration, '', function(){
    displayMap(region);
    });
    });

    to this:
    $(this).load(function(){
    $(this).fadeIn('slow').animate({
    width: width,
    height: height,
    top: '0px',
    left: '0px'
    }, settings.zoomDuration, '', function(){
    displayMap(region);
    });
    });
    $(this).siblings().fadeOut();
    $(this).hide().attr('src', region.image);

    This is an amazing plugin Joel. I'm starting my project with it now and I'll post a link when I'm done. Great work!
  108. Jasper's avatar
    Jasper
    | Permalink
    I managed to trigger a zoom effect using the legend button links using the jQuery click() function:
    jQuery(document).ready(function ($) {
    $('#one-button').click(function() {
    $('#one').click();
    //several more button click functions added
    });
    });
    Only one other issue that seldom but all the same still occurs is still baffling me. Sometimes the zooming and and out no longer works until the page is refreshed or after waiting a minute or so. In Firefox I see javascript: void(0); when that happens and until that line in the FF footer disappears I cannot zoom. Any ideas how I can remedy this? Maybe I need to adjust my added legend zoom trigger JavaScript file? Many thanks again for any tips!
  109. Nikita's avatar
    Nikita
    | Permalink
    Thank you very much for this tutorial!
    Very helpful. It is exactly what I was looking for!
  110. James's avatar
    James
    | Permalink
    Hi, THanks for the excellent plugin, I've just launched it on a clients site with over 40 maps if you want to take a look: www.worldwidediveandsail.com
  111. Jasper's avatar
    Jasper
    | Permalink
    Been having some problems with this plugin for a project of mine. After a few map clicks, especially on a page with nested maps, the clickable regions no longer respond in IE7/8. Therefore regions no longer work after a while. This even though there are a maximum of three layers only. I was told the slowness might be due to the ajax call every time and until ajax response is received the tool keeps waiting. Any way to make the map work better, even after several clicks. Any ideas how to make things run smoothly?
  112. Samim Saka's avatar
    Samim Saka
    | Permalink
    Thank you for this great work.

    I have still problems to putting these numbers near points, though I am not so stupid.
  113. Samim Saka's avatar
    Samim Saka
    | Permalink
    Thank you for this great work.

    I have still problems to putting these numbers near points, though I am not so stupid.
  114. Samim Saka's avatar
    Samim Saka
    | Permalink
    Thank you for this great work.

    I have still problems to putting these numbers near points, though I am not so stupid.
  115. Samim Saka's avatar
    Samim Saka
    | Permalink
    Thank you for great work.

    I have problems with putting text near icons? Just saw on an example of this script.
  116. Mark's avatar
    Mark
    | Permalink
    No Bullets Show ...
    We checked all paths in CSS and JS files, are using a GIF for the bullet image, still nothing. Zoom feature works great, just no bullets (all browsers). We're also using PHP files.
    This issue is causing me to pull my hair out!
  117. chris camera's avatar
    chris camera
    | Permalink
    Nice piece! Did anybody figure out the ie issue?
  118. dennis elder's avatar
    dennis elder
    | Permalink
    Anyone have issues with jQuery 1.4.2? Not getting it to work...what do I need to change?
  119. Mark's avatar
    Mark
    | Permalink
    We initially had weird issues with some browsers not rendering the bullets / markers. Looking at the JS, the path to our page didn't include "www" -- after adding that in to the absolute path, everything was working great. Hope this helps someone else...
  120. kasper's avatar
    kasper
    | Permalink
    one of my friends who has firefox 3.0 said there were no bullets on the image ? I checked it on my firefox and it is ok check on my IE ok check on chrome ok

    What can be the cause?
  121. العاب's avatar
    العاب
    | Permalink
    hello, first thank you for this very cool map
    but how i can but a marker and move it?
    thank you
  122. Brandon Backlin's avatar
    Brandon Backlin
    | Permalink
    Hey Joel, just dropped by to let you know we're implementing this awesome plugin on our site as well. Live development can be followed at: http://www.openthewindowrally.org/zoommap/example.php. Thanks for writing it, it was exactly what I was looking for.
  123. kasper's avatar
    kasper
    | Permalink
    Hello,

    I noticed that on some computers it doesnt work on all browsers- bullets do not show anyone knows the reason?
  124. Leon Zackoski's avatar
    Leon Zackoski
    | Permalink
    Excellent Work, One question Joel I am not any jquery master by any means. I would like to add multiple bullets with different colors, but have tried with no success. If you could help I would appreciate it.

    Thanks Lzackoski
  125. Eric's avatar
    Eric
    | Permalink
    Wondering if this work properly on a mobile device?
  126. Erica Gilbert's avatar
    Erica Gilbert
    | Permalink
    I am having trouble nesting another zoomable map within the same main image. How do I go about doing this?
  127. Beth's avatar
    Beth
    | Permalink
    Hi Jasper, greets from Aruba, we want to check is the HTML for the bullets can be PHP pages (ID instances) of posts on a WP Framework. Any tips on how to accomplish this?
  128. bithesh's avatar
    bithesh
    | Permalink
    I am verymuch interested in your coding....in this can i gave a mouse over message for each and evry region.....if so what i want to do pls specify the code......
  129. bithesh's avatar
    bithesh
    | Permalink
    how to give a tool tip message or title message to a pop up region
  130. Josie's avatar
    Josie
    | Permalink
    Hey there,

    This map is great and perfect for a project I am working on. I wanted to know if this could be implemented on a word press site? And if the content could be generated by the pages and posts.

    Thanks!
  131. Denis's avatar
    Denis
    | Permalink
    Hello,

    I need to make a world map in JS with dynamics things, exactly as your plugin do.

    But there's an issue displaying the bullets on Chrome (10.0.648.204), they just don't load. Does anybody fixed this?
  132. Erica Gilbert's avatar
    Erica Gilbert
    | Permalink
    I cannot get my bullets to load. They preview fine in Dreamweaver, but once taken to the server, they disappear. Any thoughts? You can view here:
    http://chetest.iu.edu/aamep/maps.html

    I checked my paths, and rechecked, and typed in the whole URL... nothing.
    I thought maybe it was a z-index problem... is that possible?
  133. Steve's avatar
    Steve
    | Permalink
    bullets/highlights don't show with Mac Chrome latest version as of 4/1/11.

    Demo works with Mac Safari except zoomed map fragment..top right 'bullet' doesn't respond but no errors.

    Thanks for this plugin! Not sure if I can use it for my project but I'd like to. The project I'm working on is a web based floorplan that allows user to scroll/zoom/click a floorplan to select a room, then show computers listed in the room as well as data jacks, etc. Click a computer and get info. I want the room to be editable by user as well .
  134. Brett's avatar
    Brett
    | Permalink
    Jasper / Joel,

    Did you end up making the legend work as the map does?

    This is what I am trying to achieve - When a legend item is clicked on, I would like the map specific to that legend item to zoom in. Any help would be great.

    Thanks
  135. Vegim's avatar
    Vegim
    | Permalink
    Hello,

    As many other comments, this is absolutely wonderful! I have a question about the popupCloseSelector function - it's set in setup.js as well as zoommap.js. I changed it in both places and am unable to figure out how to get close working in an unordered list menu (like horizontal navigation).

    I tried putting my full navigation styling under the popup class, because the a selector is for popup a.close - I also tried to put it in it's own div for organization purposes on my end.

    Any help would be appreciated - basically, what's the best method for moving the close link around the popup box? My map is on a company intranet and am unable to share - sorry!

    Looking forward to hearing any comments.
  136. Erik's avatar
    Erik
    | Permalink
    Hi Joel:

    Thank you for your work on this map function. I would like the pop-up info windows to appear in the visible browser window rather than an absolute position relative to the map point. Is there an easy to make the pop-up layer appear centered in the map as a lightbox rather than use the dotted line position? What would we need to change in this code?

    function showPopup(id, leftbul, topbul){
    map.find(settings.popupSelector).fadeOut();
    $('#mapline').remove();
    var boxid = '#' id '-box';
    topbul = topbul.replace('px','');
    var topbullet = (parseInt(topbul) 50) 'px';
    leftbul = leftbul.replace('px','');
    var leftbullet = (parseInt(leftbul) 20) 'px';
    $(boxid).css("top",topbullet);
    $(boxid).css("left",leftbullet);

    $(boxid).slideDown();
    topbul = parseInt(topbul) 6;
    leftbul = parseInt(leftbul) 3;
    map.append("");
    $(settings.popupCloseSelector).click(function(){
    $('#mapline').remove();
    $(this).parent().fadeOut();
    });
    }
  137. Joe Smith's avatar
    Joe Smith
    | Permalink
    Does anyone have any information on how to convert the source into XML for this?
  138. Anes's avatar
    Anes
    | Permalink
    Hi Joel and other members,
    Your work is amazing, But I got a requirement map model(which is in flash actually), I need to implement same using jQuery. My required model url is : http://www.bww.com/Common/International.aspx
    there map is implemented in Continent basis . please click there then you really amazing .... please help me to do same. You can please contact me at anes(dot)pa(at)gmail.com

    Thankfully,
    Anes P.A
  139. Oriza's avatar
    Oriza
    | Permalink
    Nice Info..

    Good looking Map, i like it.
  140. Wizzyboom's avatar
    Wizzyboom
    | Permalink
    Any chance anyone who was having trouble with getting bullets to display once the code is running through a web server fixed the issue? When I run the code off of my local file explorer everything runs fine but once I upload everything to a web server (IIS) the bullets will not load.

    It looks as though when the popup data .html file isn't loading within the #map div. So the loop looking for the 'a.bullet' children is unsuccessful. There's no error, it just can't find anything because nothing is getting pulled.

    Please, please, help.

    Thank you,

    WizzyBoom
  141. Wizzyboom's avatar
    Wizzyboom
    | Permalink
    Of Course!!!

    As soon as I finally break down and submit a posting I figure out this issue.

    However, unlike other solvers out there, I will post what I've done.

    For those who may find themselves in this same situation where their bullets are not loading once they upload their code to a web server.

    In my case, within zoommap.js on line 82: map.load(url, {}, function(){

    Try removing the {}, from the .load() method and try it again.

    That was what I needed to do for it to work, it may or may not be the case for you.

    Best of luck!

    WB
  142. matt lee's avatar
    matt lee
    | Permalink
    Joel, For a larger map where you wouldn't want to scroll to see the popup, how do you place the popup a certain distance from the bullet?

    Thanks for your help

    Matt
  143. Douglas's avatar
    Douglas
    | Permalink
    Joel,

    Fantastic plugin! Thanks so much.

    I have the second level zoom working, but cannot, for the life of me, figure out how to get a third level zoom to work.

    I understand how to get more than one zoomable region on the initial map (thank you, Ben, for showing where to put the comma between individual map code blocks) but I cannot figure out how to punctuate the code for a third level zoom.

    From the original demo code, the following block produces the clickable rectangular region on the initial map:

    id: 'quads',
    parent: 'campus',
    image: 'images/quads.png',
    data: 'popups/quads.html',
    width: '200px',
    height: '232px',
    top: '18px',
    left: '176px'
    /* More maps can be nested
    maps : [ ]
    */

    The above code creates the clickable rectangular area on the initial map that takes site users to the second level map "quads.png".

    I, however, want to create another, third level zoom-in region on the quads.png map, let's say, north-quad.png, but I can't figure out the code. I tried this:

    id: 'quads',
    parent: 'campus',
    image: 'images/quads.png',
    data: 'popups/quads.html',
    width: '200px',
    height: '232px',
    top: '18px',
    left: '176px'
    /* More maps can be nested
    maps :
    [
    {
    id: 'north-quad',
    parent: 'quads',
    image: 'images/north-quad.png',
    data: 'popups/north-quad.html',
    width: '200px',
    height: '232px',
    top: '18px',
    left: '176px'
    }
    ]
    */

    ... as well as a few dozen variations, but I can't get the second level zoom map (quad.png) to have a clickable region that goes to the third level north-quad.png map.

    I'd be grateful for any and all suggestions. :)
  144. John's avatar
    John
    | Permalink
    Hello, nice plug you've made here. Does anyone have an idea whether the map can hold 2000 locations?

    Thanks!
  145. amori's avatar
    amori
    | Permalink
    hy,
    why there is just zoom of images, whend i get it online ? Offline, there is no problem, all function. Thanks for your answers.
    Amori
  146. amori's avatar
    amori
    | Permalink
    Your exemple no function online.
    Amori
  147. Chuck Borowicz's avatar
    Chuck Borowicz
    | Permalink
    I'm a little late to the conversation, but I've been working with the demo files for about a week now and things are looking good in every browser except for Chrome. This seems to be a common question. Is there a solution for getting the bullets to show up in Google's browser?

    Thanks in advance!
  148. Tisna Rudi's avatar
    Tisna Rudi
    | Permalink
    first of all i would like to say thank you for the script. I use it for bandung city interactive map in my website:

    http://www.bandunglokalbisnis.com/peta

    I use city map which the file size is about 440 Kb (2176 x 2304px) and background image for pop up with picture or video.

    Any suggestion how to add preload image animation while loading? Such as horizontal bar or preload circle animation with text "please wait while loading ...."

    I know HTML and CSS, but i don't understand much about javascript and jquery.

    Thanks in advance.
  149. Anthony's avatar
    Anthony
    | Permalink
    I've implemented a separate nav of region names that triggers the corresponding region on the map just as when clicking the a.bullets class. But when I put the nav in a separate div so I can properly position it, the link don't work.

    Something like this works
    $(this).children('a.bullet, a.navLink').each(function(){

    But if you put a.navLink elements inside a div, no dice.

    Any thoughts?
  150. Andy's avatar
    Andy
    | Permalink
    Hey Joel,

    fantastic work...really appreciate this!

    Currently working on various select fields so people can narrow down the results they see on the zoomed sections, but am having a really tough time getting the value of the select field to update the map data.

    I had added something along the lines of what Jasper had done, but with no success:
    var social_housing_type = document.getElementById('social_housing_type').value;
    social_housing_type.focus() ;

    Any thoughts on how I can tie this in?

    Thanks again!
  151. Heath's avatar
    Heath
    | Permalink
    I am trying to set up you map plugin to use an multiple image areas as the trigger, is there a quick method to set the trigger?
  152. Adam Bell's avatar
    Adam Bell
    | Permalink
    Great script and so lightweight! I just stumbled upon this and it's almost perfect for an upcoming project I'm working on. One question though. I know you have to set up to allow for the map to enlarge on click or mouse over, but I was wondering if there's a way to control it via a dropdown/pulldown menu? In other words, let's say we have a global map and a pulldown menu of continents. You select North American and then that PNG graphic zooms out on the screen. Select another continent like Europe on the pulldown and a different map zooms in. Is that doable using these scripts? Has anyone tried?
  153. Adam Bell's avatar
    Adam Bell
    | Permalink
    I've been playing around with the plugin and what it can do and it really looks like something I really need for an upcoming project. However, I'm wondering if the only way to zoom in/out of a map is by clicking? My client would prefer to use dropdown menus where you select a continent from a dropdown and then the map zooms in to the continent selected. Is there way to do that using Joel's method?
  154. Vinod's avatar
    Vinod
    | Permalink
    Great Work Joel,

    I do not think the example satisfies cross browser matrix. The bullet points are not visible in chrome. It would be great if you could give a fix for it.

    I am assuming rel is not supported in all browsers.

    correct me if I am wrong.

    Thank you!

    Great Work.
  155. G-Admin's avatar
    G-Admin
    | Permalink
    Hi everybody,

    I've detected a hosting server issue, what is the reason for the disabled bullets and popups! My example is working on GoDaddy.com but on 1and1.com I have no bullets and pop-ups! The reason is the server js and css linkink. If somebody has a solution please update me.

    Example files are hosted on:

    - GoDaddy http://www.novaskinproducts.com/map/example.html

    - 1and1 http://miami-midtown.com/map/example.html
  156. Nigel's avatar
    Nigel
    | Permalink
    Hi

    I think this is a fantastic script..

    I'm planning on using it on a website without the zoom effect and have shown it in test to several people of which two requested that it displays the location on mouseover. i.e. The location name on hovering over the bullets. Is there a simple way to do this? Ideally a hidden layer that displays the place name next to the bullet.

    If it's complicated don't worry but it would be a nice addition.

    Thanks

    Nigel
  157. Doug McDaniel's avatar
    Doug McDaniel
    | Permalink
    Joel,

    not sure if you're still watching this thread, but was curious if the example file is up to date. The bullets display in IE8 but the zoomable quad won't zoom. Conversely, in Chrome, the quad zooms, but the initial bullets don't display. Any help appreciated.

    Thanks.
  158. Charlie's avatar
    Charlie
    | Permalink
    Is there still support for this plugin? I've been playing with it the past couple days, locally it works great in FF, but not Chrome of IE7, the bullets are not showing up. When on I've placed it on a couple webservers, no bullets in any browser. I've tried switching the .html data lists to .php and .aspx, still no luck.
  159. Daniel's avatar
    Daniel
    | Permalink
    http://webmapcreator.shaimad.pl/ - something that may help if you don't like to create configuration scripts for this very nice plugin.
    It's early version, probably there are many bugs bu works :)
  160. Daniel Madejek's avatar
    Daniel Madejek
    | Permalink
    http://webmapcreator.shaimad.pl/ - Hi, I wrote this small program which makes generating configuration files and poi files much easier.
    Early version but it should work.
  161. rub's avatar
    rub
    | Permalink
    Like your maps, tried the demo but there is a problem, maybe only for me, in IE.
    When opening the zoomed map and going back to the main you can not open the zoomed again.
  162. Eleanor's avatar
    Eleanor
    | Permalink
    Hi, this an awesome tutorial!! and some of the best interactive (non-flash) maps I've seen. I was wondering if there is a wordpress plugin for this or any documentation on how to integrate this into a wordpress page.
    Thanks
    Elle
  163. Anuj Jindal's avatar
    Anuj Jindal
    | Permalink
    Popup not working in asp.net

    How can we use this jquery properly in asp.net

    Image zooming was functioning but popups are not
  164. Krupa's avatar
    Krupa
    | Permalink
    Hii!
    I want to create a map of human chromosome. By clicking onto a position, it will show the disease information. Kindly help me with the code. thanks.
  165. Chris Raymond's avatar
    Chris Raymond
    | Permalink
    Thanks for this script Joel, I adapted it for use on a history site: www.teachinghistory.org/civil-war. The only problem we've been experiencing is similar to some above, in Safari only, the second time you load one of the zoom maps, the popup html file doesn't load. This happens only once the page is ported into a Drupal site, and the error we get is 412 Precondition Failed, which seems to have something to do with how Safari handles http requests inside a Drupal site. Our developer is trying to figure out the problem.
  166. Mark's avatar
    Mark
    | Permalink
    Dead link to project?
  167. lei's avatar
    lei
    | Permalink
    Joel Sutherland,
    Before I get started developing my school interactive map, I read through the Comments first and have the urge to say thanks to you, people like you make our lifes easier and thanks a lot for your selfishless sharing and persistent afterwork! Appreciate in advance!
  168. John's avatar
    John
    | Permalink
    Could you let me have a copy of the zip file as the link doesn't work anymore.

    Thanks a lot
    John
  169. John's avatar
    John
    | Permalink
    Could you let me have a copy of the zip file as the link doesn't work anymore.

    Thanks a lot
    John
  170. Orestis's avatar
    Orestis
    | Permalink
    Hello.I want to get this plugin so as to use it in my thesis.When I click on the download as project zip button it says that "406 Not Acceptable
    Unable to provide desired content-type. Does the view "hifi/error/404" exist?".Could you help me please?

    Thank you very much,
    Orestis Meikopoulos
    Department of Communication and Computer Engineering University of Thessaly
    Volos,Greece
  171. Clinton Green's avatar
    Clinton Green
    | Permalink
    Hi, thanks so much for writing this plugin. I have used the script in your Project Demo, with the modification to get it working 100% in IE. I am trying to add the FadeIn animation to the FadeOut when you return to the first map. Currently there is no animation for the fadeOut. Can you please tell me how to accomplish this. Thanks
  172. Jonathan's avatar
    Jonathan
    | Permalink
    How can I use a lightbox instead of the popup box?

    The current popup box has its limitations esthetically and it positions itself relative to the marker, which is a problem as it gets cut off when its close to the map border.

    A lightbox could be used and centred over the map. A lightbox would offer a POI selector, so you could stay within the lightbox to view neighbouring POIs, or close it and click on a more distant POI.

    PrettyPhoto is a lightbox clone that displays inline content very nicely (in my experience).

    Also be interesting to pull data for each marker from a mysql database rather than typing it into html. You would need to identify the id for each point.

    Any suggestions on this?
  173. lei's avatar
    lei
    | Permalink
    @juan
    Thanks, I renamed the data files into .aspx and bullets showed up.
  174. John Pantzopoulos's avatar
    John Pantzopoulos
    | Permalink
    Hi Josh,

    I was hoping to get some help regarding your map?

    I've implemented it without problem, works great! But now I would like to add more than one bullet point, and I can't see any other way of doing it, other than changing the AJAX which I'm not experienced enough to do.

    Hopefully you've got an easier way of doing it?

    John
  175. riznel's avatar
    riznel
    | Permalink
    hey joel nice work!!!=) this is what im looking for=)... but i have a few questions ... can you be able to PAN on the map???? and how can you add new spots???? thanks by the way... nice work!!
  176. asdasd's avatar
    asdasd
    | Permalink
    adawdwadaw
  177. blitz's avatar
    blitz
    | Permalink
    nice work!!! ... i have few questions... where you able to PAN the map???
  178. Jonathan's avatar
    Jonathan
    | Permalink
    Hey everyone,

    Just curious if someone could give me an idea of how to connect the pop-up boxes with a mysql. Every pop-up box has an ID# so

    147

    147



    Close




    I have the database set up and some test data in there.

    This is some php I wrote up.

    Now how do I mash everything together?

    <?php <br /> // Connect to Database
    mysql_connect("mysql.host.com", "user id", "password") or die(mysql_error());
    mysql_select_db("database_name") or die(mysql_error());
    $data = mysql_query("SELECT * FROM table_name WHERE lot_number='id'")
    or die(mysql_error());
    Print "";
    while($info = mysql_fetch_array( $data ))
    {
    Print "";
    Print "Lot number: ".$info['lot_number'] . " ";
    Print "Status: ".$info['status'] . " ";
    }
    Print "";
    ?>
  179. Vladimir's avatar
    Vladimir
    | Permalink
    Hi Joel, thanks for creating such a cool jquery plugin - exactly what I was looking for.

    I noticed that your demo project doesn't seem to work right - I don't see any bullets on your demo project like I see on other showcase websites.

    Tried in latest FF, Chrome, IE and Safari.
  180. jjperezaguinaga's avatar
    jjperezaguinaga
    | Permalink
    First of all, as Dean said, thanks to Pratik, Joel and JPS for this plugin. I'm currently working on it right now for a specific project within the company I'm working on.

    Due the nature of my project, I will not only twitch it as a full customized plugin, but also twitch it as a Wordpress plugin (fun huh?). I was wondering if you would mind me to develop this project as a Open Source project (I'll share you my github as soon as I set it up).

    So, what do you say? Maybe someone around here will be interested in help me too, so I'm writing it here.

    -JJ
  181. Rebecca's avatar
    Rebecca
    | Permalink
    Hi Joel,

    You wrote to Mina
    http://www.gethifi.com/blog/a-jquery-plugin-for-zoomable-interactive-maps#comment-fff5b66f025a4f93b99bcf0bab4f04ba

    That the bullets can be styled indvidiually by their "ids" can you give me a sample CSS

    I have a bullet area I want 200px by 20px

    a href="javascript:void(0)" id="porter-kresge-list" class="bullet" rel="797-153"> 


    Cowell Stevenson

    Dining Hall



    Insert Dining Location info here along with an image.

    Close
  182. Pat's avatar
    Pat
    | Permalink
    nice map. how do you add a second, third etc sub-map to the code? If I put in a new id under maps: it will only show the last one added.
  183. Alexandre Oliveira's avatar
    Alexandre Oliveira
    | Permalink
    Hi there! I uploaded the original script into 2 servers. On the windows server (http://www.visualmagico.com/material/mapa/example.aspx) the bullets don't appear. On a linux server (without changing the file extensions) it works fine. Can you please help? the web site that I want to implement is all on asp, and I need to work on a windows server.

    TKS A LOT!

    Kind regards

    Alexandre (Portugal)
  184. blitz's avatar
    blitz
    | Permalink
    hey man great work!!!! ive just google this thing and it pop ups.... i appreciate this jquery plug in but i have few questions ...how could you add additional zoomable regions in the map???
  185. Domenico Grottoli's avatar
    Domenico Grottoli
    | Permalink
    hi man,
    i try and use your pluign for a site.
    It works on a local machine but it doesn't work on-line.
    Have you any answer for this problem?
  186. Domenico Grottoli's avatar
    Domenico Grottoli
    | Permalink
    hi man,
    i try and use your pluign for a site.
    It works on a local machine but it doesn't work on-line.
    Have you any answer for this problem?
  187. Michał's avatar
    Michał
    | Permalink
    I have a problem. Is there any possible way to correcrly use plugin on Chrome or Opera?

    Thanks for reply.
  188. Kelvin's avatar
    Kelvin
    | Permalink
    Great plugin and thanks for sharing your work! I am trying to set the max-height of the popups but it doesn't work in IE9 by specifying max-height for the div.popup class in zoommap.css. It does work in FF though. Although IE9 is supposed to support the max-height attribute, I simply cannot make it work with zoommap. Any thoughts? Thanks again!
  189. Brian's avatar
    Brian
    | Permalink
    Hi Joel,

    Great plugin! I love it. However, I'm having trouble in ie8 being able to zoom in once I've returned to the parent map. I noticed a few other people have experienced the same issue, but I haven't seen a solution. Would you be willing to offer a suggestion? I would really appreciate it.

    Here's my map:
    http://staging.www.franklinstreetfinancial.com/TestZoom/map.html

    Kudos on the nice work, and thanks in advance.
  190. pd's avatar
    pd
    | Permalink
    Some nice code but you really should either a) replace the search for .bullet with a .hasClass or make it obvious in your documentation that the bullet links will not position themselves properly on x or y coords if they do not have a class of bullet and bullet only.

    Line 84 is the problem:

    $(this).children('a.bullet').each(function(){

    Should probably be:
    $(this).children('a').hasClass('bullet').each(function(){

    That would make the code more friendly in that developers could put in other classes in the links if they wanted to.
  191. Chris's avatar
    Chris
    | Permalink
    Thank you so much for this. Works a treat!

    Chris
  192. Adam's avatar
    Adam
    | Permalink
    I'm looking for an IE8 fix.

    Everything seems to be working great in the all other browsers, but IE8. I seem to be experiencing the same bug as mentioned by many others (where the initial zoom works fine, but after returning to the original map and trying to zoom again, nothing happens).

    Can any provide advice or the fix?
    Thanks!
  193. Adam's avatar
    Adam
    | Permalink
    I'm looking for an IE8 fix.

    Everything seems to be working great in the all other browsers, but IE8. I seem to be experiencing the same bug as mentioned by many others (where the initial zoom works fine, but after returning to the original map and trying to zoom again, nothing happens).

    Can any provide advice or the fix?
    Thanks!
  194. Andrey's avatar
    Andrey
    | Permalink
    Excelente Gracias
  195. Zee's avatar
    Zee
    | Permalink
    Hi Thank you so much for the demo and instructions on making a interactive map! It's what I'm looking for. Does this only work through the CMS or can this be utilized without working through a CMS?
  196. Domenico's avatar
    Domenico
    | Permalink
    doesn't work on site.
    This is the link:
    http://www.mglegnoarredo.it/it/mg-legno-arredo/rivenditori-e-partners.html
  197. Low Choon Keat's avatar
    Low Choon Keat
    | Permalink
    Thanks for sharing. Is very nice job done.
  198. cody's avatar
    cody
    | Permalink
    Hey Guys,
    im trying to get one map with multiple zoomable regions and this code is not working,(does not display more than the first region.) not sure why. Wondering you could take a look and see if something jumps out. Thanks
    map: {
    id: 'paddle',
    image: 'wp-content/themes/Accessibility/images/map/main-map.jpg',
    data: 'wp-content/themes/Accessibility/map-info/main-map/main-zoom.php',
    maps: [
    {
    id: 'paddle-zoom',
    parent: 'campus',
    image: 'wp-content/themes/Accessibility/images/map/paddle-zoom.jpg',
    data: 'wp-content/themes/Accessibility/map-info/main-map/main-zoom.php',
    width: '300px',
    height: '280px',
    top: '10px',
    left: '10px',

    maps : [
    {
    id: 'paddle-zoom2',
    parent: 'something',
    image: 'wp-content/themes/Accessibility/images/map/paddle-zoom.jpg',
    data: 'wp-content/themes/Accessibility/map-info/main-map/main-zoom.php',
    width: '300px',
    height: '280px',
    top: '500px',
    left: '10px'
    }
    ]

    }
    ]

    }
  199. Matthew's avatar
    Matthew
    | Permalink
    I really like this effect. looks great on al browsers except IE9. the map does not show at all in IE9. any ideas why?
    take a look:
    http://test.ecendantdev.com/paraMap/map.html
    Thanks for the help and the great script.
  200. Mary Ann Lawrence's avatar
    Mary Ann Lawrence
    | Permalink
    Hello,

    Thanks for the great plugin. I am wondering if there has been any development toward a bullet hover effect that would display a title attribute or something similar to that. I'd like the location name to display when the bullet is hovered over, prior to the onclick where the popup box dispays.

    Thanks again. I should have a sample soon.
    Mary Ann

Leave a Comment