<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Places I've Worked While Traveling</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Source+Sans+3:wght@300;400;600&display=swap');
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background: #0d1117;
color: #e8e0d0;
font-family: 'Source Sans 3', sans-serif;
height: 100vh;
display: flex;
flex-direction: column;
overflow: hidden;
}
header {
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
padding: 14px 24px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid rgba(212, 175, 55, 0.3);
box-shadow: 0 2px 20px rgba(0,0,0,0.5);
z-index: 1000;
flex-shrink: 0;
}
.header-left h1 {
font-family: 'Playfair Display', serif;
font-size: 1.4rem;
color: #d4af37;
letter-spacing: 0.05em;
line-height: 1.2;
}
.header-left p {
font-size: 0.75rem;
color: rgba(232, 224, 208, 0.6);
letter-spacing: 0.08em;
text-transform: uppercase;
margin-top: 2px;
}
.stats {
display: flex;
gap: 20px;
}
.stat {
text-align: center;
}
.stat-num {
font-family: 'Playfair Display', serif;
font-size: 1.4rem;
color: #d4af37;
line-height: 1;
}
.stat-label {
font-size: 0.65rem;
color: rgba(232, 224, 208, 0.5);
text-transform: uppercase;
letter-spacing: 0.1em;
}
.legend {
display: flex;
gap: 14px;
align-items: center;
flex-wrap: wrap;
}
.legend-item {
display: flex;
align-items: center;
gap: 5px;
font-size: 0.7rem;
color: rgba(232, 224, 208, 0.7);
letter-spacing: 0.05em;
}
.legend-dot {
width: 10px;
height: 10px;
border-radius: 50%;
border: 1.5px solid rgba(255,255,255,0.3);
}
#map {
flex: 1;
width: 100%;
}
/* Custom popup styles */
.leaflet-popup-content-wrapper {
background: #1a1a2e;
border: 1px solid rgba(212, 175, 55, 0.4);
border-radius: 6px;
color: #e8e0d0;
box-shadow: 0 8px 32px rgba(0,0,0,0.6);
}
.leaflet-popup-tip {
background: #1a1a2e;
}
.leaflet-popup-content {
margin: 10px 14px;
}
.popup-name {
font-family: 'Playfair Display', serif;
font-size: 0.95rem;
color: #d4af37;
font-weight: 700;
}
.popup-region {
font-size: 0.7rem;
color: rgba(232, 224, 208, 0.55);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-top: 2px;
}
.popup-visits {
font-size: 0.75rem;
color: #a8d8a8;
margin-top: 4px;
}
.leaflet-control-zoom a {
background: #1a1a2e !important;
color: #d4af37 !important;
border-color: rgba(212,175,55,0.3) !important;
}
.leaflet-control-zoom a:hover {
background: #16213e !important;
}
.leaflet-control-attribution {
background: rgba(13, 17, 23, 0.8) !important;
color: rgba(232,224,208,0.4) !important;
font-size: 0.6rem;
}
.leaflet-control-attribution a { color: rgba(212,175,55,0.6) !important; }
.filter-bar {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
z-index: 1000;
display: flex;
gap: 6px;
background: rgba(13, 17, 23, 0.9);
border: 1px solid rgba(212, 175, 55, 0.25);
padding: 8px 12px;
border-radius: 30px;
backdrop-filter: blur(10px);
}
.filter-btn {
background: transparent;
border: 1px solid transparent;
color: rgba(232, 224, 208, 0.6);
font-family: 'Source Sans 3', sans-serif;
font-size: 0.68rem;
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 4px 10px;
border-radius: 20px;
cursor: pointer;
transition: all 0.2s;
}
.filter-btn:hover, .filter-btn.active {
background: rgba(212, 175, 55, 0.15);
border-color: rgba(212, 175, 55, 0.5);
color: #d4af37;
}
</style>
</head>
<body>
<header>
<div class="header-left">
<h1>Places I've Worked While Traveling</h1>
<p>A working life without borders</p>
</div>
<div class="legend">
<div class="legend-item"><div class="legend-dot" style="background:#d4af37"></div>UK & Ireland</div>
<div class="legend-item"><div class="legend-dot" style="background:#4fc3f7"></div>USA</div>
<div class="legend-item"><div class="legend-dot" style="background:#81c784"></div>Canada</div>
<div class="legend-item"><div class="legend-dot" style="background:#ff8a65"></div>Iceland</div>
<div class="legend-item"><div class="legend-dot" style="background:#ce93d8"></div>Europe</div>
<div class="legend-item"><div class="legend-dot" style="background:#f06292"></div>Australia</div>
<div class="legend-item"><div class="legend-dot" style="background:#4db6ac"></div>Americas</div>
</div>
<div class="stats">
<div class="stat"><div class="stat-num" id="total-places">0</div><div class="stat-label">Locations</div></div>
<div class="stat"><div class="stat-num" id="total-countries">0</div><div class="stat-label">Countries</div></div>
</div>
</header>
<div id="map"></div>
<div class="filter-bar">
<button class="filter-btn active" data-region="all" onclick="filterRegion('all', this)">All</button>
<button class="filter-btn" data-region="uk" onclick="filterRegion('uk', this)">UK & Ireland</button>
<button class="filter-btn" data-region="usa" onclick="filterRegion('usa', this)">USA</button>
<button class="filter-btn" data-region="canada" onclick="filterRegion('canada', this)">Canada</button>
<button class="filter-btn" data-region="iceland" onclick="filterRegion('iceland', this)">Iceland</button>
<button class="filter-btn" data-region="europe" onclick="filterRegion('europe', this)">Europe</button>
<button class="filter-btn" data-region="australia" onclick="filterRegion('australia', this)">Australia</button>
<button class="filter-btn" data-region="americas" onclick="filterRegion('americas', this)">Americas</button>
</div>
<script>
const REGION_COLORS = {
uk: '#d4af37',
usa: '#4fc3f7',
canada: '#81c784',
iceland: '#ff8a65',
europe: '#ce93d8',
australia: '#f06292',
americas: '#4db6ac',
asia: '#ffb74d',
};
function makeIcon(color) {
return L.divIcon({
className: '',
html: `<svg width="18" height="24" viewBox="0 0 18 24" xmlns="http://www.w3.org/2000/svg">
<path d="M9 0C4.03 0 0 4.03 0 9c0 6.75 9 15 9 15s9-8.25 9-15c0-4.97-4.03-9-9-9z" fill="${color}" stroke="rgba(255,255,255,0.4)" stroke-width="1"/>
<circle cx="9" cy="9" r="3.5" fill="rgba(0,0,0,0.35)"/>
</svg>`,
iconSize: [18, 24],
iconAnchor: [9, 24],
popupAnchor: [0, -24],
});
}
const places = [
// ── UK & Ireland ──────────────────────────────────────────────
{ name:"Frimley", region:"uk", lat:51.320, lng:-0.742, visits:1 },
{ name:"Guildford", region:"uk", lat:51.236, lng:-0.570, visits:1 },
{ name:"Liss", region:"uk", lat:51.051, lng:-0.903, visits:1 },
{ name:"Greater London", region:"uk", lat:51.509, lng:-0.128, visits:25 },
{ name:"Winscombe", region:"uk", lat:51.339, lng:-2.843, visits:1 },
{ name:"Armley (Leeds)", region:"uk", lat:53.800, lng:-1.580, visits:1 },
{ name:"Wooburn Green", region:"uk", lat:51.562, lng:-0.695, visits:1 },
{ name:"Warwick", region:"uk", lat:52.281, lng:-1.584, visits:1 },
{ name:"Runnymede", region:"uk", lat:51.438, lng:-0.566, visits:1 },
{ name:"Bracknell Forest", region:"uk", lat:51.415, lng:-0.750, visits:1 },
{ name:"Leckhampstead", region:"uk", lat:51.970, lng:-1.265, visits:1 },
{ name:"Teddington", region:"uk", lat:51.424, lng:-0.331, visits:1 },
{ name:"Hounslow", region:"uk", lat:51.468, lng:-0.361, visits:2 },
{ name:"Richmond upon Thames",region:"uk",lat:51.461, lng:-0.301, visits:7 },
{ name:"Hillingdon", region:"uk", lat:51.537, lng:-0.449, visits:1 },
{ name:"Kew", region:"uk", lat:51.484, lng:-0.285, visits:1 },
{ name:"Shepton Mallet", region:"uk", lat:51.194, lng:-2.546, visits:1 },
{ name:"Staines", region:"uk", lat:51.433, lng:-0.511, visits:3 },
{ name:"Manchester", region:"uk", lat:53.483, lng:-2.244, visits:1 },
{ name:"Bristol", region:"uk", lat:51.454, lng:-2.588, visits:1 },
{ name:"Liphook", region:"uk", lat:51.073, lng:-0.807, visits:1 },
{ name:"Buckingham", region:"uk", lat:51.994, lng:-0.987, visits:2 },
{ name:"Oxford", region:"uk", lat:51.752, lng:-1.258, visits:3 },
{ name:"Streatley", region:"uk", lat:51.527, lng:-1.233, visits:1 },
{ name:"Exeter", region:"uk", lat:50.718, lng:-3.534, visits:4 },
{ name:"Gatwick", region:"uk", lat:51.148, lng:-0.190, visits:2 },
{ name:"Stanwell", region:"uk", lat:51.457, lng:-0.469, visits:1 },
{ name:"Surbiton", region:"uk", lat:51.393, lng:-0.307, visits:1 },
{ name:"Bath", region:"uk", lat:51.381, lng:-2.360, visits:1 },
{ name:"Cerney Wick", region:"uk", lat:51.672, lng:-1.917, visits:1 },
{ name:"Cookham", region:"uk", lat:51.554, lng:-0.712, visits:1 },
{ name:"Blackpool", region:"uk", lat:53.817, lng:-3.053, visits:1 },
{ name:"Anglesey", region:"uk", lat:53.270, lng:-4.320, visits:1 },
{ name:"Bethel, Wales", region:"uk", lat:53.127, lng:-4.211, visits:1 },
{ name:"Caldbeck", region:"uk", lat:54.740, lng:-3.050, visits:1 },
{ name:"Brackley", region:"uk", lat:52.032, lng:-1.149, visits:2 },
{ name:"St Peter Port, Guernsey", region:"uk", lat:49.456, lng:-2.536, visits:5 },
{ name:"Ottery St Mary", region:"uk", lat:50.748, lng:-3.280, visits:1 },
{ name:"Dawlish", region:"uk", lat:50.581, lng:-3.466, visits:1 },
{ name:"Torquay", region:"uk", lat:50.462, lng:-3.525, visits:1 },
{ name:"Paignton", region:"uk", lat:50.435, lng:-3.563, visits:1 },
{ name:"Okehampton", region:"uk", lat:50.739, lng:-4.003, visits:1 },
{ name:"Birmingham", region:"uk", lat:52.480, lng:-1.903, visits:1 },
{ name:"Fakenham", region:"uk", lat:52.830, lng:0.853, visits:1 },
// ── USA: West ─────────────────────────────────────────────────
{ name:"Eugene, OR", region:"usa", lat:44.052, lng:-123.087, visits:2 },
{ name:"North Bend, OR", region:"usa", lat:43.406, lng:-124.224, visits:1 },
{ name:"Rockaway Beach, CA", region:"usa", lat:37.619, lng:-122.493, visits:5 },
{ name:"Sonoma, CA", region:"usa", lat:38.292, lng:-122.458, visits:1 },
{ name:"Santa Cruz, CA", region:"usa", lat:36.974, lng:-122.030, visits:6 },
{ name:"Portland, OR", region:"usa", lat:45.523, lng:-122.676, visits:4 },
{ name:"San Rafael, CA", region:"usa", lat:37.974, lng:-122.531, visits:1 },
{ name:"Nevada City, CA", region:"usa", lat:39.261, lng:-121.015, visits:6 },
{ name:"Santa Barbara, CA", region:"usa", lat:34.420, lng:-119.698, visits:1 },
{ name:"Lincoln City, OR", region:"usa", lat:44.958, lng:-124.009, visits:1 },
{ name:"San Francisco, CA", region:"usa", lat:37.774, lng:-122.419, visits:20 },
{ name:"Baywood–Los Osos, CA",region:"usa",lat:35.312, lng:-120.836, visits:4 },
{ name:"Oregon House, CA", region:"usa", lat:39.382, lng:-121.284, visits:1 },
{ name:"Brookings, OR", region:"usa", lat:42.054, lng:-124.286, visits:1 },
{ name:"Aptos, CA", region:"usa", lat:36.977, lng:-121.900, visits:1 },
{ name:"Las Vegas, NV", region:"usa", lat:36.169, lng:-115.140, visits:8 },
{ name:"Los Angeles, CA", region:"usa", lat:34.052, lng:-118.244, visits:1 },
{ name:"Oakland, CA", region:"usa", lat:37.804, lng:-122.271, visits:3 },
{ name:"Truckee, CA", region:"usa", lat:39.328, lng:-120.183, visits:2 },
{ name:"Sacramento, CA", region:"usa", lat:38.581, lng:-121.494, visits:3 },
{ name:"Pacifica, CA", region:"usa", lat:37.614, lng:-122.487, visits:2 },
{ name:"Marina, CA", region:"usa", lat:36.683, lng:-121.803, visits:1 },
{ name:"Ashland, OR", region:"usa", lat:42.194, lng:-122.699, visits:1 },
{ name:"Dunsmuir, CA", region:"usa", lat:41.213, lng:-122.271, visits:1 },
{ name:"Reno, NV", region:"usa", lat:39.529, lng:-119.813, visits:16 },
{ name:"Woodland, CA", region:"usa", lat:38.678, lng:-121.773, visits:1 },
{ name:"Santa Nella, CA", region:"usa", lat:37.118, lng:-120.889, visits:1 },
{ name:"Chico, CA", region:"usa", lat:39.729, lng:-121.837, visits:8 },
{ name:"Fairfield, CA", region:"usa", lat:38.249, lng:-122.040, visits:1 },
{ name:"Roseville, CA", region:"usa", lat:38.752, lng:-121.288, visits:1 },
{ name:"Sparks, NV", region:"usa", lat:39.534, lng:-119.752, visits:5 },
{ name:"Elko, NV", region:"usa", lat:40.832, lng:-115.763, visits:1 },
{ name:"Bellingham, WA", region:"usa", lat:48.750, lng:-122.478, visits:1 },
{ name:"Seattle, WA", region:"usa", lat:47.608, lng:-122.335, visits:1 },
{ name:"Pasadena, CA", region:"usa", lat:34.148, lng:-118.144, visits:1 },
{ name:"Tempe, AZ", region:"usa", lat:33.425, lng:-111.940, visits:1 },
// USA: South/Central/East
{ name:"Washington, DC", region:"usa", lat:38.907, lng:-77.037, visits:3 },
{ name:"Orlando, FL", region:"usa", lat:28.538, lng:-81.379, visits:7 },
{ name:"Brooklyn, NY", region:"usa", lat:40.650, lng:-73.950, visits:1 },
{ name:"Vicksburg, MS", region:"usa", lat:32.360, lng:-90.877, visits:1 },
{ name:"New Orleans, LA", region:"usa", lat:29.951, lng:-90.071, visits:1 },
{ name:"Salt Lake City, UT", region:"usa", lat:40.760, lng:-111.891, visits:2 },
{ name:"Dallas, TX", region:"usa", lat:32.776, lng:-96.797, visits:1 },
{ name:"Austin, TX", region:"usa", lat:30.267, lng:-97.743, visits:2 },
{ name:"Williamsville, NY", region:"usa", lat:42.963, lng:-78.738, visits:1 },
{ name:"Jacksonville, FL", region:"usa", lat:30.332, lng:-81.655, visits:1 },
{ name:"Tampa, FL", region:"usa", lat:27.948, lng:-82.458, visits:1 },
{ name:"Buffalo, NY", region:"usa", lat:42.886, lng:-78.879, visits:2 },
{ name:"Rochester, NY", region:"usa", lat:43.161, lng:-77.611, visits:1 },
{ name:"Corona, NY", region:"usa", lat:40.745, lng:-73.862, visits:1 },
{ name:"Adirondacks, NY", region:"usa", lat:44.100, lng:-74.000, visits:1 },
{ name:"Minneapolis, MN", region:"usa", lat:44.977, lng:-93.265, visits:1 },
{ name:"Denver, CO", region:"usa", lat:39.739, lng:-104.984, visits:1 },
{ name:"Colorado Springs, CO",region:"usa",lat:38.834, lng:-104.821, visits:1 },
{ name:"Sundance, WY", region:"usa", lat:44.406, lng:-104.376, visits:1 },
{ name:"Phoenix, AZ", region:"usa", lat:33.448, lng:-112.074, visits:1 },
{ name:"Albuquerque, NM", region:"usa", lat:35.085, lng:-106.651, visits:1 },
{ name:"Santa Fe, NM", region:"usa", lat:35.687, lng:-105.937, visits:2 },
{ name:"Norman, OK", region:"usa", lat:35.222, lng:-97.439, visits:1 },
{ name:"Atlanta, GA", region:"usa", lat:33.749, lng:-84.388, visits:1 },
{ name:"Chicago, IL", region:"usa", lat:41.850, lng:-87.650, visits:1 },
{ name:"Newark, NJ", region:"usa", lat:40.736, lng:-74.172, visits:1 },
{ name:"Casper, WY", region:"usa", lat:42.866, lng:-106.313, visits:1 },
{ name:"Honolulu, HI", region:"usa", lat:21.307, lng:-157.858, visits:1 },
{ name:"Kona, HI", region:"usa", lat:19.640, lng:-155.996, visits:1 },
{ name:"Hilo, HI", region:"usa", lat:19.724, lng:-155.090, visits:1 },
{ name:"Lihue, HI", region:"usa", lat:21.978, lng:-159.370, visits:1 },
// ── Canada ────────────────────────────────────────────────────
{ name:"Toronto, Canada", region:"canada", lat:43.651, lng:-79.383, visits:3 },
{ name:"Lincoln, Ontario", region:"canada", lat:43.147, lng:-79.444, visits:1 },
{ name:"St. Catharines, ON", region:"canada", lat:43.160, lng:-79.245, visits:1 },
{ name:"Calgary, Canada", region:"canada", lat:51.045, lng:-114.072, visits:1 },
{ name:"Vancouver, Canada", region:"canada", lat:49.246, lng:-123.116, visits:1 },
{ name:"Vancouver Island", region:"canada", lat:49.650, lng:-125.450, visits:1 },
// ── Iceland ───────────────────────────────────────────────────
{ name:"Reykjavík", region:"iceland", lat:64.135, lng:-21.895, visits:6 },
{ name:"Ísafjörður", region:"iceland", lat:66.075, lng:-23.135, visits:1 },
{ name:"Vestmannaeyjar", region:"iceland", lat:63.441, lng:-20.270, visits:1 },
{ name:"Egilsstaðir", region:"iceland", lat:65.269, lng:-14.394, visits:1 },
{ name:"Höfn", region:"iceland", lat:64.254, lng:-15.212, visits:1 },
{ name:"Akureyri", region:"iceland", lat:65.683, lng:-18.091, visits:1 },
{ name:"Dalvík", region:"iceland", lat:65.971, lng:-18.528, visits:1 },
{ name:"Húsavík", region:"iceland", lat:66.044, lng:-17.338, visits:1 },
// ── Europe ────────────────────────────────────────────────────
{ name:"Breda, Netherlands", region:"europe", lat:51.589, lng:4.776, visits:10 },
{ name:"Frankfurt, Germany", region:"europe", lat:50.110, lng:8.682, visits:1 },
{ name:"Naples, Italy", region:"europe", lat:40.851, lng:14.268, visits:1 },
{ name:"Venice, Italy", region:"europe", lat:45.440, lng:12.315, visits:1 },
{ name:"Paris, France", region:"europe", lat:48.853, lng:2.350, visits:1 },
{ name:"Calais, France", region:"europe", lat:50.951, lng:1.858, visits:1 },
{ name:"Bergerac, France", region:"europe", lat:44.852, lng:0.483, visits:1 },
{ name:"Nantes, France", region:"europe", lat:47.218, lng:-1.554, visits:1 },
{ name:"Madrid, Spain", region:"europe", lat:40.416, lng:-3.703, visits:1 },
{ name:"Santander, Spain", region:"europe", lat:43.463, lng:-3.800, visits:1 },
{ name:"Valladolid, Spain", region:"europe", lat:41.652, lng:-4.724, visits:1 },
{ name:"Córdoba, Spain", region:"europe", lat:37.888, lng:-4.779, visits:1 },
{ name:"Granada, Spain", region:"europe", lat:37.177, lng:-3.598, visits:1 },
{ name:"Málaga, Spain", region:"europe", lat:36.721, lng:-4.421, visits:1 },
{ name:"Valencia, Spain", region:"europe", lat:39.470, lng:-0.376, visits:1 },
{ name:"León, Spain", region:"europe", lat:42.599, lng:-5.571, visits:1 },
{ name:"Lanzarote (Matagorda)", region:"europe", lat:28.934, lng:-13.610, visits:1 },
// ── Australia ─────────────────────────────────────────────────
{ name:"Sydney, Australia", region:"australia", lat:-33.869, lng:151.209, visits:1 },
{ name:"Pialba (Hervey Bay)", region:"australia", lat:-25.289, lng:152.851, visits:1 },
{ name:"Brisbane, Australia", region:"australia", lat:-27.469, lng:153.024, visits:1 },
{ name:"Warrnambool, Australia", region:"australia", lat:-38.383, lng:142.488, visits:1 },
{ name:"Attwood (Melbourne)", region:"australia", lat:-37.678, lng:144.913, visits:1 },
{ name:"Melbourne, Australia", region:"australia", lat:-37.814, lng:144.963, visits:1 },
{ name:"Alice Springs", region:"australia", lat:-23.698, lng:133.881, visits:1 },
{ name:"Uluru", region:"australia", lat:-25.344, lng:131.036, visits:1 },
// ── Americas (rest of world) ───────────────────────────────────
{ name:"San José, Costa Rica", region:"americas", lat:9.934, lng:-84.088, visits:1 },
{ name:"Bangkok, Thailand", region:"asia", lat:13.754, lng:100.502, visits:1 },
];
// Count unique countries
const countries = new Set();
places.forEach(p => {
if (p.region === 'uk') countries.add('UK/Guernsey');
else if (p.region === 'usa') countries.add('USA');
else if (p.region === 'canada') countries.add('Canada');
else if (p.region === 'iceland') countries.add('Iceland');
else if (p.region === 'australia') countries.add('Australia');
else if (p.region === 'americas') countries.add('Costa Rica');
else if (p.region === 'asia') countries.add('Thailand');
else if (p.name.includes('Netherlands')) countries.add('Netherlands');
else if (p.name.includes('Germany')) countries.add('Germany');
else if (p.name.includes('Italy')) countries.add('Italy');
else if (p.name.includes('France')) countries.add('France');
else if (p.name.includes('Spain') || p.name.includes('Lanzarote')) countries.add('Spain');
});
document.getElementById('total-places').textContent = places.length;
document.getElementById('total-countries').textContent = countries.size;
// Init map
const map = L.map('map', {
center: [30, 0],
zoom: 2,
zoomControl: true,
minZoom: 1,
});
L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors © <a href="https://carto.com/attributions">CARTO</a>',
subdomains: 'abcd',
maxZoom: 19
}).addTo(map);
const markerLayer = {};
const allMarkers = [];
places.forEach(place => {
const color = REGION_COLORS[place.region] || '#aaa';
const marker = L.marker([place.lat, place.lng], { icon: makeIcon(color) });
const visitText = place.visits > 1
? `<div class="popup-visits">✦ ${place.visits} visits</div>`
: '';
marker.bindPopup(`
<div class="popup-name">${place.name}</div>
<div class="popup-region">${place.region.toUpperCase()}</div>
${visitText}
`, { maxWidth: 180 });
marker.addTo(map);
marker._region = place.region;
allMarkers.push(marker);
if (!markerLayer[place.region]) markerLayer[place.region] = [];
markerLayer[place.region].push(marker);
});
function filterRegion(region, btn) {
document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
btn.classList.add('active');
allMarkers.forEach(m => {
if (region === 'all' || m._region === region) {
if (!map.hasLayer(m)) map.addLayer(m);
} else {
if (map.hasLayer(m)) map.removeLayer(m);
}
});
}
</script>
</body>
</html>