/* ============================================================
EventsMap — where Primo sells tickets.
Renders a stylized US map with dots for each city.
Click a dot → opens the event list for that city.
Data: assets/events-map-data.json (generated from HubSpot export)
============================================================ */
function EventsMap() {
const [data, setData] = React.useState(null);
const [activeCity, setActiveCity] = React.useState(null);
const [hoverCity, setHoverCity] = React.useState(null);
const [sport, setSport] = React.useState('All');
const svgRef = React.useRef(null);
React.useEffect(() => {
fetch(window.__resources && window.__resources.mapData || 'assets/events-map-data.json').
then((r) => r.json()).
then((d) => setData(d)).
catch((e) => console.error('Failed to load map data', e));
}, []);
if (!data) {
return (
Loading map…
);
}
// Filter cities by sport
const filteredCities = data.cities.map((c) => {
const events = sport === 'All' ? c.events : c.events.filter((e) => e.sport === sport);
return { ...c, events };
}).filter((c) => c.events.length > 0);
const totalEvents = filteredCities.reduce((s, c) => s + c.events.length, 0);
const states = new Set(filteredCities.map((c) => c.state));
const maxEvents = Math.max(...filteredCities.map((c) => c.events.length));
// Logarithmic-ish radius so Durango (40) doesn't dominate but is clearly biggest
function dotRadius(n) {
if (n <= 1) return 4.5;
return Math.min(4.5 + Math.sqrt(n - 1) * 2.2, 16);
}
const sportFilters = ['All', ...data.totals.sports];
// Color a dot by primary sport (most common at that city) — feels alive when filtered too
const sportColor = {
Cheer: '#FF6B5B',
Rodeo: '#F59F00',
Soccer: '#16A878',
Football: '#7B5CFF',
Basketball: '#F97316',
Volleyball: '#EC4899',
Wrestling: '#0EA5E9',
Lacrosse: '#8B5CF6',
'Non-Sport': '#64748B'
};
function dominantSport(city) {
const counts = {};
city.events.forEach((e) => counts[e.sport] = (counts[e.sport] || 0) + 1);
return Object.entries(counts).sort((a, b) => b[1] - a[1])[0][0];
}
const active = activeCity ? filteredCities.find((c) => c.name === activeCity) : null;
return (
Where we sell
Powering events coast to coast.
From local end-of-season showcases to multi-day cheer & dance nationals in Orlando — Primo is the ticketing partner for cheer events large and small. Click a city to see what we've sold there.