I have a question: I have an interactive map that I'm inheriting from another developer who's left the project half finished. There are two maps, one for World and one for the US. He had the US finished, so to make the world map work, I copied the JS and created a new instance where I replaced the IDs from US to WORLD. This works great! Only problem is that it disables the US function. Any ideas why?
Here's the US map code:
<script language="javascript" type="text/javascript">
jQuery(document).ready(function(){
var viewable_us_projects = {
1:{
coord: {x: 175, y: 300},
title: "Project Title",
location: "Apache Junction, AZ",
size: "144,000 SqFt",
date: "Month, Year",
client: "Client Name",
link: "/#",
image: '/templates/cp-basetemplate-joomla3/images/item-hover-image-2.png'
}
}
var other_us_projects = {
2:{
coord: {x: 155, y: 242},
title: "Project Title",
location: "Beaver Dam, AZ",
size: "144,000 SqFt",
date: "Month, Year",
client: "Client Name",
image: '/templates/cp-basetemplate-joomla3/images/item-hover-image-2.png'
},
3:{
coord: {x: 32, y: 215},
title: "Project Title",
location: "Brentwood, CA",
size: "144,000 SqFt",
date: "Month, Year",
client: "Client",
image: '/templates/cp-basetemplate-joomla3/images/item-hover-image-2.png'
},
4:{
coord: {x: 82, y: 287},
title: "Project Title",
location: "Calabasas, CA",
size: "144,000 SqFt",
date: "Month, Year",
client: "Client",
image: '/templates/cp-basetemplate-joomla3/images/item-hover-image-2.png'
},
5:{
coord: {x: 257, y: 168},
title: "Project Title",
location: "Craig, CO",
size: "144,000 SqFt",
date: "Month, Year",
client: "Client",
image: '/templates/cp-basetemplate-joomla3/images/item-hover-image-2.png'
},
6:{
coord: {x: 234, y: 220},
title: "Project Title",
location: "Durango, CO",
size: "144,000 SqFt",
date: "Month, Year",
client: "Client",
image: '/templates/cp-basetemplate-joomla3/images/item-hover-image-2.png'
},
7:{
coord: {x: 723, y: 189},
title: "Project Title",
location: "Dover, DE",
size: "144,000 SqFt",
date: "Month, Year",
client: "Client",
image: '/templates/cp-basetemplate-joomla3/images/item-hover-image-2.png'
},
8:{
coord: {x: 600, y: 293},
title: "Project Title",
location: "Atlanta, GA",
size: "144,000 SqFt",
date: "Month, Year",
client: "Client",
image: '/templates/cp-basetemplate-joomla3/images/item-hover-image-2.png'
},
9:{
coord: {x: 242, y: 458},
title: "Project Title",
location: "Atlanta, GA",
size: "144,000 SqFt",
date: "Month, Year",
client: "Client",
image: '/templates/cp-basetemplate-joomla3/images/item-hover-image-2.png'
},
10:{
coord: {x: 240, y: 460},
title: "Project Title",
location: "Laie, HI",
size: "144,000 SqFt",
date: "Month, Year",
client: "Client",
image: '/templates/cp-basetemplate-joomla3/images/item-hover-image-2.png'
},
11:{
coord: {x: 120, y: 100},
title: "Project Title",
location: "Boise, ID",
size: "144,000 SqFt",
date: "Month, Year",
client: "Client",
image: '/templates/cp-basetemplate-joomla3/images/item-hover-image-2.png'
},
12:{
coord: {x: 180, y: 118},
title: "Project Title",
location: "Idaho Falls, ID",
size: "144,000 SqFt",
date: "Month, Year",
client: "Client",
image: '/templates/cp-basetemplate-joomla3/images/item-hover-image-2.png'
},
13:{
coord: {x: 540, y: 134},
title: "Project Title",
location: "Chicago, IL",
size: "144,000 SqFt",
date: "Month, Year",
client: "Client",
image: '/templates/cp-basetemplate-joomla3/images/item-hover-image-2.png'
},
14:{
coord: {x: 482, y: 137},
title: "Project Title",
location: "Waterloo, IA",
size: "144,000 SqFt",
date: "Month, Year",
client: "Client",
image: '/templates/cp-basetemplate-joomla3/images/item-hover-image-2.png'
},
15:{
coord: {x: 503, y: 367},
title: "Project Title",
location: "New Orleans, LA",
size: "144,000 SqFt",
date: "Month, Year",
client: "Client",
image: '/templates/cp-basetemplate-joomla3/images/item-hover-image-2.png'
},
16:{
coord: {x: 410, y: 194},
title: "Project Title",
location: "Fort Riley, KS",
size: "144,000 SqFt",
date: "Month, Year",
client: "Client",
image: '/templates/cp-basetemplate-joomla3/images/item-hover-image-2.png'
},
17:{
coord: {x: 702, y: 189},
title: "Project Title",
location: "Bethesda, MD",
size: "144,000 SqFt",
date: "Month, Year",
client: "Client",
image: '/templates/cp-basetemplate-joomla3/images/item-hover-image-2.png'
},
18:{
coord: {x: 437, y: 192},
title: "Project Title",
location: "Kansas City, MO",
size: "144,000 SqFt",
date: "Month, Year",
client: "Client",
image: '/templates/cp-basetemplate-joomla3/images/item-hover-image-2.png'
},
19:{
coord: {x: 814, y: 83},
title: "Project Title",
location: "Bridgetown, ME",
size: "144,000 SqFt",
date: "Month, Year",
client: "Client",
image: '/templates/cp-basetemplate-joomla3/images/item-hover-image-2.png'
},
20:{
coord: {x: 194, y: 53},
title: "Project Title",
location: "Bozeman, MT",
size: "144,000 SqFt",
date: "Month, Year",
client: "Client",
image: '/templates/cp-basetemplate-joomla3/images/item-hover-image-2.png'
}
}
jQuery.each(viewable_us_projects, function(i, val) {
jQuery(".us-map").append(
'<div id="point-' + i + '" class="orange-loc" style="top:' + val.coord.y + 'px; left: ' + val.coord.x + 'px;"></div>');
new_popup = jQuery("#popup-template").clone();
new_popup.addClass("orange-popup");
new_popup.attr("id", "popup-" + i);
// new_popup.addClass("show");
new_popup.find(".popup-image img").attr('src',val.image);
new_popup.find(".title").html(val.title);
new_popup.find(".location span").html(val.location);
new_popup.find(".size span").html(val.size);
new_popup.find(".date span").html(val.date);
new_popup.find(".client span").html(val.client);
new_popup.find(".link a").attr('href', val.link);
new_popup.css({
"top":val.coord.y - 155,
"left":val.coord.x - 50
});
new_popup.appendTo(".us-map");
});
jQuery.each(other_us_projects, function(i, val) {
jQuery(".us-map").append(
'<div id="point-' + i + '" class="green-loc" style="top:' + val.coord.y + 'px; left: ' + val.coord.x + 'px;"></div>'
);
new_popup = jQuery("#popup-template").clone();
new_popup.addClass("green-popup");
new_popup.attr("id", "popup-" + i);
// new_popup.addClass("show");
new_popup.find(".popup-image img").attr('src',val.image);
new_popup.find(".title").html(val.title);
new_popup.find(".location span").html(val.location);
new_popup.find(".size span").html(val.size);
new_popup.find(".date span").html(val.date);
new_popup.find(".client span").html(val.client);
new_popup.find(".link a").hide();
new_popup.css({
"top":val.coord.y - 155,
"left":val.coord.x - 50
});
new_popup.appendTo(".us-map");
});
jQuery(".orange-loc, .green-loc, .orange-popup, .green-popup").on("hover", function() {
var curr_popup = "#popup-" + jQuery(this).attr('id').substr(6);
jQuery(curr_popup).toggleClass("show");
});
// jQuery("html").on("click", function() {
// jQuery(".orange-popup, .green-popup").removeClass("show");
// });
// jQuery(".orange-popup, .orange-loc, .green-popup, .green-loc").on("click", function() {
// event.stopPropagation();
// });
});
</script>
Here's the WORLD JS Code:
<script language="javascript" type="text/javascript">
jQuery(document).ready(function(){
var viewable_world_projects = {
21:{
coord: {x: 175, y: 300},
title: "Project Title",
location: "Apache Junction, AZ",
size: "144,000 SqFt",
date: "Month, Year",
client: "Client Name",
link: "/#",
image: '/templates/cp-basetemplate-joomla3/images/item-hover-image-2.png'
}
}
var other_world_projects = {
22:{
coord: {x: 155, y: 242},
title: "Project Title",
location: "Beaver Dam, AZ",
size: "144,000 SqFt",
date: "Month, Year",
client: "Client Name",
image: '/templates/cp-basetemplate-joomla3/images/item-hover-image-2.png'
}
}
jQuery.each(viewable_world_projects, function(i, val) {
jQuery(".world-map").append(
'<div id="point-' + i + '" class="orange-loc" style="top:' + val.coord.y + 'px; left: ' + val.coord.x + 'px;"></div>');
new_popup = jQuery("#popup-template").clone();
new_popup.addClass("orange-popup");
new_popup.attr("id", "popup-" + i);
// new_popup.addClass("show");
new_popup.find(".popup-image img").attr('src',val.image);
new_popup.find(".title").html(val.title);
new_popup.find(".location span").html(val.location);
new_popup.find(".size span").html(val.size);
new_popup.find(".date span").html(val.date);
new_popup.find(".client span").html(val.client);
new_popup.find(".link a").attr('href', val.link);
new_popup.css({
"top":val.coord.y - 155,
"left":val.coord.x - 50
});
new_popup.appendTo(".world-map");
});
jQuery.each(other_world_projects, function(i, val) {
jQuery(".world-map").append(
'<div id="point-' + i + '" class="green-loc" style="top:' + val.coord.y + 'px; left: ' + val.coord.x + 'px;"></div>'
);
new_popup = jQuery("#popup-template").clone();
new_popup.addClass("green-popup");
new_popup.attr("id", "popup-" + i);
// new_popup.addClass("show");
new_popup.find(".popup-image img").attr('src',val.image);
new_popup.find(".title").html(val.title);
new_popup.find(".location span").html(val.location);
new_popup.find(".size span").html(val.size);
new_popup.find(".date span").html(val.date);
new_popup.find(".client span").html(val.client);
new_popup.find(".link a").hide();
new_popup.css({
"top":val.coord.y - 155,
"left":val.coord.x - 50
});
new_popup.appendTo(".world-map");
});
jQuery(".orange-loc, .green-loc, .orange-popup, .green-popup").on("hover", function() {
var curr_popup = "#popup-" + jQuery(this).attr('id').substr(6);
jQuery(curr_popup).toggleClass("show");
});
// jQuery("html").on("click", function() {
// jQuery(".orange-popup, .green-popup").removeClass("show");
// });
// jQuery(".orange-popup, .orange-loc, .green-popup, .green-loc").on("click", function() {
// event.stopPropagation();
// });
});
</script>
And finally, this is the test site so that you can really dig into the code if you need to: http://vbfa.bwpcommunications.com
Thanks for your help!
Shadna
