⏱️ Lectura: 10 min
Un mapa de San Francisco que carga capas de OpenStreetMap y datos abiertos de la ciudad sin depender de un servidor propio: así funciona Isopolis, publicado en sf.isopolis.city. El sitio superpone los límites oficiales de barrio que publica DataSF sobre una base cartográfica de CARTO, y lo hace por completo en el navegador, sin backend ni base de datos intermedia.
📑 En este artículo
La particularidad no está solo en el resultado visual, sino en cómo está armado el código: el bundle de JavaScript del sitio incluye una nota sobre el orden de carga de módulos, un problema clásico y poco discutido del desarrollo web moderno, el orden en que el navegador necesita encontrar un script antes de que ese mismo script pueda resolver sus propias rutas relativas.
TL;DR
- Isopolis (sf.isopolis.city) es un mapa interactivo de los barrios de San Francisco que corre sin backend, solo en el navegador.
- La base cartográfica usa tiles de CARTO construidos sobre datos de OpenStreetMap.
- Los límites de barrio provienen de datasets abiertos publicados por DataSF, el portal de datos de la ciudad.
- El bundle de JavaScript del sitio documenta una nota sobre el orden de carga: el script debe estar en el DOM antes de resolver sus rutas relativas.
- No requiere claves de API de pago: usa tiles públicos y datos abiertos bajo licencias permisivas.
- Es un ejemplo del patrón mapa como sitio estático: HTML, JS y GeoJSON desplegables en cualquier CDN.
Introducción
Desde hace más de una década, cada vez más ciudades publican datos geográficos en formatos abiertos: límites administrativos, rutas de transporte, zonificación. San Francisco fue una de las primeras ciudades de Estados Unidos en abrir su información municipal, y hoy ese catálogo vive en DataSF, el portal de datos abiertos de la ciudad.
Isopolis toma una porción concreta de ese catálogo, los límites de barrio, y los convierte en un mapa navegable. No es un producto comercial ni un servicio con planes de pago: es un ejemplo del patrón mapa como sitio estático, donde todo el trabajo pesado (renderizar tiles, dibujar polígonos, mostrar popups) ocurre en el navegador del visitante, sin ningún servidor propio de por medio.
Qué pasó: el lanzamiento de Isopolis
El sitio sf.isopolis.city presenta un mapa a pantalla completa centrado en San Francisco. La base visual corresponde a los estilos minimalistas típicos de CARTO, construidos sobre datos de OpenStreetMap, el proyecto de cartografía colaborativa que cualquier persona puede editar. Sobre esa base se dibujan los polígonos de barrio, cada uno identificable al pasar el cursor o al tocarlo en móvil.
Lo que hace interesante al proyecto no es solo el resultado final, sino la simplicidad de su enfoque: no hay una API propia, no hay autenticación, no hay una base de datos geoespacial corriendo en un servidor. El navegador pide los tiles a CARTO, pide el GeoJSON de barrios a DataSF, y dibuja todo con JavaScript.
Contexto e historia
OpenStreetMap nació como un proyecto colaborativo abierto y hoy es la fuente de datos de mapas más usada fuera de los grandes proveedores comerciales. OpenStreetMap permite a cualquiera contribuir calles, edificios y puntos de interés, y ese catálogo alimenta servicios de tiles gratuitos o de bajo costo como los de CARTO.
CARTO, por su parte, se especializa en inteligencia de ubicación: ofrece basemaps listos para usar (Positron, Voyager, Dark Matter) que muchos sitios de datos abiertos adoptan porque son gratuitos para tráfico moderado y no requieren diseñar un estilo cartográfico propio.
DataSF encaja en un movimiento más amplio de gobierno abierto que tomó impulso en Estados Unidos a fines de la década de 2000, cuando distintas ciudades empezaron a publicar sus datasets municipales en formatos reutilizables. Ese catálogo incluye, entre cientos de datasets, los límites administrativos que usa Isopolis para dibujar cada barrio.
Detalles técnicos y rendimiento
El detalle técnico más comentable de Isopolis aparece en su propio bundle: una nota sobre que un script tiene que estar en el DOM antes de que el parser llegue a la ruta relativa del propio módulo. Esto no es un capricho, es una consecuencia directa de cómo funcionan los módulos ES en el navegador.
Cuando un script se carga con type="module", el navegador resuelve los import relativos usando la URL del propio módulo (import.meta.url). Si el proyecto además usa un import map para redirigir nombres de paquete a URLs concretas, ese import map tiene que existir en el DOM antes de que el parser llegue al script que lo necesita; si se inserta después, el navegador ya intentó resolver los imports con las reglas por defecto.
💡 Tip: podés confirmar el orden de carga de tus scripts abriendo las herramientas de desarrollador, pestaña Network, y activando la columna Initiator: te muestra qué documento o script disparó cada petición.
Un ejemplo mínimo de mapa con Leaflet y tiles de CARTO se ve así:
const mapa = L.map('mapa').setView([37.7749, -122.4194], 12);
L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
attribution: 'OpenStreetMap contributors, CARTO'
}).addTo(mapa);Ese fragmento crea el mapa centrado en San Francisco y agrega la capa de tiles. No hay servidor propio: el navegador pide directamente los tiles a CARTO.
A la hora de elegir cómo renderizar un mapa así, hay tres opciones habituales que conviene comparar:
| Opción | Cuándo usarla | Ventaja | Limitación |
|---|---|---|---|
| Leaflet | Mapas simples con tiles raster y pocas capas vectoriales | Liviano, API simple, gran ecosistema de plugins | Sin renderizado WebGL nativo, se vuelve lento con miles de polígonos |
| Mapbox GL JS | Mapas vectoriales con estilos personalizados y muchas capas | Renderizado fluido por WebGL, estilos declarativos | Requiere token de Mapbox y factura según volumen de vistas de mapa |
| MapLibre GL JS | Lo mismo que Mapbox GL JS, sin depender de un proveedor de pago | Mismo rendimiento WebGL, es open source | No incluye basemap propio, hay que elegir o alojar tiles vectoriales |
El siguiente diagrama resume el orden en que el navegador procesa el HTML hasta llegar a un mapa renderizado:
flowchart TD
A["Parser HTML"] --> B["script type importmap"]
B --> C["script type module src bundle.js"]
C --> D["Motor de modulos ES"]
D --> E["Resuelve imports relativos"]
E --> F["Mapa renderizado en el DOM"]Cómo empezar a probar Isopolis
No hace falta instalar nada para ver Isopolis: basta con abrir sf.isopolis.city en el navegador. Para reproducir el mismo patrón (mapa estático, sin backend) con tu propia ciudad, un punto de partida mínimo es servir un archivo HTML localmente:
# Windows (PowerShell)
npx serve .
# macOS
npx serve .
# Linux
npx serve .El comando npx serve funciona igual en las tres plataformas porque corre sobre Node.js. Luego, en tu HTML, agregá Leaflet y una capa GeoJSON con los límites de tu ciudad:
fetch('URL_DEL_DATASET_GEOJSON')
.then(function (respuesta) { return respuesta.json(); })
.then(function (barrios) {
L.geoJSON(barrios, {
style: { color: '#2a6f97', weight: 1, fillOpacity: 0.15 },
onEachFeature: function (feature, capa) {
capa.bindPopup(feature.properties.nombre);
}
}).addTo(mapa);
});La URL del dataset la obtenés desde el propio portal de datos abiertos de tu ciudad: casi todos los portales basados en Socrata (como DataSF) tienen un botón de exportación que genera un enlace directo a GeoJSON.
⚠️ Ojo: los basemaps gratuitos de CARTO tienen límites de uso pensados para tráfico moderado; si tu mapa recibe mucho tráfico, revisá sus términos o considerá alojar tiles propios.
Impacto y análisis
El valor de un proyecto como Isopolis no está en la novedad de la tecnología (Leaflet, CARTO y GeoJSON llevan años disponibles), sino en la demostración de que un mapa útil no necesita infraestructura propia. Todo el costo operativo recae en servicios de terceros que ya existen: OpenStreetMap, CARTO y el portal de datos de la ciudad.
Esa arquitectura tiene un límite honesto: dependés por completo de que esos tres servicios sigan disponibles y con las mismas condiciones de uso. Si CARTO cambia su política de basemaps gratuitos o DataSF reestructura un dataset, el mapa se rompe sin previo aviso, y no hay backend propio donde aplicar una capa de caché o un plan B.
Para un desarrollador que quiere prototipar rápido, ese trade-off suele valer la pena: se gana velocidad de desarrollo y costo cero de infraestructura, a cambio de ceder control sobre la disponibilidad a largo plazo.
Qué sigue
El mismo patrón que usa Isopolis (tiles abiertos más datasets municipales) es replicable en cualquier ciudad que publique sus límites administrativos en formato abierto. La aparición de MapLibre GL JS como alternativa gratuita a Mapbox GL JS abre la puerta a mapas vectoriales de mejor rendimiento sin depender de un proveedor de pago, algo que proyectos indie como este probablemente empiecen a adoptar.
📖 Resumen en Telegram: Ver resumen
Probalo vos: entrá a sf.isopolis.city y abrí la pestaña Network del navegador para ver en vivo qué tiles y qué GeoJSON carga el mapa.
Preguntas frecuentes
¿Qué es exactamente Isopolis?
Es un sitio web (sf.isopolis.city) que muestra un mapa interactivo de los barrios de San Francisco, con una base cartográfica de CARTO y límites de barrio tomados de datasets abiertos de DataSF.
¿Isopolis tiene un servidor propio?
No. El mapa carga los tiles y el GeoJSON directamente desde servicios externos (CARTO y DataSF) y se renderiza por completo en el navegador del usuario.
¿Qué significa que el bundle debe estar en el DOM antes de resolver rutas relativas?
Es una referencia al comportamiento de los módulos ES: cuando un script usa rutas relativas o import maps, el navegador necesita haber insertado ese script en el DOM antes de que el motor de módulos resuelva sus propias rutas.
¿Puedo reproducir algo similar para mi propia ciudad?
Sí. Cualquier ciudad con un portal de datos abiertos que publique límites de barrio en GeoJSON puede combinarse con tiles de OpenStreetMap o CARTO usando Leaflet, Mapbox GL JS o MapLibre GL JS.
¿Usar los tiles de CARTO tiene costo?
CARTO ofrece basemaps gratuitos para uso liviano, pero como cualquier servicio de tiles de terceros tiene límites de uso: para tráfico alto conviene revisar sus términos o alojar tiles propios.
Referencias
- sf.isopolis.city: sitio original de Isopolis, fuente de este artículo.
- OpenStreetMap: proyecto colaborativo de cartografía abierta que alimenta los tiles del mapa.
- CARTO: proveedor de los basemaps utilizados por Isopolis.
- DataSF: portal de datos abiertos de la ciudad de San Francisco.
- MapLibre GL JS: alternativa open source a Mapbox GL JS mencionada en la comparación técnica.
- MDN: import maps: documentación sobre cómo el navegador resuelve rutas de módulos.
📱 ¿Te gusta este contenido? Únete a nuestro canal de Telegram @programacion donde publicamos a diario lo más relevante de tecnología, IA y desarrollo. Resúmenes rápidos, contenido fresco todos los días.
0 Comentarios