MapLibre: construya un mapa web con GeoJSON

Alcance del ejemplo

MapLibre usa estilos declarativos y WebGL. Este ejemplo parte de un fondo vacío y una fuente GeoJSON para aislar el contrato entre datos y representación. El arreglo de coordenadas es longitud, latitud. Si el navegador no permite WebGL, la descripción textual conserva la ubicación.

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 stations</title>
<link rel="stylesheet" href="https://unpkg.com/maplibre-gl@5.24.0/dist/maplibre-gl.css">
<style>#map { height: 70vh } body { margin: 1rem; font: 16px sans-serif }</style>
<h1>Synthetic stations</h1>
<p>Fictional data: Station A at longitude -75.58, latitude 6.24.</p>
<div id="map" aria-label="Map of a fictional station"></div>
<script src="https://unpkg.com/maplibre-gl@5.24.0/dist/maplibre-gl.js"></script>
<script>
const map = new maplibregl.Map({
  container: 'map', center: [-75.58, 6.24], zoom: 13,
  style: { version: 8, sources: {}, layers: [
    { id: 'background', type: 'background', paint: { 'background-color': '#e8eef0' } }
  ] }
})
map.addControl(new maplibregl.NavigationControl())
map.on('load', () => {
  map.addSource('stations', { type: 'geojson', data: {
    type: 'FeatureCollection', features: [{ type: 'Feature', id: 's1',
      properties: { name: 'Station A' },
      geometry: { type: 'Point', coordinates: [-75.58, 6.24] }
    }]
  } })
  map.addLayer({ id: 'stations', type: 'circle', source: 'stations',
    paint: { 'circle-radius': 10, 'circle-color': '#176b50' }
  })
})
</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.

Definir responsabilidades del navegador

MapLibre dibuja el mapa; no aporta tu base, identidad, API de edición ni licencia de mapa base. Define el recorrido de datos antes de reemplazar una aplicación:

Responsabilidad	Componente de ejemplo	Pregunta de aceptación
Datos autorizados	Vista y API	¿Devuelve solo registros y campos permitidos?
Presentación	Estilo y capas MapLibre	¿Se entienden estado, escala y atribución?
Búsqueda y selección	Endpoint acotado y clave estable	¿La búsqueda selecciona el mismo objeto?
Edición	API validada	¿Rechaza cambios inválidos o desactualizados?
Exportación o impresión	Flujo de salida definido	¿El archivo cumple la tarea del usuario?

Para un visor público, publica deliberadamente una selección autorizada. Quitar un campo del popup no lo elimina de la respuesta de red. Quien descarga el origen puede inspeccionar atributos. Aplica límites antes de serializar y mantén credenciales fuera de paquetes JavaScript y estilos.

Agregar datos sin perder identidad

El laboratorio de referencia incluye data/municipal-assets.geojson con claves sintéticas. Usa su visor e instrucciones en lugar de copiar los 10.000 registros al HTML mínimo. Conserva asset_id entre tabla, búsqueda, mapa y consulta de detalle.

Al sustituir datos, utiliza el mecanismo de actualización del origen después de cargar el mapa. No crees repetidamente capas con los mismos identificadores. Recargar estilos puede eliminar capas y fuentes añadidas por la aplicación; reincorpóralas con un ciclo definido. Prueba salir y volver a la pantalla dentro del framework real: un HTML independiente no demuestra limpieza de componentes.

Acotar consultas interactivas

Cancela solicitudes superadas por otra extensión y evita aplicar una respuesta lenta a una vista más reciente. Agrupa movimientos cuando corresponda y usa límites explícitos. Una API puede paginar; mostrar solo la primera página sin avisar produce una falsa impresión de cobertura.

Usa GeoJSON para conjuntos acotados y mide transferencia y procesamiento en dispositivos representativos. Considera teselas para visualización extensa, conservando una API de entidades para detalle autoritativo. La geometría generalizada para dibujar no debe convertirse en fuente de medidas de ingeniería.

Mostrar fallos y estados de acceso

Prueba por separado ausencia de coincidencias, acceso denegado, fallo de red, respuesta inválida, recursos de estilo ausentes y gráficos no soportados. Cada caso debe dejar un mensaje o alternativa útil. Un mapa vacío es ambiguo: nadie sabe si faltan activos o falló la solicitud.

Ofrece lista o tabla para búsqueda y detalle. El teclado debe alcanzar controles, mover foco predeciblemente y salir del mapa. Respeta movimiento reducido al animar cámara. No distingas estados únicamente por color y conserva atribución legible en pantallas estrechas.

Aceptar la migración de un visor

Elige cinco tareas existentes: buscar una clave, filtrar estado, abrir un adjunto, exportar selección autorizada y compartir vista. Repítelas con una cuenta de lectura. Registra capacidades faltantes; una visualización correcta no demuestra reemplazo de todos los widgets ArcGIS.

Mide solicitudes, bytes y tiempo hasta una tarea utilizable en la red prevista. No publiques “más rápido que ArcGIS” desde una demostración estática local. MapLibre puede participar en una arquitectura más económica, pero datos, alojamiento, mapas base y soporte siguen en el modelo de costos.

Referencia: API de origen GeoJSON MapLibre.

Fuentes y documentación

MapLibre 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.