Elige un modo
10 lugares aleatorios · Haz clic donde crees que están
Cómo se creó este recurso
Leaflet.js + OpenStreetMap: completamente gratuitos, sin API key. Las coordenadas de los 80+ lugares se generaron y verificaron con ayuda de IA.
Leaflet.js
Motor del mapa (cdnjs)
OpenStreetMap
Tiles gratuitos, sin key
Claude / ChatGPT
Coordenadas y diseño
Haversine
Cálculo de distancia real
📋 Prompts utilizados
Datos geográficos y diseño del juego
Quiero crear un juego de geografía interactivo para alumnos de 10-16 años. El jugador ve el nombre de un país o comunidad y debe hacer clic en el mapa donde cree que está. La puntuación depende de la distancia al centro real del lugar. Dame en formato JSON los datos para 4 modos: Países de Europa, Países de América, Países del mundo y Comunidades de España. Para cada lugar necesito: - name: nombre en español - lat y lng: coordenadas del centroide geográfico - extra: capital + un dato interesante Incluye al menos 20-25 lugares por modo. Asegúrate de que las coordenadas son precisas.
Fórmula Haversine y sistema de puntuación
Implementa en JavaScript: 1. La función haversine(lat1, lng1, lat2, lng2) que devuelve la distancia en km entre dos coordenadas geográficas usando la fórmula de Haversine 2. La función getScore(distanciaKm) que devuelva {pts, emoji, label, color} según rangos de distancia adaptados a cada modo (el mismo umbral "perfecto" no sirve igual para Europa que para el mundo entero) Para el modo España usa umbrales más estrictos (< 80 km = perfecto). Para el modo Mundo úsalos más amplios (< 300 km = perfecto). Devuelve el código listo para usar.
Integración de Leaflet en Next.js sin SSR
Necesito integrar Leaflet.js en un componente Next.js 13 con App Router y "use client". Leaflet no puede cargarse en SSR porque usa window y document. Implementa: 1. Carga dinámica desde CDN (cdnjs.cloudflare.com) con createElement('script') y createElement('link') en un useEffect vacío 2. Uso de useState como callback ref (setMapEl) para detectar cuándo el div del mapa está en el DOM 3. Inicialización de L.map() con tiles de OpenStreetMap (gratuito, sin API key) cuando ambos (Leaflet + div) están disponibles 4. Click handler registrado con useEffect([phase, qIdx]) para evitar closures obsoletos: añade map.on('click', fn) al montar y map.off('click', fn) al desmontar 5. L.circleMarker para marcar la respuesta del usuario (rojo) y la ubicación correcta (verde), con L.polyline entre ellos 6. Limpieza completa en el return del useEffect inicial
UI responsive y pantalla de resultados
Para el juego de geografía, diseña con CSS inline (sin librerías): 1. Selección de modo: grid 4 cards con minmax(180px, 1fr), hover con elevación 2. Mapa con height clamp(320px, 50vh, 480px) y overlay oscuro semitransparente encima cuando se muestra el menú de modos 3. Panel de pregunta activa: nombre del lugar en grande, progreso de preguntas, puntuación acumulada 4. Panel de resultado: emoji + label según distancia, km exactos, capital y dato extra, puntos ganados, botón siguiente 5. Pantalla final: puntuación total / máximo, tabla con las 10 respuestas (lugar, km, pts), mensaje personalizado según porcentaje, botones repetir y cambiar modo
🔄 Cómo añadir más modos
Pide a la IA las coordenadas de los nuevos lugares en formato JSON. Añade un nuevo objeto al array MODES siguiendo la misma estructura. Sin tocar nada más.