City Roads es una herramienta web open source que genera mapas de ciudades completamente limpios: sin etiquetas, sin nombres de calles, sin iconos. Solo la red viaria en dos colores sobre un fondo liso. El resultado es una imagen minimalista con una geometría sorprendente, que refleja la forma en que cada ciudad ha crecido a lo largo de décadas.
Para obtener los datos, la herramienta consulta la API de OpenStreetMap, el proyecto de cartografía colaborativa más completo del mundo, con cobertura en prácticamente cualquier ciudad o pueblo del planeta. Esto significa que no dependes de Google Maps ni de ningún servicio de pago: los datos son abiertos y se actualizan continuamente gracias a miles de colaboradores.
Cómo funciona
El uso es muy directo. Escribes el nombre de la ciudad o zona que quieres visualizar en el buscador, City Roads consulta OpenStreetMap y renderiza la red de calles y carreteras usando WebGL directamente en el navegador. No hay servidor que procese nada: todo ocurre en el lado del cliente.
Una vez tienes el mapa en pantalla, puedes ajustar:
- Color de los trazados calles, carreteras, caminos y vías de tren, todo unificado en un único color configurable.
- Color de fondo el lienzo sobre el que se dibuja la red viaria.
- Nombre de la ciudad el único texto que puede aparecer en el mapa, situado con discreción en la parte inferior.
Opciones de exportación
El mapa resultante se puede exportar de tres formas:
- Como imagen PNG lo más habitual para compartir en redes sociales o usar como fondo de escritorio.
- Como vector SVG el formato más versátil. Al ser vectorial, puedes escalar el mapa a cualquier tamaño sin perder definición, lo que lo hace perfecto para impresión, diseño editorial o proyectos de visualización de datos. También puedes abrirlo en Illustrator, Figma o Inkscape y seguir editándolo.
- Onto a mug un botón que lleva directamente a un servicio de impresión para estampar el mapa en una taza. Curioso para regalar a quien le gusta una ciudad concreta.
El proyecto por dentro
City Roads ha sido desarrollado por Andrei Kashcha (@anvaka en X), un ingeniero conocido en la comunidad de visualización de datos por varios proyectos similares. La interfaz está construida con Vue.js, del que hemos hablado en profundidad en el artículo sobre Vue.js y su ecosistema. Para el renderizado usa WebGL, lo que permite dibujar redes viarias enormes con cientos de miles de segmentos sin que el navegador se resienta.
El código está disponible en GitHub, donde puedes ver cómo está estructurado, abrir issues o proponer mejoras. Si el proyecto te parece útil, también puedes invitarle a un café al autor.
El proyecto fue mencionado en su momento por Microsiervos, que lo describió como una de esas herramientas que no sabes que necesitabas hasta que la usas.
Casos de uso más allá de la decoración
La exportación SVG abre posibilidades que van más allá de tener un póster bonito en la pared:
- Visualización de datos urbanos puedes cargar el SVG como base en D3.js u otras librerías y superponer datos (densidad de población, accidentes, comercios) sobre la trama de calles.
- Diseño de identidad corporativa agencias y estudios de diseño usan mapas como este para dar contexto geográfico a marcas locales.
- Arte generativo la red viaria de cada ciudad tiene una firma visual única; muchos artistas digitales la utilizan como materia prima.
- Análisis de urbanismo comparar la trama de dos ciudades lado a lado revela patrones de planificación (cuadrículas americanas frente a crecimientos orgánicos europeos, por ejemplo).
Si te interesa el ecosistema de herramientas JavaScript que hacen posible este tipo de proyectos, puedes ampliar contexto en el artículo sobre JavaScript y la web moderna, y sobre hacia dónde va el renderizado en navegador en WebAssembly y el futuro del frontend.