Leaflet: un visor de inspecciones con GeoJSON

Alcance del ejemplo

Leaflet permite componer un visor 2D sencillo. Su método setView recibe latitud, longitud; la geometría GeoJSON recibe longitud, latitud. Esta diferencia explica muchos mapas desplazados. El popup usa textContent para que un atributo no se interprete como HTML.

Guarde lo siguiente como index.html en una carpeta de laboratorio y sírvalo con python3 -m http.server 8000 --bind 127.0.0.1. Abra http://localhost:8000. Las bibliotecas se descargan de un CDN con versión fijada; requiere conexión. No hay petición de mapas base ni información real.

Ejemplo de código

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Synthetic inspection</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
<style>#map { height: 70vh } body { margin: 1rem; font: 16px sans-serif }</style>
<h1>Synthetic inspection</h1>
<p>Fictional record s1: pending inspection, latitude 6.24, longitude -75.58.</p>
<div id="map" aria-label="Fictional inspection location"></div>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script>
const map = L.map('map').setView([6.24, -75.58], 14)
const record = { type: 'Feature', properties: { id: 's1', status: 'pending' },
  geometry: { type: 'Point', coordinates: [-75.58, 6.24] }
}
L.geoJSON(record, {
  pointToLayer: (feature, latlng) => L.circleMarker(latlng, { radius: 10 }),
  onEachFeature: (feature, layer) => {
    const text = document.createElement('span')
    text.textContent = feature.properties.id + ': ' + feature.properties.status
    layer.bindPopup(text)
  }
}).addTo(map)
</script>
</html>

Compruebe el resultado

Debe aparecer un punto sobre un fondo vacío cerca del centro. Pruebe zoom, arrastre y tamaño de ventana; compruebe que el texto sigue accesible con teclado. Un fondo vacío es intencional: evita confundir un problema de datos con cuotas, credenciales o disponibilidad del proveedor cartográfico.

Si no aparece el punto, revise primero la consola, la descarga del script y la altura del contenedor. Después confirme orden de coordenadas y tipo de geometría. Para conectar una API, valide el estado HTTP y limite el volumen antes de pasar la respuesta al mapa. No descargue toda una base operativa para ocultar atributos en el navegador.

Qué falta para una aplicación de empresa

Añada búsqueda autorizada, estados de carga y error, atribución de datos y mapa base, y una tabla equivalente para tareas que no requieran navegar visualmente. Establezca un presupuesto de tamaño y una prueba con el dispositivo más lento del equipo. Al agregar un mapa base, revise licencia, términos, cuotas y costos del proveedor: la biblioteca abierta no incluye un servicio cartográfico gratuito ilimitado.

Una migración de aplicación también debe resolver impresión, edición, permisos, exportaciones y soporte. Use este laboratorio para validar la capa de visualización; mida por separado esas capacidades antes de sustituir una aplicación ArcGIS.

Elegir Leaflet según la tarea

Un visor pequeño suele necesitar marcadores, ventanas informativas y mapas raster sencillos. Empieza con el modelo mínimo que resuelva el trabajo. Si necesitas estilos extensos de teselas vectoriales o muchos objetos interactivos, compara con MapLibre y mide datos representativos. Es una decisión de arquitectura, no de marcas.

Leaflet sigue siendo una biblioteca cliente. No proporciona permisos sobre registros, revisión ni edición autoritativa. Explicita servicios de lectura y escritura aunque el prototipo cargue un GeoJSON local.

Mostrar texto seguro en ventanas informativas

Los atributos pueden contener caracteres interpretables como HTML. Construye nodos de texto en lugar de interpolar valores sin confianza:

Ejemplo de código

const inspectionLayer = L.geoJSON(featureCollection, {
  onEachFeature: (feature, layer) => {
    const container = document.createElement('div')
    const title = document.createElement('strong')
    title.textContent = String(feature.properties?.name ?? 'Activo sin nombre')
    container.append(title)
    layer.bindPopup(container)
  }
})
inspectionLayer.addTo(map)

El fragmento supone que la página completa creó map y cargó un featureCollection autorizado. Demuestra manejo seguro de texto, no autenticación. Para adjuntos, valida esquemas y destinos permitidos de URL y evita exponer direcciones privadas a quien no tenga acceso.

Sincronizar lista y mapa

Usa la misma clave de negocio en entidad, fila y endpoint de detalle. Seleccionar una fila debe destacar el marcador correcto y mostrar su información; cambiar filtros debe actualizar ambas vistas. Mantén visible la selección o informa que quedó fuera del filtro.

Muestra cuántos registros coinciden y cuántos se presentan, especialmente con paginación. Cien puntos de un resultado de 5.000 no son el inventario completo. Evita miles de marcadores DOM sin medir; acota consultas o elige renderizado y agrupación apropiados.

Probar coordenadas y contenido

GeoJSON almacena longitud antes de latitud. Las APIs Leaflet que reciben LatLng suelen usar latitud antes de longitud, mientras el cargador GeoJSON interpreta su convención. Explicita el límite al crear marcadores propios o ajustar extensión. Prueba una coordenada sintética conocida antes de intercambiar globalmente los valores.

Incluye campo opcional nulo, nombre con tildes, nombre largo y registro sin geometría. La tabla debe servir aunque un registro no aparezca en mapa. Señala ubicaciones ausentes y envíalas a revisión; no las elimines silenciosamente del conteo operacional.

Reemplazar sin perder requisitos

Registra si el visor actual mide, imprime, exporta, autentica adjuntos, edita o permite inspección móvil. Implementa y valida cada tarea. Comparar capturas no comprueba CRS de exportación ni fuga de un adjunto privado.

Con una cuenta de prueba, intenta consultar un registro fuera de su alcance. El servidor debe rechazarlo aunque se conozca la clave. Para datos públicos, verifica atribución y reutilización antes de facilitar descargas. Finaliza con teclado, pantalla estrecha y fallo de red. Esas comprobaciones convierten una demostración de marcadores en una aplicación evaluable.

Referencia: APIs GeoJSON y popup de Leaflet.

Fuentes y documentación

Leaflet documentation

Siguiente paso

Continúe en la colección Open GIS. Para comparar un proyecto concreto, use la calculadora de costo total y solicite una evaluación.