Hello all,

I am using the zoommap plugin to develop an interactive type map. I am also using the maphilight plugin to create imagemap rollovers/popups. So the functionality is: a world map; rollover a country, it hilites, shows the name of the country. When you click on the country, a popup with a map appears. Then zoommap adds clickable "flags" to the map and when you click on the flag, information pertinent to the flag shows in another popup. Here is my issue: the popup is triggered by a click on a div element with a class of popup. However, I need to somehow isolate that call and keep it contained to a specific block of code. For example, below is one block of code in the setup.js file that is relative to ethiopia:

$('#p-ethiopia').zoommap({
		// Width and Height of the Map
		width: '697px',
		height: '569px',
			
		//Misc Settings
		blankImage: '/assets/images/map/blank.gif',
		zoomDuration: 1000,
		bulletWidthOffset: '10px',
		bulletHeightOffset: '10px',
		
		//ids and classes
		zoomClass: 'zoomable',
		popupSelector: 'div.popup', [ THIS IS THE POPUP TRIGGER ]
		popupCloseSelector: 'a.close',
		
		//Return to Parent Map Link
		showReturnLink: true,
		returnId: 'returnlink',
		returnText: 'return to previous map',
		
		//Initial Region to be shown
		map: {
			id: 'ethiopia',
			image: '/assets/images/map/ethiopia.02.jpg',
			data: '/assets/popups/ethiopia.html',
			
			}	
		
	});

Below is the relative code for India:

$('#p-india').zoommap({
		// Width and Height of the Map
		width: '559px',
		height: '569px',
			
		//Misc Settings
		blankImage: '/assets/images/map/blank.gif',
		zoomDuration: 1000,
		bulletWidthOffset: '10px',
		bulletHeightOffset: '10px',
		
		//ids and classes
		zoomClass: 'zoomable',
		popupSelector: 'div.popup', [ THIS IS THE TRIGGER BUT, IT SEEMS TO BE FIRING IN THE PREVIOUS BLOCK OF CODE ]
		popupCloseSelector: 'a.close',
		
		//Return to Parent Map Link
		showReturnLink: true,
		returnId: 'returnlink',
		returnText: 'return to previous map',
		
		//Initial Region to be shown
		map: {
			id: 'india',
			image: '/assets/images/map/india2.jpg',
			data: '/assets/popups/india.html',
			
			}	
		
	});

So the issue is that these two scripts work independently except that, the popup trigger will not fire in the p-india block because it is firing in the p-ethiopia block instead. I thought that they would be self contained so that if the div clicked on was p-india, code in p-ethiopia would just be ignored, but apparently not. How can I isolate these two without changing the class from div.popup?

For the record, here is the code for the zoommap plugin:

(function($) {
	$.fn.zoommap = function(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);
		
		$(this).each(function(){
			var map = $(this);
			$(this).data('currentId', '');
			
			function showMapById(id){
				var region = findRegion(settings.map, id);
				if(region != -1){
					displayMap(region);
				}
			}

			// recursive id find
			function findRegion(root, id){
				if(root.id == id){
					return root;
				}else{
					if(root.maps != undefined){
						for(var i=0; i<root.maps.length; i++){
							var possible = findRegion(root.maps[i], id);
							if(possible != -1)
								return possible;
						}
					}
				}
				return -1;
			}
			
			// region is a map
			// This gets called every time we zoom
			function displayMap(region){
				//Set Current Region Id
				$(this).data('currentId', region.id);
				
				//Clear the Map and Set the Background Image
				map.empty().css({
					backgroundImage: 'url(' + region.image + ')',
					width: settings.width,
					height: settings.height
				});
				var check = map.css('background-image');
				
				//Load RegionData
				loadRegionData(region);
			}
			/************************************************************************************/

			
			//Show Return Link
			function showReturnLink(region){
				map.append('<a href="javascript:void(0);" id="' + settings.returnId + '">' + settings.returnText + '</a>');
				$('#' + settings.returnId).hide().fadeIn().click(function(){
					showMapById(region.parent);
				});
			}
				
			
			//Load the Bullets 
			function loadRegionData(region){
				var url = region.data;
				map.load(url, {}, function(){
					//place bullets
					$(this).children('a.bullet').each(function(){
						var coords = $(this).attr('rel').split('-');
						$(this).css({left: addpx(Number(coords[0]) - rempx(settings.bulletWidthOffset)), top: addpx(Number(coords[1]) - rempx(settings.bulletHeightOffset))})
							   .hide()
							   .click(function(){showPopup($(this).attr('id'));})
							   .fadeIn('fast');							
					});
					//Set up each submap as an item to click
					if(region.maps != undefined){
						for(var i=0; i<region.maps.length; i++){
							addZoom(region.maps[i]);
						}
					}
					//Create Return Link
					if(settings.showReturnLink && region.parent != undefined){
						showReturnLink(region);
					}						
				});
			}
			
			function showPopup(id, leftbul, topbul){
				map.find(settings.popupSelector).fadeOut(); 
				var boxid = '#' + id + '-box';
				
				$(boxid).fadeIn();
				$(settings.popupCloseSelector).click(function(){
					$(this).parent().fadeOut();
				});
			}
			
			//add a clickable image for a region on the current map
			function addZoom(region){
				$('<img />').addClass(settings.zoomClass)
					.attr({
						src: settings.blankImage,
						id: region.id
					}).css({
						position: 'absolute',
						width: region.width,
						height: region.height,
						top: region.top,
						left: region.left,
						cursor: 'pointer'
					}).appendTo(map).click(function(){
						//hide neighboring bullets and zoomables
						var width = settings.width;
						var height = settings.height;
						if(region.scan){
							width = region.scanwidth;
							height = region.scanheight;
						}
						$(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);
											});
								});
					});
			}
			
			function rempx(string){
				return Number(string.substring(0, (string.length - 2)));
			}
			
			function addpx(string){
				return string + 'px';
			}
			
			function showHash(string){
				string = string.replace('#', '');
				showMapById(string);
			}
			
			//initialize map
			var hash = self.document.location.hash;
			if(hash.length > 0)
				showHash(hash);
			else{
				displayMap(settings.map);
			}
			
			return this;
		});
	}
})(jQuery);

Thanks for your help.

Dave

Recommended Answers

All 3 Replies

Dave,

You need to select by ID, and you can leave class="popup" there.

It's explained in the documentation.

See section 2 "HTML Data".

Airshow

Yikes ... how did I not see that. thanks for kicking me in the ass.

Dave

It was nothing :cool:

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.