Mapa Interactivo con Geoapify y Leaflet

Aplicación web que muestra múltiples ubicaciones en un mapa interactivo utilizando la API de Geoapify y la biblioteca Leaflet.

Requisitos Previos

• Cuenta en Geoapify (gratis)
• Servidor web local (como XAMPP) o alojamiento web

Configuración

1. Obtener una API Key de Geoapify

   • Regístrate en Geoapify
   • Ve al Panel de Control
   • Crea un nuevo proyecto o usa el predeterminado
   • Copia tu API Key

2. Configurar la Aplicación

   • Abre el archivo assets/home.js
   • Busca la línea que dice const API_KEY = '...'
   • Reemplaza el texto entre comillas con tu API Key de Geoapify

Uso

1. Abre el archivo index.html en tu navegador o en un servidor web
2. El mapa cargará automáticamente y mostrará marcadores en las ubicaciones definidas
3. Haz clic en cualquier marcador para ver la dirección completa

Personalización

Para agregar o modificar ubicaciones:

1. Abre el archivo assets/home.js
2. Modifica el array addresses con las direcciones que desees
3. Las direcciones deben incluir ciudad y país para mejor precisión

Notas Importantes

• La API de Geoapify tiene límites en el plan gratuito
• Para producción, considera manejar las llamadas a la API desde un backend
• No expongas tu API Key en código del lado del cliente en producción

Recursos

• Documentación de Geoapify
• Documentación de Leaflet
• Iconos de Marcadores (opcional)

Expresiones de Gratitud 🎁

Comenta a otros sobre este proyecto 📢
Invita una cerveza 🍺 o un café ☕
Paypal iamdeveloper86@gmail.com
Da las gracias públicamente 🤓.

No olvides SUSCRIBIRTE 👍