maps.qmd

---
format:
  html:
    toc: false
repo-actions: false
---

:::{.column-screen}

<div style="text-align: center; margin: 20px 40px;">
  <h2 style="color: #666; margin-bottom: 10px;">📍 Your Location according your browser</h2>
  <div id="map" style="height: 600px; width: 80vw; max-width: 80vw; margin: 0 auto; border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.2);"></div>
  <div id="coordinates" style="margin-top: 10px; font-family: monospace; color: #555; font-size: 18px;">🌍 Getting your location...</div>
</div>
:::

<!-- Leaflet CSS and JS -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>

<!-- Custom CSS for layer control alignment -->
<style>
.leaflet-control-layers-base {
    text-align: left !important;
    font-size: 16px !important;
}

.leaflet-control-layers-base label {
    display: flex !important;
    align-items: left !important;
    justify-content: left !important;
    margin: 2px 0 !important;
}

.leaflet-control-layers-base input[type="radio"] {
    margin-right: 16px !important;
    margin-top: 0 !important;
    margin-bottom: 16px !important;
    margin-left: 0 !important;
}

.leaflet-control-layers {
    padding: 8px 10px !important;
    min-width: 180px !important;
}
</style>

<script>
// Initialize the map
let map = L.map('map').setView([41.3031, 2.0763], 10); // Default to Barcelona, Spain

// Define base layers
const openStreetMap = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
    maxZoom: 18
});

const satelliteMap = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
    attribution: '© <a href="https://www.esri.com/">Esri</a>, Maxar, Earthstar Geographics, and the GIS User Community',
    maxZoom: 18
});

// Add default layer (OpenStreetMap)
openStreetMap.addTo(map);

// Create layer control
const baseLayers = {
    "🗺️ OpenStreet": openStreetMap,
    "🛰️ Satellite": satelliteMap
};

// Add layer control to bottom-left
L.control.layers(baseLayers, null, {
    position: 'bottomleft',
    collapsed: false
}).addTo(map);

// Custom icon for user location
const userIcon = L.divIcon({
    className: 'custom-div-icon',
    html: '<div style="background-color: #ff4444; width: 20px; height: 20px; border-radius: 50%; border: 3px solid white; box-shadow: 0 2px 4px rgba(0,0,0,0.3); display: flex; align-items: center; justify-content: center;"><span style="color: white; font-size: 12px; font-weight: bold;">📍</span></div>',
    iconSize: [26, 26],
    iconAnchor: [13, 13]
});

let userMarker;

// Function to update location
function updateLocation(lat, lon) {
    // Remove existing marker if any
    if (userMarker) {
        map.removeLayer(userMarker);
    }
    
    // Add new marker
    userMarker = L.marker([lat, lon], {icon: userIcon}).addTo(map);
    
    // Update coordinates display
    document.getElementById('coordinates').innerHTML = 
        `🌍 Latitude: <strong>${lat.toFixed(6)}</strong> | Longitude: <strong>${lon.toFixed(6)}</strong>`;
    
    // Center map on user location
    map.setView([lat, lon], 6);
    
    // Add popup to marker
    userMarker.bindPopup(`
        <div style="text-align: center;">
            <strong>📍 Your Location</strong><br/>
            <small>Lat: ${lat.toFixed(6)}<br/>Lon: ${lon.toFixed(6)}</small>
        </div>
    `).openPopup();
    
    // Update Windy map with user's location
    const windyIframe = document.getElementById('windy-map');
    const windyPlaceholder = document.getElementById('windy-placeholder');
    
    if (windyIframe && windyPlaceholder) {
        const windyUrl = `https://embed.windy.com/embed.html?type=map&location=coordinates&metricRain=mm&metricTemp=°C&metricWind=km/h&zoom=6&overlay=satellite&product=ecmwf&level=surface&lat=${lat}&lon=${lon}&detailLat=${lat}&detailLon=${lon}&detail=true&pressure=true&message=true`;
        windyIframe.src = windyUrl;
        
        // Hide placeholder and show iframe
        windyPlaceholder.style.display = 'none';
        windyIframe.style.display = 'block';
    }
}

// Get user's location
if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(
        function(position) {
            const lat = position.coords.latitude;
            const lon = position.coords.longitude;
            updateLocation(lat, lon);
        },
        function(error) {
            console.log('Geolocation error:', error);
            document.getElementById('coordinates').innerHTML = 
                '🌍 Location access denied or unavailable. Showing default location (Barcelona, Spain).';
            updateLocation(41.3031, 2.0763); // Default to Barcelona
        },
        {
            enableHighAccuracy: true,
            timeout: 10000,
            maximumAge: 60000
        }
    );
} else {
    document.getElementById('coordinates').innerHTML = 
        '🌍 Geolocation not supported by this browser. Showing default location (Barcelona, Spain).';
    updateLocation(41.3031, 2.0763); // Default to Barcelona
}
</script>

:::{.column-screen}


<h2 style="text-align: center; margin: 20px 0; color: #666; margin-bottom: 10px;">🌤️ Weather Map - Explore real-time weather conditions around you with this interactive Windy map</h2>

<div style="text-align: center; margin: 20px 0;">

  <div id="windy-placeholder" style="width: 80%; height: 800px; margin: 0 auto; background: linear-gradient(135deg, #74b9ff, #0984e3); border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); display: flex; align-items: center; justify-content: center; color: white; font-size: 18px;">
    
  </div>
<iframe id="windy-map" width="80%" height="800" style="border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); display: none; margin: 0 auto;" frameborder="0"></iframe>
</div>

:::