Repolode
Enviar
anvaka

anvaka/city-roads

Representa todas las calles de una ciudad elegida en una visualización de estilo cartográfico, usando datos de OpenStreetMap en el navegador.

Ver en GitHubSitio web
Estrellas
9,768
Forks
751
Issues abiertos
57
Último commit
hace 10 días

¿Qué es?

city-roads dibuja todas las calles de una ciudad en un único lienzo. Escribes el nombre de una ciudad y la aplicación obtiene los segmentos de calles de OpenStreetMap a través de la API de Overpass; luego los representa como un dibujo denso de líneas que se puede personalizar y exportar como obra de arte.

Para acelerar las descargas, el proyecto incluye una caché de unas 3.000 ciudades con más de 100.000 habitantes, almacenada en un formato protobuf sencillo. La búsqueda de nombres se realiza con Nominatim y la aplicación consulta la caché antes de recurrir a Overpass si la ciudad no está almacenada.

El proyecto también ofrece una API de escena para crear mediante scripts representaciones personalizadas sobre la visualización. El renderizado está limitado por la memoria del navegador y de la GPU, por lo que las regiones muy extensas, como estados enteros, pueden hacer que la página se bloquee.

Funciones clave

  • 01Representa todas las calles de una ciudad en una sola visualización a partir de datos de OpenStreetMap
  • 02Almacena en caché unas 3.000 ciudades grandes para acelerar la carga de datos
  • 03Busca nombres de ciudades mediante Nominatim
  • 04Ofrece una API de escena para crear representaciones personalizadas mediante scripts

Casos de uso

  • Crear pósteres abstractos de mapas urbanos u obras para colgar en la pared
  • Explorar visualmente el trazado de las calles de una ciudad
  • Crear visualizaciones de mapas personalizadas con la API de escena

Inicio rápido

  1. 1

    Instala las dependencias

    npm install
  2. 2

    Inicia el servidor de desarrollo local con recarga en caliente

    npm run dev

Antes de usarlo

  • Renderizar áreas muy extensas puede hacer que el navegador se bloquee o que funcione lentamente en dispositivos poco potentes, ya que depende de la memoria y la GPU.
  • Seleccionar regiones con millones de carreteras, como un estado entero de EE. UU., puede hacer que la página se bloquee.

Temas

#openstreetmap#data-visualization#maps#canvas#javascript#generative-art

Preguntas frecuentes

¿Qué es city-roads?
Representa todas las calles de una ciudad elegida en una visualización de estilo cartográfico, usando datos de OpenStreetMap en el navegador. city-roads dibuja todas las calles de una ciudad en un único lienzo. Escribes el nombre de una ciudad y la aplicación obtiene los segmentos de calles de OpenStreetMap a través de la API de Overpass; luego los representa como un dibujo denso de líneas que se puede personalizar y exportar como obra de arte.
¿city-roads es gratuito? ¿Qué licencia tiene?
city-roads es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿city-roads sigue mantenido?
Mantenimiento activo. El último commit de city-roads fue el 10 oct 2026.
¿Para qué puedo usar city-roads?
Crear pósteres abstractos de mapas urbanos u obras para colgar en la pared Explorar visualmente el trazado de las calles de una ciudad Crear visualizaciones de mapas personalizadas con la API de escena
¿Cómo se instala city-roads?
Instala las dependencias: npm install Inicia el servidor de desarrollo local con recarga en caliente: npm run dev
¿Dónde consigo city-roads?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/anvaka/city-roads

Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.

Proyectos relacionados