document.addEventListener(‘DOMContentLoaded’, () => {
const map = document.getElementById(‘contact-texas-map’);
if (!map) return;
const tooltip = document.getElementById(‘contact-map-tooltip’);
const tooltipTitle = tooltip.querySelector(‘.contact-map__tooltip__title’);
const tooltipAddress = tooltip.querySelector(‘.contact-map__tooltip__address’);
const tooltipPhone = tooltip.querySelector(‘.contact-map__tooltip__phone’);
const tooltipDirections = tooltip.querySelector(‘.contact-map__tooltip__directions’);
let hideTimeout = null;
let currentActiveOfficeKey = null;
const offices = {
‘highland-village’: {
title: ‘Highland Village (HQ)’,
address: ‘2040 Highland Village Road, Suite 100, Highland Village, TX 75077’,
phone: ‘972.325.1919’,
phoneRaw: ‘+19723251919’,
directions: ‘Directions: Take FM 407 (Justin Rd) West to Highland Village Road, turn North.’,
directionsUrl: ‘https://maps.google.com/?q=2040+Highland+Village+Road,+Suite+100,+Highland+Village,+TX+75077’,
x: 669,
y: 305
},
‘houston’: {
title: ‘Houston Office’,
address: ‘11757 Katy Freeway, Suite 1300, Houston, TX 77079’,
phone: ‘713.208.6133’,
phoneRaw: ‘+17132086133’,
directions: ‘Directions: Located off I-10 West (Katy Freeway) near the Kirkwood Rd exit.’,
directionsUrl: ‘https://maps.google.com/?q=11757+Katy+Freeway,+Suite+1300,+Houston,+TX+77079’,
x: 763,
y: 522
},
‘boerne’: {
title: ‘Boerne Office’,
address: ‘10004 Johns Road, Boerne, TX 78006’,
phone: ‘210.428.9707’,
phoneRaw: ‘+12104289707’,
directions: ‘Directions: From I-10 West, exit Johns Road and head East toward Boerne.’,
directionsUrl: ‘https://maps.google.com/?q=10004+Johns+Road,+Boerne,+TX+78006’,
x: 562,
y: 483
}
};
const interactiveElements = map.querySelectorAll(‘[data-region], [data-office]’);
function showTooltip(officeKey) {
currentActiveOfficeKey = officeKey;
const office = offices[officeKey];
if (!office) return;
tooltipTitle.textContent = office.title;
tooltipAddress.innerHTML = `
${office.address}`;
tooltipPhone.innerHTML = `
${office.phone}`;
tooltipDirections.innerHTML = `
${office.directions}`;
const mapRect = map.getBoundingClientRect();
const viewBoxWidth = 941.76;
const viewBoxHeight = 907.17;
const scaleX = mapRect.width / viewBoxWidth;
const scaleY = mapRect.height / viewBoxHeight;
const tooltipX = office.x * scaleX;
const tooltipY = office.y * scaleY;
tooltip.style.left = `${tooltipX}px`;
tooltip.style.top = `${tooltipY}px`;
tooltip.classList.add(‘contact-map__tooltip–visible’);
tooltip.setAttribute(‘aria-hidden’, ‘false’);
}
function hideTooltip() {
tooltip.classList.remove(‘contact-map__tooltip–visible’);
tooltip.setAttribute(‘aria-hidden’, ‘true’);
}
function getOfficeForRegion(region) {
if (region === ‘north’ || region === ‘panhandle’ || region === ‘west’ || region === ‘northeast’) return ‘highland-village’;
if (region === ‘southeast’) return ‘houston’;
if (region === ‘hill-country’ || region === ‘south’ || region === ‘central’) return ‘boerne’;
return null;
}
interactiveElements.forEach(el => {
let officeKey = el.getAttribute(‘data-office’);
if (!officeKey) {
const region = el.getAttribute(‘data-region’);
officeKey = getOfficeForRegion(region);
}
if (!officeKey) return;
el.addEventListener(‘mouseenter’, () => {
clearTimeout(hideTimeout);
highlightRegion(officeKey);
showTooltip(officeKey);
});
el.addEventListener(‘mouseleave’, () => {
hideTimeout = setTimeout(() => {
clearHighlights();
hideTooltip();
}, 250);
});
el.addEventListener(‘focus’, () => {
clearTimeout(hideTimeout);
highlightRegion(officeKey);
showTooltip(officeKey);
});
el.addEventListener(‘blur’, () => {
hideTimeout = setTimeout(() => {
clearHighlights();
hideTooltip();
}, 250);
});
el.addEventListener(‘touchstart’, (e) => {
const isVisible = tooltip.classList.contains(‘contact-map__tooltip–visible’);
clearHighlights();
if (isVisible) {
hideTooltip();
} else {
highlightRegion(officeKey);
showTooltip(officeKey);
}
e.stopPropagation();
});
});
tooltip.addEventListener(‘mouseenter’, () => {
clearTimeout(hideTimeout);
if (currentActiveOfficeKey) {
highlightRegion(currentActiveOfficeKey);
}
});
tooltip.addEventListener(‘mouseleave’, () => {
clearHighlights();
hideTooltip();
});
document.addEventListener(‘touchstart’, () => {
clearHighlights();
hideTooltip();
});
function highlightRegion(officeKey) {
clearHighlights();
let regionSelectors = [];
if (officeKey === ‘highland-village’) {
regionSelectors = [‘north’, ‘panhandle’, ‘west’, ‘northeast’];
} else if (officeKey === ‘houston’) {
regionSelectors = [‘southeast’];
} else if (officeKey === ‘boerne’) {
regionSelectors = [‘hill-country’, ‘south’, ‘central’];
}
regionSelectors.forEach(reg => {
const pathEl = map.querySelector(`[data-region=”${reg}”]`);
if (pathEl) {
pathEl.classList.add(‘contact-map__region–active’);
}
});
}
function clearHighlights() {
map.querySelectorAll(‘.contact-map__region’).forEach(el => {
el.classList.remove(‘contact-map__region–active’);
});
}
});
