Cómo se hizo el mapa isométrico de la Ciudad de México

Este es el registro honesto de cómo se construyó CDMX Isométrica: qué datos se usaron, cómo se convirtieron en dibujo, y qué salió mal por el camino. No es un tutorial — es la bitácora de un proyecto que tardó meses y que sigue cambiando.

195,264 elementos Es lo que pesa la Ciudad de México cuando la bajas de OpenStreetMap: edificios, calles, parques, vías del Metro, mercados y colonias, cada uno con sus coordenadas.

De dónde salen los datos

Todo el mapa se dibuja a partir de OpenStreetMap, el mapa libre que mantiene gente voluntaria en todo el mundo. Nadie de este proyecto midió una sola calle: lo que se ve es el trabajo acumulado de miles de personas que fueron capturando la ciudad, edificio por edificio, durante años.

Los datos se piden a través de Overpass, un servicio que permite hacer preguntas al mapa mundial del tipo «dame todos los edificios y calles dentro de este rectángulo». La ciudad se descarga por zonas —el Centro Histórico, Coyoacán, Xochimilco, Azcapotzalco y unas cincuenta más— porque pedirla completa de un jalón hace que el servidor corte la conexión a medio camino.

De cada edificio interesan tres cosas: su contorno, su altura y de qué está hecho. La altura es la parte frágil: en OpenStreetMap muchos edificios no la tienen, y entonces se deduce del número de pisos. Cuando tampoco hay pisos, se usa una altura típica según el tipo de construcción. Por eso hay zonas donde las casas se ven parejas: no es que sean iguales, es que nadie ha capturado su altura todavía.

Qué significa «isométrico» aquí

La proyección isométrica es la de los videojuegos de los noventa: la cámara mira la ciudad desde arriba y de lado, siempre con el mismo ángulo, sin perspectiva. Un edificio de treinta metros se ve exactamente igual de alto esté en el Centro o en Santa Fe.

Eso tiene una consecuencia bonita y una incómoda. La bonita es que se puede recorrer la ciudad sin que nada se deforme. La incómoda es que los edificios altos tapan lo que tienen detrás, y hay que decidir en qué orden se dibuja todo para que la ciudad se lea. La regla que quedó: primero el suelo, luego el agua, luego las calles, y al final los edificios de atrás hacia adelante, como quien apila cartas.

El horneado: 500 km² convertidos en imágenes

Un mapa así no se dibuja en el momento en que alguien lo abre. Sería imposible: son más de cien mil edificios y ninguna computadora los dibuja todos a tiempo. En vez de eso, la ciudad se dibuja una sola vez, por adelantado, y se corta en cuadritos que luego se sirven como fotos. A ese proceso le decimos hornear.

~17,500 imágenes La ciudad partida en cuadros de 512 píxeles, en cinco niveles de acercamiento distintos. Cerca de 1.3 GB en total, y unos cuarenta minutos de horneado cada vez que algo cambia.

Los cinco niveles existen porque el detalle que sirve de lejos no sirve de cerca. En la vista de ciudad completa no tiene sentido dibujar cada árbol; en la vista de calle, sí. Cuando alguien se acerca, el visor cambia al nivel más fino sin que se note.

Aquí hay un detalle que costó entender: como el mapa es pixel art, ampliar una imagen se ve mejor que reducirla. Al ampliar se apaga el suavizado y los bordes quedan duros y limpios, que es justo el estilo; al reducir, el navegador promedia los píxeles y todo se vuelve papilla. Es lo contrario de lo que uno haría con una fotografía.

Lo que el mapa dibuja y de dónde lo saca

Lo que vesDe dónde sale
Edificios con su alturaContornos y alturas de OpenStreetMap
Calles, avenidas y puentesTrazado vial de OpenStreetMap
Árboles de banquetaSembrados a lo largo de las calles, solo donde hay edificios cerca
CochesColocados sobre el asfalto, girados al ángulo real de cada calle
Líneas del MetroTrazado de las vías, coloreado por línea
Colonias y alcaldíasPuntos con nombre de OpenStreetMap
Luces de nocheCalculadas: ventanas de los edificios altos y farolas sobre las avenidas
Los árboles y los coches no existen en OpenStreetMap uno por uno. Se siembran con reglas: un árbol cada cierto tramo de banqueta, siempre que haya un edificio a menos de 45 metros, y nunca sobre el asfalto. Esa última condición fue de las más difíciles: durante semanas hubo árboles creciendo en medio de Insurgentes.
publicidad

Los errores que más costaron

Un signo de admiración

Durante mucho tiempo aparecían árboles formando cuadros perfectos en lugares donde no debía haber ninguno, y al mismo tiempo se rechazaban árboles «por caer en el agua» en bosques donde no hay un solo estanque. Los dos síntomas venían de la misma función: la que decide si un punto está dentro de un polígono. Tenía escrito «está dentro» donde debía decir «cambia de estado». La prueba correcta cuenta cuántas veces un rayo cruza el borde: si cruza un número impar de veces, está dentro. Un carácter mal puesto convirtió cada parque en una franja infinita hacia el poniente.

El lago cortado

El lago de Xochimilco aparecía partido por una línea vertical perfecta. La pista estaba en la forma del corte: un borde perfectamente vertical en pantalla no puede ser geográfico, porque en isométrico todo lo real sale diagonal. Era una costura entre dos cuadros del horneado: el recorte solo comprobaba dos puntos del polígono y descartaba el resto del agua.

Las cúpulas que aparecieron y desaparecieron solas

El Palacio de Bellas Artes perdió sus cúpulas de un día para otro sin que nadie tocara el código. La causa estaba afuera: alguien en OpenStreetMap agregó las piezas 3D del edificio, y el programa está hecho para que, cuando existen datos reales, se apaguen los adornos dibujados a mano. Los datos mejoraron y el dibujo empeoró, porque el código no reconocía uno de los tipos de techo que usaron.

La noche

El modo nocturno no es un filtro oscuro encima del mapa. Si solo se oscureciera todo, las ventanas quedarían igual de apagadas que las paredes. Para que se enciendan hay que saber dónde está cada ventana, y esa información no existe en ninguna parte: se recalcula a partir del tamaño de cada edificio, y se exporta como una lista de puntos.

~54,000 ventanas Solo 2,644 edificios de la ciudad superan los trece metros, que es la altura a partir de la cual el mapa les dibuja ventanas. De ahí salen las luces de la noche.

Las farolas fueron más difíciles que las ventanas, y por una razón que no es técnica sino de observación: al principio se dibujaban como puntos de luz redondos, y parecían luciérnagas. Una calle alumbrada no son manchas separadas — los conos de luz se traslapan y forman una cinta continua de asfalto claro. Cuando se dibujó así, la ciudad de noche empezó a verse como ciudad.

Qué falta y por qué

El mapa cubre unos 500 km² de la mancha urbana. Quedan fuera Milpa Alta, Tláhuac y buena parte de Cuajimalpa y Magdalena Contreras: son mayormente rurales, boscosas o de barranca, y el costo en imágenes no se justifica frente a lo poco que habría que dibujar.

Hay zonas urbanas donde el mapa se ve vacío aunque no lo esté. No es un error del dibujo: es que en OpenStreetMap todavía nadie ha capturado esos edificios. Santa Martha Acatitla, por ejemplo, es densa en la realidad y casi transparente en los datos. Cualquiera puede corregir eso: OpenStreetMap se edita libremente, y lo que se agregue ahí aparecerá aquí en el próximo horneado.

Explorar el mapa →