Spaces:
Running
Running
Objetivo
Browse filesCrear una app que muestre SOLO la costa de Lima, Perú, con un mapa y un campo de vientos claro.
Requisitos funcionales
- Mapa centrado en la costa de Lima. Controles de zoom y paneo.
- Capa de viento con FLECHAS que indiquen dirección (rumbo meteorológico) y color por intensidad (velocidad).
- Tooltip al pasar/clicar: velocidad (km/h o m/s) y dirección (° y cardinal).
- Actualización automática de datos cada 10 min.
Diseño de visualización
- Flechas vectoriales orientadas según dirección del viento.
- Escala de color por velocidad (p. ej., baja→media→alta). Incluir leyenda fija.
- Tamaño del vector proporcional a velocidad con límite mínimo/máximo para legibilidad.
Comportamiento con zoom (evitar saturación visual)
- Generalización por nivel de zoom:
- Zoom bajo: muestreo/agrupación (grid o quadtree) y render de un vector representativo por celda.
- Zoom medio: densidad intermedia de vectores.
- Zoom alto: mostrar todos los vectores disponibles.
- Colisión/decluttering: no superponer flechas ni etiquetas; priorizar por magnitud.
- Reescalar dinámicamente el tamaño de flecha y el grosor del trazo según zoom.
Datos
- Fuente API de viento con dirección y velocidad (capa gridded o estaciones). Unidad configurable (m/s, km/h, kt).
- Manejo de API key en backend proxy si aplica.
- Caché ligera para suavizar cambios entre actualizaciones.
Tecnología sugerida
- Mapa: Leaflet o Mapbox GL.
- Render de vectores: Canvas/WebGL para rendimiento.
- Proyección y cálculo de rumbo: convertir dirección meteorológica a ángulo gráfico.
UX
- Panel mínimo con selector de unidad y leyenda de color.
- Animación opcional suave de flechas (no invasiva).
- Modo móvil responsivo.
Entrega
- Código ejecutable, instrucciones de despliegue y env vars para la API.
- README.md +8 -5
- index.html +296 -18
README.md
CHANGED
|
@@ -1,10 +1,13 @@
|
|
| 1 |
---
|
| 2 |
-
title: Lima Wind Whisperer
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
|
|
|
|
|
|
| 8 |
---
|
| 9 |
|
| 10 |
-
|
|
|
|
|
|
| 1 |
---
|
| 2 |
+
title: Lima Wind Whisperer 🌬️
|
| 3 |
+
colorFrom: pink
|
| 4 |
+
colorTo: blue
|
| 5 |
+
emoji: 🐳
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
| 8 |
+
tags:
|
| 9 |
+
- deepsite-v3
|
| 10 |
---
|
| 11 |
|
| 12 |
+
# Welcome to your new DeepSite project!
|
| 13 |
+
This project was created with [DeepSite](https://deepsite.hf.co).
|
index.html
CHANGED
|
@@ -1,19 +1,297 @@
|
|
| 1 |
-
<!
|
| 2 |
-
<html>
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
| 16 |
-
|
| 17 |
-
|
| 18 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 19 |
</html>
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="es">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>Vientos de Lima | Wind Whisperer</title>
|
| 7 |
+
<link rel="icon" type="image/x-icon" href="https://static.photos/blue/200x200/42">
|
| 8 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 9 |
+
<script src="https://unpkg.com/feather-icons"></script>
|
| 10 |
+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet.js"></script>
|
| 11 |
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet.css"/>
|
| 12 |
+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/chroma.min.js"></script>
|
| 13 |
+
<style>
|
| 14 |
+
#map {
|
| 15 |
+
height: 100vh;
|
| 16 |
+
width: 100%;
|
| 17 |
+
position: relative;
|
| 18 |
+
}
|
| 19 |
+
.wind-arrow {
|
| 20 |
+
position: absolute;
|
| 21 |
+
transform-origin: center;
|
| 22 |
+
stroke-linecap: round;
|
| 23 |
+
}
|
| 24 |
+
.legend {
|
| 25 |
+
background: rgba(255, 255, 255, 0.9);
|
| 26 |
+
padding: 1rem;
|
| 27 |
+
border-radius: 0.5rem;
|
| 28 |
+
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
| 29 |
+
}
|
| 30 |
+
.legend-gradient {
|
| 31 |
+
height: 20px;
|
| 32 |
+
width: 100%;
|
| 33 |
+
border-radius: 4px;
|
| 34 |
+
margin: 10px 0;
|
| 35 |
+
}
|
| 36 |
+
</style>
|
| 37 |
+
</head>
|
| 38 |
+
<body class="bg-gray-50 font-sans">
|
| 39 |
+
<div class="flex flex-col h-screen">
|
| 40 |
+
<header class="bg-gradient-to-r from-blue-500 to-cyan-400 text-white p-4 shadow-md">
|
| 41 |
+
<div class="container mx-auto flex justify-between items-center">
|
| 42 |
+
<h1 class="text-2xl font-bold flex items-center">
|
| 43 |
+
<i data-feather="wind" class="mr-2"></i> Lima Wind Whisperer
|
| 44 |
+
</h1>
|
| 45 |
+
<div class="flex items-center space-x-4">
|
| 46 |
+
<div class="flex items-center">
|
| 47 |
+
<label for="unit-select" class="mr-2 text-sm font-medium">Unidad:</label>
|
| 48 |
+
<select id="unit-select" class="bg-white/20 border border-white/30 rounded px-2 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-white">
|
| 49 |
+
<option value="kmh">km/h</option>
|
| 50 |
+
<option value="ms">m/s</option>
|
| 51 |
+
<option value="knots">nudos</option>
|
| 52 |
+
</select>
|
| 53 |
+
</div>
|
| 54 |
+
<button id="refresh-btn" class="flex items-center bg-white/20 hover:bg-white/30 px-3 py-1 rounded transition">
|
| 55 |
+
<i data-feather="refresh-cw" class="mr-1" width="16"></i>
|
| 56 |
+
<span class="text-sm">Actualizar</span>
|
| 57 |
+
</button>
|
| 58 |
+
</div>
|
| 59 |
+
</div>
|
| 60 |
+
</header>
|
| 61 |
+
|
| 62 |
+
<div id="map"></div>
|
| 63 |
+
|
| 64 |
+
<div id="legend" class="absolute bottom-4 right-4 z-[1000] legend">
|
| 65 |
+
<h3 class="font-bold text-gray-800 mb-2">Velocidad del viento</h3>
|
| 66 |
+
<div id="legend-gradient" class="legend-gradient"></div>
|
| 67 |
+
<div class="flex justify-between text-xs text-gray-600">
|
| 68 |
+
<span>0</span>
|
| 69 |
+
<span>20</span>
|
| 70 |
+
<span>40 km/h</span>
|
| 71 |
+
</div>
|
| 72 |
+
</div>
|
| 73 |
+
|
| 74 |
+
<div id="tooltip" class="absolute bg-white p-3 rounded shadow-lg z-[1000] hidden">
|
| 75 |
+
<div class="flex items-center mb-1">
|
| 76 |
+
<i data-feather="map-pin" class="text-blue-500 mr-2" width="16"></i>
|
| 77 |
+
<span id="location" class="font-medium"></span>
|
| 78 |
+
</div>
|
| 79 |
+
<div class="grid grid-cols-2 gap-2 text-sm">
|
| 80 |
+
<div class="flex items-center">
|
| 81 |
+
<i data-feather="compass" class="text-gray-500 mr-2" width="14"></i>
|
| 82 |
+
<span id="direction"></span>
|
| 83 |
+
</div>
|
| 84 |
+
<div class="flex items-center">
|
| 85 |
+
<i data-feather="wind" class="text-gray-500 mr-2" width="14"></i>
|
| 86 |
+
<span id="speed"></span>
|
| 87 |
+
</div>
|
| 88 |
+
</div>
|
| 89 |
+
</div>
|
| 90 |
+
</div>
|
| 91 |
+
|
| 92 |
+
<script>
|
| 93 |
+
// Configuración inicial
|
| 94 |
+
const config = {
|
| 95 |
+
center: [-12.0464, -77.0428], // Lima
|
| 96 |
+
zoom: 11,
|
| 97 |
+
minZoom: 8,
|
| 98 |
+
maxZoom: 18,
|
| 99 |
+
windDataUrl: 'https://api.open-meteo.com/v1/gfs?latitude=-12.0464&longitude=-77.0428&hourly=windspeed_10m,winddirection_10m',
|
| 100 |
+
updateInterval: 600000 // 10 minutos
|
| 101 |
+
};
|
| 102 |
+
|
| 103 |
+
// Inicializar mapa
|
| 104 |
+
const map = L.map('map', {
|
| 105 |
+
center: config.center,
|
| 106 |
+
zoom: config.zoom,
|
| 107 |
+
minZoom: config.minZoom,
|
| 108 |
+
maxZoom: config.maxZoom
|
| 109 |
+
});
|
| 110 |
+
|
| 111 |
+
// Añadir capa base
|
| 112 |
+
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
| 113 |
+
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
| 114 |
+
}).addTo(map);
|
| 115 |
+
|
| 116 |
+
// Escala de colores para la velocidad del viento
|
| 117 |
+
const colorScale = chroma.scale(['#4cc9f0', '#4361ee', '#3a0ca3', '#7209b7', '#f72585']).domain([0, 40]);
|
| 118 |
+
|
| 119 |
+
// Actualizar gradiente de leyenda
|
| 120 |
+
function updateLegendGradient() {
|
| 121 |
+
const gradient = document.getElementById('legend-gradient');
|
| 122 |
+
gradient.style.background = `linear-gradient(to right, ${colorScale(0).hex()}, ${colorScale(10).hex()}, ${colorScale(20).hex()}, ${colorScale(30).hex()}, ${colorScale(40).hex()})`;
|
| 123 |
+
}
|
| 124 |
+
|
| 125 |
+
// Convertir dirección meteorológica a cardinal
|
| 126 |
+
function degreesToCardinal(degrees) {
|
| 127 |
+
const cardinals = ['N', 'NNE', 'NE', 'ENE', 'E', 'ESE', 'SE', 'SSE', 'S', 'SSW', 'SW', 'WSW', 'W', 'WNW', 'NW', 'NNW'];
|
| 128 |
+
const index = Math.round((degrees % 360) / 22.5);
|
| 129 |
+
return cardinals[(index % 16)];
|
| 130 |
+
}
|
| 131 |
+
|
| 132 |
+
// Dibujar flecha de viento
|
| 133 |
+
function drawWindArrow(latlng, speed, direction, unit = 'kmh') {
|
| 134 |
+
// Normalizar velocidad según unidad
|
| 135 |
+
let displaySpeed;
|
| 136 |
+
let displayUnit;
|
| 137 |
+
|
| 138 |
+
switch(unit) {
|
| 139 |
+
case 'ms':
|
| 140 |
+
displaySpeed = speed / 3.6;
|
| 141 |
+
displayUnit = 'm/s';
|
| 142 |
+
break;
|
| 143 |
+
case 'knots':
|
| 144 |
+
displaySpeed = speed / 1.852;
|
| 145 |
+
displayUnit = 'kt';
|
| 146 |
+
break;
|
| 147 |
+
default:
|
| 148 |
+
displaySpeed = speed;
|
| 149 |
+
displayUnit = 'km/h';
|
| 150 |
+
}
|
| 151 |
+
|
| 152 |
+
// Convertir dirección meteorológica (de dónde viene) a dirección gráfica (hacia dónde va)
|
| 153 |
+
const graphicDirection = (direction + 180) % 360;
|
| 154 |
+
|
| 155 |
+
// Calcular tamaño proporcional a la velocidad (con límites)
|
| 156 |
+
const minSize = 10;
|
| 157 |
+
const maxSize = 30;
|
| 158 |
+
const size = Math.min(maxSize, Math.max(minSize, speed / 2));
|
| 159 |
+
|
| 160 |
+
// Crear elemento SVG para la flecha
|
| 161 |
+
const arrow = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
| 162 |
+
arrow.setAttribute("width", size * 2);
|
| 163 |
+
arrow.setAttribute("height", size * 2);
|
| 164 |
+
arrow.setAttribute("viewBox", "0 0 24 24");
|
| 165 |
+
arrow.className = "wind-arrow";
|
| 166 |
+
arrow.setAttribute("data-speed", speed);
|
| 167 |
+
arrow.setAttribute("data-direction", direction);
|
| 168 |
+
arrow.setAttribute("data-lat", latlng.lat);
|
| 169 |
+
arrow.setAttribute("data-lng", latlng.lng);
|
| 170 |
+
arrow.setAttribute("data-unit", unit);
|
| 171 |
+
|
| 172 |
+
// Definir la flecha como un path SVG
|
| 173 |
+
const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
|
| 174 |
+
path.setAttribute("d", "M12 2L4 12L8 12L8 22L16 22L16 12L20 12L12 2Z");
|
| 175 |
+
path.setAttribute("fill", colorScale(speed).hex());
|
| 176 |
+
path.setAttribute("stroke", "#fff");
|
| 177 |
+
path.setAttribute("stroke-width", "0.5");
|
| 178 |
+
|
| 179 |
+
arrow.appendChild(path);
|
| 180 |
+
arrow.style.transform = `rotate(${graphicDirection}deg)`;
|
| 181 |
+
|
| 182 |
+
// Convertir a capa Leaflet
|
| 183 |
+
const icon = L.divIcon({
|
| 184 |
+
html: arrow.outerHTML,
|
| 185 |
+
className: '',
|
| 186 |
+
iconSize: [size, size]
|
| 187 |
+
});
|
| 188 |
+
|
| 189 |
+
const marker = L.marker(latlng, {
|
| 190 |
+
icon: icon,
|
| 191 |
+
interactive: true
|
| 192 |
+
}).addTo(map);
|
| 193 |
+
|
| 194 |
+
// Eventos para tooltip
|
| 195 |
+
marker.on('mouseover', function(e) {
|
| 196 |
+
const tooltip = document.getElementById('tooltip');
|
| 197 |
+
tooltip.style.left = `${e.originalEvent.clientX + 10}px`;
|
| 198 |
+
tooltip.style.top = `${e.originalEvent.clientY + 10}px`;
|
| 199 |
+
tooltip.classList.remove('hidden');
|
| 200 |
+
|
| 201 |
+
document.getElementById('location').textContent = `${latlng.lat.toFixed(4)}, ${latlng.lng.toFixed(4)}`;
|
| 202 |
+
document.getElementById('direction').textContent = `${direction}° ${degreesToCardinal(direction)}`;
|
| 203 |
+
document.getElementById('speed').textContent = `${displaySpeed.toFixed(1)} ${displayUnit}`;
|
| 204 |
+
});
|
| 205 |
+
|
| 206 |
+
marker.on('mouseout', function() {
|
| 207 |
+
document.getElementById('tooltip').classList.add('hidden');
|
| 208 |
+
});
|
| 209 |
+
|
| 210 |
+
return marker;
|
| 211 |
+
}
|
| 212 |
+
|
| 213 |
+
// Generar datos de viento simulados (en una aplicación real, esto vendría de una API)
|
| 214 |
+
function generateWindData() {
|
| 215 |
+
const data = [];
|
| 216 |
+
const gridSize = 0.1;
|
| 217 |
+
|
| 218 |
+
for(let lat = -12.2; lat <= -11.9; lat += gridSize) {
|
| 219 |
+
for(let lng = -77.2; lng <= -76.8; lng += gridSize) {
|
| 220 |
+
// Simular variaciones de velocidad y dirección
|
| 221 |
+
const baseSpeed = 5 + Math.random() * 20;
|
| 222 |
+
const speed = baseSpeed + Math.sin(lat * 10) * 5 + Math.cos(lng * 10) * 5;
|
| 223 |
+
const direction = (270 + (lat + 12) * 100 + (lng + 77) * 50) % 360;
|
| 224 |
+
|
| 225 |
+
data.push({
|
| 226 |
+
latlng: [lat, lng],
|
| 227 |
+
speed: Math.max(0, speed),
|
| 228 |
+
direction: direction
|
| 229 |
+
});
|
| 230 |
+
}
|
| 231 |
+
}
|
| 232 |
+
|
| 233 |
+
return data;
|
| 234 |
+
}
|
| 235 |
+
|
| 236 |
+
// Actualizar visualización con nuevos datos
|
| 237 |
+
function updateWindData(unit = 'kmh') {
|
| 238 |
+
// Limpiar marcadores existentes
|
| 239 |
+
map.eachLayer(layer => {
|
| 240 |
+
if (layer instanceof L.Marker) {
|
| 241 |
+
map.removeLayer(layer);
|
| 242 |
+
}
|
| 243 |
+
});
|
| 244 |
+
|
| 245 |
+
// Generar o cargar datos
|
| 246 |
+
const windData = generateWindData();
|
| 247 |
+
|
| 248 |
+
// Dibujar flechas según el nivel de zoom
|
| 249 |
+
const currentZoom = map.getZoom();
|
| 250 |
+
let sampleRate = 1;
|
| 251 |
+
|
| 252 |
+
if (currentZoom < 10) sampleRate = 4;
|
| 253 |
+
else if (currentZoom < 12) sampleRate = 2;
|
| 254 |
+
|
| 255 |
+
for(let i = 0; i < windData.length; i += sampleRate) {
|
| 256 |
+
const point = windData[i];
|
| 257 |
+
drawWindArrow(
|
| 258 |
+
L.latLng(point.latlng[0], point.latlng[1]),
|
| 259 |
+
point.speed,
|
| 260 |
+
point.direction,
|
| 261 |
+
unit
|
| 262 |
+
);
|
| 263 |
+
}
|
| 264 |
+
}
|
| 265 |
+
|
| 266 |
+
// Manejar cambios en la unidad
|
| 267 |
+
document.getElementById('unit-select').addEventListener('change', function() {
|
| 268 |
+
updateWindData(this.value);
|
| 269 |
+
});
|
| 270 |
+
|
| 271 |
+
// Manejar actualización manual
|
| 272 |
+
document.getElementById('refresh-btn').addEventListener('click', function() {
|
| 273 |
+
updateWindData(document.getElementById('unit-select').value);
|
| 274 |
+
});
|
| 275 |
+
|
| 276 |
+
// Manejar cambios de zoom
|
| 277 |
+
map.on('zoomend', function() {
|
| 278 |
+
updateWindData(document.getElementById('unit-select').value);
|
| 279 |
+
});
|
| 280 |
+
|
| 281 |
+
// Actualizar automáticamente
|
| 282 |
+
function startAutoRefresh() {
|
| 283 |
+
updateWindData();
|
| 284 |
+
updateLegendGradient();
|
| 285 |
+
setInterval(() => {
|
| 286 |
+
updateWindData(document.getElementById('unit-select').value);
|
| 287 |
+
}, config.updateInterval);
|
| 288 |
+
}
|
| 289 |
+
|
| 290 |
+
// Inicializar
|
| 291 |
+
document.addEventListener('DOMContentLoaded', function() {
|
| 292 |
+
feather.replace();
|
| 293 |
+
startAutoRefresh();
|
| 294 |
+
});
|
| 295 |
+
</script>
|
| 296 |
+
</body>
|
| 297 |
</html>
|