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 ;)

This is an awesome effort, thankyou for making it!

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.

Very nice. Can this script be used commercially? If so, please get back to me with licensing terms and conditions.

Keonne

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

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

@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

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...

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

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!

@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

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

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

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

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.

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

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

Thanks! - Steve

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!

@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!

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 :-)

hi. i have the basic problem of creating child maps in the setup.js

Do i replicate the map:{} code or maps : [{}]? Tried the latter but the page turned blank..changed even the maps : [id: field]
someone pls help!

fixed my problem..have a new one..I am able to access only one map outta four though ive changed the map id and image location

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?

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

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

@Joel
Thanks for your efforts.

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.

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

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

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

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!

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.

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.

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

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

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

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.

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?

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.

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

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!

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.

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

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.

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!

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.

@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.

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!

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

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?

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.

plugin is verry nice and thankk you for sharing :D

I downloaded your project and uploaded it as-is to our testing server and the live server.

Testing server:
http://alpineadvertising.com/in2wireless/zoommap/example.html

Works!

Live server:
http://mycellularcenter.com/zoommap/example.html

Doesnt work : {

Any ideas why its not working? What sort of server setting would cause it not to work?

I believe for servers are windows based. I even changed the filenames a bit because I know windows is picky about filenames.

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.

hi thanks for your plugin really amazin. i have a "newbie" question: i cant add any other subregion. i tried puttin maps : [ bla bla ] under the initial region map, i tried also adding the new subregion beetween { } and nothing, a blank page appear. i tried on safari and firefox latest version, on Leopard. any suggestion? :\
regards

Hi.
I 'm leaving a post because I work on the plugin and I meet a difficulty. I use a cms and so I have to implement the plugin dynamically.
So in the cms I have a page with a list of blocks which represents the future bullets with information. In this page I call two files .js (zoommap.js and the file I developped). So I don't use setup.js as I want to call data in my .js file

My file.js create dynamically in jQuery the structure HTML by using DOM. Then i call the plugin

$('#map').zoommap({
width: '699px',
height: '503px',
//Initial map to be shown
map:{
id: 'map',
image: 'here I wrote url and it plays well',
data: 'here I don't find any solution'
}
});

So I would like to know the url I have to put in data or could it be a variable (as I create the structure dynamically).

Or is it a wrong way?

Thanks very much for your help.

Plugin works fine no problems at all! very good job! keep on..

great plugin.. 'm going to try it on my next project

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

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!

"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!

"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.

Ragdoll: I tried your solution from october 7th to get the map to refresh in ie6. it will only work with the alert. am i missing something. i placed the

map.css('display','none');
map.css('display','block');

15 plus times after the

'var check = map.css('background-image');

my placement may not be right? anyway, is there a way to have the screen refresh from the 'return to full map' link?

thanx.

how to add an additional nested map? please help me posting an example code, i cant find out :(

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'
}
]

Hey wow! I was going to reinvent the wheel... Lol!

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?

Hi Joel,

Can your component map a floor plan of a building and do you have any demos for that ? Thanks

Eric

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.

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)

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

This project dosen"t work well on Ie 6, ins"t it? I tested and i saw that.

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?

Is it possible to have the popup show on mouse over the bullet?

Why does not work in Opera 10.10, there is no area increase, all disappears?

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!!!

Hi,
Really nice plugin, is there a way to connect it to a database (drag&drop bullets on the map) ?

Thanxxx

ImIn

Hello,

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

Thank you.

Rio

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.

just figured out muy issue and thought I would pass along. Had the bullets showing up in local environment, but not the server. My server is a .NET environment. Renamed the html pages in the popups folder to .aspx extensions and the bullets show up.

that's it.

thanks to share; great