World Map with Offices
// Declare chart variable in global scope
let chart;
let root;
// Modal functions
function showModal(title, content) {
document.getElementById('modalTitle').innerHTML = title;
document.getElementById('modalContent').innerHTML = content;
document.getElementById('officeModal').style.display = 'block';
document.getElementById('modalOverlay').style.display = 'block';
}
function closeModal() {
document.getElementById('officeModal').style.display = 'none';
document.getElementById('modalOverlay').style.display = 'none';
}
// Lock horizontal scroll on mobile, allow smooth vertical scroll
var chartDiv = document.getElementById('chartdiv');
var startX, startY;
chartDiv.addEventListener('touchstart', function(e) {
var touch = e.touches[0];
startX = touch.clientX;
startY = touch.clientY;
}, { passive: true });
chartDiv.addEventListener('touchmove', function(e) {
var touch = e.touches[0];
var deltaX = touch.clientX - startX;
var deltaY = touch.clientY - startY;
if (Math.abs(deltaX) > Math.abs(deltaY) * 2) {
e.preventDefault();
}
}, { passive: false });
chartDiv.addEventListener('wheel', function(e) {
e.stopPropagation();
}, { passive: true });
am5.ready(function() {
// Ensure chartdiv is available and has dimensions
if (!chartDiv || chartDiv.offsetWidth === 0 || chartDiv.offsetHeight === 0) {
console.warn('Chart container not ready or has zero dimensions. Delaying initialization.');
return;
}
root = am5.Root.new("chartdiv");
root.hideCredits = true;
root.setThemes([
am5themes_Animated.new(root)
]);
chart = root.container.children.push(
am5map.MapChart.new(root, {
panX: "translateX",
panY: "translateY",
projection: am5map.geoMercator(),
paddingTop: 50,
paddingBottom: 50,
background: am5.Rectangle.new(root, {
fill: am5.color(0x2E2C73),
fillOpacity: 1
}),
zoomStep: 1,
zoomLevel: 1,
minZoomLevel: 1,
maxZoomLevel: 3
})
);
if (root._logo) {
root._logo.dispose();
}
var polygonSeries = chart.series.push(
am5map.MapPolygonSeries.new(root, {
geoJSON: am5geodata_worldLow,
exclude: ["AQ"]
})
);
polygonSeries.mapPolygons.template.setAll({
tooltipHTML: `
{office} {location}
`,
interactive: true,
stroke: am5.color(0xFFFFFF),
strokeWidth: 1
});
var highlightedCountries = {
"OM": {
office: "Oman",
location: "Pan Gulf International Metals Ind. & Development LLC, Oman
"
},
"BH": {
office: "Bahrain",
location: "Representative office, Bahrain
"
},
"SA": {
office: "KSA",
location: "Pan Gulf International Trading, Office 103 Bldg. No. 3441 Shaddad Bin Aws Street, Al Qadisiya Dist. Dammam, KSA
+966 13 814 1234"
},
"AE": {
office: "UAE",
location: "Pan Gulf International Metals Industry L.L.C, Sajaa Industrial Area, Sharjah, UAE
Shanghai Gulf Metal Scrap Trading L.L.C, Industrial Area # 10, Sharjah, UAE
Green Metals FZCO, Jebel Ali Free Zone Dubai, Dubai
Alliance Scrap Trading L.L.C., Musaffah West 4, Abu Dhabi, UAE
+971 44 25 21 00"
},
"QA": {
office: "Qatar",
location: "Representative office, Qatar
+974 44 123 456"
},
"KW": {
office: "Kuwait",
location: "Representative office, Kuwait
"
},
"IL": {
office: "Israel",
location: "Representative office, Israel
"
},
"TR": {
office: "Turkey",
location: ""
},
"EG": {
office: "Egypt",
location: ""
},
"BD": {
office: "Bangladesh",
location: "Representative office, Bangladesh
"
},
"ID": {
office: "Indonesia",
location: ""
},
"MY": {
office: "Malaysia",
location: "Representative office, Malaysia
"
},
"PH": {
office: "Philippines",
location: "Representative office, Philippines
"
},
"SG": {
office: "Singapore",
location: "Representative office, Singapore
"
},
"VN": {
office: "Vietnam",
location: "Representative office, Vietnam
"
},
"LA": {
office: "Laos",
location: "Representative office, Laos
"
},
"MM": {
office: "Burma",
location: "Representative office, Burma (Myanmar)
"
},
"JP": {
office: "Japan",
location: ""
},
"KR": {
office: "South Korea",
location: "Representative office, South Korea
"
},
"TW": {
office: "Taiwan",
location: "Representative office, Taiwan
"
},
"AU": {
office: "Australia",
location: ""
},
"NZ": {
office: "New Zealand",
location: "Representative office, New Zealand
"
},
"MA": {
office: "Morocco",
location: ""
},
"TN": {
office: "Tunisia",
location: "Representative office, Tunisia
"
},
"ZA": {
office: "South Africa",
location: ""
},
"US": {
office: "USA",
location: ""
},
"ES": {
office: "Spain",
location: "Representative office, Spain
"
},
"GR": {
office: "Greece",
location: ""
},
"CY": {
office: "Cyprus",
location: "Representative office, Cyprus
"
},
"DE": {
office: "Germany",
location: ""
},
"LV": {
office: "Latvia",
location: ""
},
"GE": {
office: "Georgia",
location: ""
},
"PK": {
office: "Pakistan",
location: "Representative office, Hatim Badruddin, Pakistan
+92 21 123 4567"
},
"IN": {
office: "India",
location: "Parul Alloys Pvt. Ltd., A-33, Ram Nagar, Amani Shah Dargah Road, India
+91 22 123 4567"
},
"TH": {
office: "Thailand",
location: "PGI Metals Industry Co. Ltd., 88/86 Moo 15, Bang Saothong, Samutprakarn 10570, Thailand
"
},
"CN": {
office: "China",
location: "PGI China Representative Office, Room 1912, Huihua Mansion, No 879 Songjiang Middle Road, China
+86 21 123 4567"
},
"GB": {
office: "United Kingdom",
location: "Pan Gulf International Metal Industry UK Ltd., Royal Road Sutton Coldfield B72 1SP, Birmingham West Midland, England, UK
+44 20 123 4567"
},
"IT": {
office: "Italy",
location: "Representative office, Italy
+39 123 456 789"
}
};
polygonSeries.mapPolygons.template.adapters.add("fill", function(fill, target) {
var id = target.dataItem.dataContext.id;
if (highlightedCountries[id]) {
console.log(`Highlighting country: ${id} - ${highlightedCountries[id].office}`); // Debug log
return am5.color(0x28B34B);
}
return am5.color(0xD3D3D3);
});
polygonSeries.mapPolygons.template.adapters.add("fillOpacity", function(opacity, target) {
var id = target.dataItem.dataContext.id;
if (highlightedCountries[id]) {
return 1;
}
return 0;
});
polygonSeries.mapPolygons.template.adapters.add("tooltipHTML", function(text, target) {
var id = target.dataItem.dataContext.id;
if (highlightedCountries[id]) {
return `
${highlightedCountries[id].office} ${highlightedCountries[id].location}
`;
}
return null;
});
polygonSeries.mapPolygons.template.events.on("click", function(ev) {
var id = ev.target.dataItem.dataContext.id;
if (highlightedCountries[id]) {
showModal(highlightedCountries[id].office, highlightedCountries[id].location);
} else {
showModal("No Office", "We do not have an office in this country.");
}
});
document.getElementById('zoomInBtn').addEventListener('click', function() {
if (chart) {
const currentZoom = chart.get("zoomLevel");
if (currentZoom chart.get("minZoomLevel")) {
chart.set("zoomLevel", currentZoom - 1);
}
}
});
});
// Optional: Add a ResizeObserver with a safeguard
const resizeObserver = new ResizeObserver(entries => {
for (let entry of entries) {
if (entry.target === chartDiv && root) {
if (chartDiv.offsetWidth > 0 && chartDiv.offsetHeight > 0) {
root.resize(); // Use root.resize() instead of chart.resize()
}
}
}
});
// Observe the chart container after initialization
if (chartDiv) {
resizeObserver.observe(chartDiv);
}
