Map Criminals

Monitor interactivo de personas buscadas a nivel mundial, con mapa en tiempo real, filtros avanzados y soporte bilingüe (ES/EN).

---

Características

• Mapa mundial interactivo (Leaflet + CartoDB Dark) con marcadores pulsantes por nivel de peligro
• 39 registros cubriendo 9 países: Ecuador, Colombia, Perú, México, Brasil, Argentina, Venezuela, Chile y EE.UU.
• Filtros en tiempo real: búsqueda por nombre, crimen y nivel de peligro
• Selección de país toggleable: clic para enfocar, clic doble para volver a vista mundial
• Niveles de amenaza codificados por color según recompensa:

  Nivel	Recompensa	Color
  CRÍTICO	≥ $5,000,000	Rojo
  ALTO	≥ $1,000,000	Naranja
  MEDIO	≥ $500,000	Amarillo
  BAJO	≥ $50,000	Verde azulado
  MÍN	< $50,000	Gris

• Bilingüe ES/EN con toggle en la barra de navegación
• Reloj en vivo en la navbar
• Desplegado en Railway con redeploy automático por git push

---

Estructura del proyecto

Map_Criminals_Code/
├── index.html          # UI principal
├── app.js              # Lógica de la app (estado, filtros, i18n, render)
├── script.js           # Mapa Leaflet (markers, radar, flyTo, popups)
├── style.css           # Estilos (tema oscuro HUD)
├── server.js           # Servidor Express (puerto 3000 / $PORT)
├── data/
│   └── manual.json     # Base de datos de personas buscadas (39 registros)
├── routes/
│   ├── wanted.js       # API REST: GET /api/wanted
│   └── trends.js       # API REST: GET /api/trends
├── Imagenes/
│   └── logo.png        # Logo de la navbar
└── package.json

---

Instalación y uso local

Requisitos

• Node.js 18+

Pasos

# 1. Clonar el repositorio
git clone https://github.com/tu-usuario/Map_Criminals_Code.git
cd Map_Criminals_Code

# 2. Instalar dependencias
npm install

# 3. Iniciar el servidor
node server.js

# 4. Abrir en el navegador
# http://localhost:3000

---

Uso de la interfaz

Panel de países

• Clic en una bandera → enfoca ese país en el mapa y muestra solo sus registros
• Clic en la misma bandera → deselecciona y vuelve a vista mundial con todos los registros

Barra de filtros

• Campo de texto — busca por nombre o descripción (debounce 250ms)
• Dropdown de crimen — filtra por tipo de crimen (se puebla dinámicamente)
• Dropdown de nivel — filtra por nivel de peligro (CRÍTICO / ALTO / MEDIO / BAJO / MÍN)
• Botón Limpiar — resetea todos los filtros manteniendo el país seleccionado
• Los filtros se combinan con lógica AND

Mapa

• Clic en un marcador → abre popup con nombre, crimen principal y recompensa
• Clic en la mini-card del panel → hace zoom al marcador en el mapa

Idioma

• Botón EN / ES en la navbar alterna el idioma de toda la interfaz, incluyendo los dropdowns de filtros

---

API REST

GET /api/wanted

Devuelve registros de la lista de buscados.

GET http://localhost:3000/api/wanted

GET /api/trends

Devuelve datos de tendencias.

GET http://localhost:3000/api/trends

---

Datos (data/manual.json)

Cada registro sigue este schema:

{
  "id": "us-001",
  "country": "US",
  "source": "manual",
  "name": "Nombre completo",
  "description": "Descripción del caso.",
  "crimes": ["Crimen 1", "Crimen 2"],
  "reward": 250000,
  "nationality": "Estadounidense",
  "lat": 33.4484,
  "lng": -112.0740,
  "photo": "https://url-de-foto.jpg"
}

Campo	Tipo	Descripción
id	string	Identificador único (cc-NNN)
country	string	Código ISO 2 del país
source	string	Siempre "manual"
name	string	Nombre o alias
description	string	Descripción del caso
crimes	string[]	Lista de crímenes
reward	number	Recompensa en USD (0 si no hay)
nationality	string	Nacionalidad
lat / lng	number	Coordenadas para el marcador
photo	string	URL de foto (vacío si no hay)

---

Despliegue en Railway

El proyecto está configurado para Railway. Cada git push a main activa un redeploy automático.

git add .
git commit -m "descripción del cambio"
git push

La variable de entorno PORT es asignada automáticamente por Railway.

---

Países incluidos

Código	País	Registros
EC	Ecuador	5
CO	Colombia	5
PE	Perú	4
MX	México	5
BR	Brasil	4
AR	Argentina	3
VE	Venezuela	3
CL	Chile	3
US	EE.UU.	7