<!DOCTYPE html>
<html>
<head>
<title>Pasaporte Musical de Puerto Rico</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<style>
#map { height: 100vh; }
.leaflet-popup-content-wrapper {
font-family: Arial, sans-serif;
font-size: 14px;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script>
const map = L.map('map').setView([18.2, -66.5], 8);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
const pueblos = [
{ nombre: "San Juan", coords: [18.4655, -66.1057], link: "https://youtu.be/fAKEurl1" },
{ nombre: "Ponce", coords: [17.9831, -66.6141], link: "https://youtu.be/fAKEurl2" },
{ nombre: "Mayagüez", coords: [18.2013, -67.1396], link: "https://youtu.be/fAKEurl3" },
{ nombre: "Arecibo", coords: [18.4726, -66.7157], link: "https://youtu.be/fAKEurl4" },
{ nombre: "Caguas", coords: [18.2328, -66.0459], link: "https://youtu.be/fAKEurl5" },
{ nombre: "Bayamón", coords: [18.3985, -66.1557], link: "https://youtu.be/fAKEurl6" },
{ nombre: "Aguadilla", coords: [18.4275, -67.1541], link: "https://youtu.be/fAKEurl8" },
{ nombre: "Lares", coords: [18.2946, -66.8766], link: "https://youtu.be/fAKEurl11" },
{ nombre: "Loíza", coords: [18.4338, -65.8805], link: "https://youtu.be/fAKEurl12" },
{ nombre: "Naranjito", coords: [18.3004, -66.2446], link: "https://youtu.be/fAKEurl13" }
];
pueblos.forEach(pueblo => {
L.marker(pueblo.coords).addTo(map)
.bindPopup(`<strong>${pueblo.nombre}</strong><br><a href="${pueblo.link}" target="_blank">Escuchar música</a>`);
});
</script>
</body>
</html>