Programación para SIG: Buscador de lugares cercanos en el mapa con Leaflet
Preparado por: Julián Garzón, PhD
Universidad del Quindío
Programa de Ingeniería Topográfica y Geomática
104.2025
Objetivo general
Diseñar una aplicación web que permita al usuario buscar lugares cercanos (como restaurantes,
hospitales, parques, etc.) dentro de un área de influencia seleccionada por el usuario, a partir
de un punto en el mapa, sin necesidad de tener una lista previa de lugares.
Requisitos de la actividad
1. Interfaz básica
• Mapa inicial con Leaflet centrado en una ubicación predeterminada.
• Un botón llamado Buscar lugares cercanos.
• Una barra o input opcional para elegir el tipo de lugar (restaurante, hospital, etc.).
2. Interacción
• Al hacer clic en el botón, se debe:
o Obtener la ubicación del usuario o permitir seleccionar un punto en el mapa.
o Dibujar un círculo de 500 metros de radio como área de búsqueda.
o Consultar una API de lugares cercanos (Overpass API, Geoapify Places, o similar).
o Mostrar los resultados (al menos 5) en el mapa como marcadores.
3. Visualización de resultados
• Mostrar los lugares encontrados como markers.
• Agregar popups con nombre y tipo del lugar.
• (Opcional) Mostrar una lista al costado con los lugares encontrados.
Programación para SIG: Buscador de lugares cercanos en el mapa con Leaflet
Preparado por: Julián Garzón, PhD
Universidad del Quindío
Programa de Ingeniería Topográfica y Geomática
104.2025
Herramientas sugeridas
• Leaflet para el mapa.
• Overpass API o Geoapify Places API para obtener los lugares.
• HTML, CSS y JavaScript.
¿Qué pueden aprender los estudiantes con esto?
• Cómo se construye una consulta dinámica a una API externa.
• Cómo usar eventos en el mapa (como click).
• Cómo integrar HTML + JS + Leaflet de forma modular.
• Nociones básicas de geoprocesamiento (buffer de 500 m).
Criterios de evaluación
Tabla 1. Mapa de funciones.
Criterio Descripción Puntaje
El mapa carga correctamente.
1.0
Interfaz funcional Botón visible y funcional.
Se dibuja correctamente el
Área de influencia círculo desde el punto de 1.0
búsqueda.
Se realiza consulta real a una
Integración API 1.5
API de lugares cercanos.
Se muestran al menos 5
Visualización de resultados lugares correctamente en el 1.0
mapa.
Código bien comentado,
Claridad del código 0.5
organizado y entendible.
Programación para SIG: Buscador de lugares cercanos en el mapa con Leaflet
Preparado por: Julián Garzón, PhD
Universidad del Quindío
Programa de Ingeniería Topográfica y Geomática
104.2025
Extras opcionales (puntos adicionales)
• Permitir seleccionar el tipo de lugar desde un menú desplegable.
• Mostrar la lista de lugares en un panel lateral.
• Usar íconos personalizados según el tipo de lugar.
Ejemplo de lugares posibles para buscar
• "amenity=restaurant" para restaurantes.
• "amenity=hospital" para hospitales.
• "tourism=attraction" para sitios turísticos.
• "shop=supermarket" para supermercados.
Condiciones de entrega
La entrega del trabajo debe realizarse en un documento de Word (.docx), en el cual se incluyan
claramente separados los bloques de código correspondientes a los lenguajes HTML, JavaScript
(JS) y CSS. Esto permitirá una mejor revisión y facilitará la gestión del archivo en la plataforma
Moodle.
Se recomienda utilizar encabezados o títulos para identificar cada sección del código, por
ejemplo:
• Código HTML
• Código JavaScript
• Código CSS
No se deben enviar archivos por separado (.html, .js, .css), únicamente el documento Word con
todo el contenido. Fecha y hora límite de entrega. Viernes 25 de abril a las 23:59 horas, a
través de la plataforma del espacio académico Moodle. Después de ese horario, la actividad no
estará habilitada para nuevos envíos.
