A jQuery Plugin for Zoomable, Interactive Maps
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 |
 |
 |
 |
| 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.
Comments
Geof Harries
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 ;)
Joel Sutherland
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.
Kevin
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.
Joel Sutherland
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.
Joel Sutherland
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.
Steve
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
Pratik
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
Joel Sutherland
@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.
JPS
@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
Luther
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...
Steve
@Joel - Just in case my email is: sts at ihosttech.com
Almar
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!
Dean
@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
Joel
@all I am on the road today through Monday. Ill look at these issues and let you know what I find early next week.
dean
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
dean
scrap last comment - worked it out - was missing a comma between maps! doh!
chris
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.
dean
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 Sutherland
@chris @dean
The bug with the original map background image disappearing in IE6 has been corrected. The zip has the updated files.
steve
@Joel - Any luck with figuring out why my 3rd level maps won't work with return link?
Thanks! - Steve
Kyle
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!
Kyle
@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!
Kyle
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 :-)
Joel Sutherland
@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.
Joel Sutherland
@steve Things are testing fine for me here. Could you send over a zip of your project and Ill take a look.
graeme
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?
Juan
I managed to fix the pins that were not showing up by just renaming the html files inside the popups folder to php
Pratik
@Juan
your solution worked for me .. :) Thanks
@Joel
Thanks for your efforts.
Ben
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.
Ben
Forget my last comment. Got it! Much respect to ya.
aLI
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
Ragdoll
Ben, I'm trying to do the same thing. If you are still reading this, can you share how you did this?
Joel Sutherland
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!
sam ambrose
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!
Ragdoll
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.
sam ambrose
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 Sutherland
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.
Matt
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 Sutherland
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.
Sam Ambrose
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
sam ambrose
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
Ragdoll
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.
Ragdoll
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?
Joel Sutherland
So does that solve it? If so be sure to send over your changes and I will update the plugin.
Ragdoll
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.
Mauko Quiroga
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
Joel Sutherland
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
Mina.
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 Sutherland
Mina,
You can control the size of the bullets using CSS. You can even control them individually using their ids.
Joel
Mina.
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.
Spec
Really great implementation of jQuery. I was also wondering if this may be used commercially, and if so, what the conditions are.
Joel Sutherland
Spec,
It is under the MIT License so you can do just about anything with it, commercial or otherwise.
Spec
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.
Joel Sutherland
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();
});
E. Russell
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 Sutherland
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.
E. Russell
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.
caugust
@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.
macca002
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!
geert baven
@Juan Thanks for pointing this out. Changing the file extensions to php makes the bullets appear
Toby Miller
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?
Joel Sutherland
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.
Toby Miller
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.
Joel Sutherland
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!
Butch
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.
Greg
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
Joel Sutherland
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?
Kateva
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!
LadynRed
"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!
Greg
"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.
Ben
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'
}
]
Yarik
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?
Yariv
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.
Phil
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)
Denis
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
Tyler
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?
Ron
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!!!
Riogrande
Hello,
Is there a way to populate the map with a JSON datasource instead of the html files ?
Thank you.
Rio
Tom Grant
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.
Ben Bishop
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
Jan Hanak
Jonathan
Seb Font
thanks - Seb
Raz
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.
Brian
jan
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!!!
Mike
nachomaans
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?
Rob
Gareth Price
http://www.fhglobalmission.com/where-we-serve
Jasper
Mark
Thanks, Mark.
Matt
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
Antonio
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
Jasper
GetHiFi?
Joel Sutherland
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.
Jasper
var link = document.getElementById['yourLinksIdAttrbuteValue'];
link.click();
Will play with it and see if that works.
Doosa
Would please share how you did it using XML or TXT file as data source inistead of HTML files ?
Thankyou
John Lopez
Cheers,
John
John Lopez
Thanks again!
Omegakenshin
Is there a way to do this?
Because that is what I need to do :D
Can someone help me??
Dave Filchak
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
Umit
Richard Taylor
Jasper
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?
Dhaval
e2v.sapps.in is my project URL
Justin Kees
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!
Jasper
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!
Nikita
Very helpful. It is exactly what I was looking for!
James
Jasper
Samim Saka
I have still problems to putting these numbers near points, though I am not so stupid.
Samim Saka
I have still problems to putting these numbers near points, though I am not so stupid.
Samim Saka
I have still problems to putting these numbers near points, though I am not so stupid.
Samim Saka
I have problems with putting text near icons? Just saw on an example of this script.
Mark
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!
chris camera
dennis elder
Mark
kasper
What can be the cause?
العاب
but how i can but a marker and move it?
thank you
Brandon Backlin
kasper
I noticed that on some computers it doesnt work on all browsers- bullets do not show anyone knows the reason?
Leon Zackoski
Thanks Lzackoski
Eric
Erica Gilbert
Beth
bithesh
bithesh
Josie
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!
Denis
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?
Erica Gilbert
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?
Steve
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 .
Brett
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
Vegim
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.
Erik
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();
});
}
Joe Smith
Anes
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
Oriza
Good looking Map, i like it.
Wizzyboom
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
Wizzyboom
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
matt lee
Thanks for your help
Matt
Douglas
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. :)
John
Thanks!
amori
why there is just zoom of images, whend i get it online ? Offline, there is no problem, all function. Thanks for your answers.
Amori
amori
Amori
Chuck Borowicz
Thanks in advance!
Tisna Rudi
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.
Anthony
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?
Andy
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!
Heath
Adam Bell
Adam Bell
Vinod
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.
G-Admin
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
Nigel
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
Doug McDaniel
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.
Charlie
Daniel
It's early version, probably there are many bugs bu works :)
Daniel Madejek
Early version but it should work.
rub
When opening the zoomed map and going back to the main you can not open the zoomed again.
Eleanor
Thanks
Elle
Anuj Jindal
How can we use this jquery properly in asp.net
Image zooming was functioning but popups are not
Krupa
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.
Chris Raymond
Mark
lei
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!
John
Thanks a lot
John
John
Thanks a lot
John
Orestis
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
Clinton Green
Jonathan
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?
lei
Thanks, I renamed the data files into .aspx and bullets showed up.
John Pantzopoulos
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
riznel
asdasd
blitz
Jonathan
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 "";
?>
Vladimir
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.
jjperezaguinaga
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
Rebecca
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
Pat
Alexandre Oliveira
TKS A LOT!
Kind regards
Alexandre (Portugal)
blitz
Domenico Grottoli
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?
Domenico Grottoli
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?
Michał
Thanks for reply.
Kelvin
Brian
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.
pd
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.
Chris
Chris
Adam
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!
Adam
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!
Andrey
Zee
Domenico
This is the link:
http://www.mglegnoarredo.it/it/mg-legno-arredo/rivenditori-e-partners.html
Low Choon Keat
cody
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'
}
]
}
]
}
Matthew
take a look:
http://test.ecendantdev.com/paraMap/map.html
Thanks for the help and the great script.
Mary Ann Lawrence
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