Repolode
Enviar
anvaka

anvaka/city-roads

Renderiza todas as ruas de uma cidade escolhida em uma visualização no estilo de mapa, usando dados do OpenStreetMap no navegador.

Ver no GitHubSite
Estrelas
9,768
Forks
751
Issues abertas
57
Último commit
há 10 dias

O que é?

city-roads desenha todas as ruas de uma cidade em um único canvas. Você digita o nome da cidade, e o app busca segmentos de ruas no OpenStreetMap pela Overpass API e os renderiza como um desenho de linhas denso, que pode ser estilizado e exportado como arte.

Para acelerar os downloads, o projeto inclui um cache de cerca de 3.000 cidades com mais de 100.000 habitantes, armazenado em um formato protobuf simples. A busca pelo nome é feita pelo Nominatim, e o app consulta o cache antes de recorrer à Overpass quando a cidade não está armazenada.

O projeto também oferece uma scene API para criar scripts de renderizações personalizadas sobre a visualização. A renderização é limitada pela memória do navegador e da GPU, então regiões muito grandes, como estados inteiros, podem fazer a página travar.

Recursos principais

  • 01Renderiza todas as ruas de uma cidade em uma única visualização, com dados do OpenStreetMap
  • 02Armazena em cache cerca de 3.000 cidades grandes para acelerar o carregamento dos dados
  • 03Localiza nomes de cidades por meio da busca do Nominatim
  • 04Oferece uma scene API para criar scripts de renderizações personalizadas

Casos de uso

  • Criar pôsteres abstratos ou arte de parede com mapas de cidades
  • Explorar visualmente o traçado das ruas de uma cidade
  • Criar visualizações de mapas personalizadas com a scene API

Início rápido

  1. 1

    Instale as dependências

    npm install
  2. 2

    Inicie o servidor de desenvolvimento local com hot reload

    npm run dev

Antes de usar

  • Renderizar áreas muito grandes pode fazer o navegador travar ou ficar lento em dispositivos menos potentes, pois isso depende da memória e da GPU.
  • Selecionar regiões com milhões de estradas, como um estado inteiro dos EUA, pode fazer a página travar.

Tópicos

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

Perguntas frequentes

O que é city-roads?
Renderiza todas as ruas de uma cidade escolhida em uma visualização no estilo de mapa, usando dados do OpenStreetMap no navegador. city-roads desenha todas as ruas de uma cidade em um único canvas. Você digita o nome da cidade, e o app busca segmentos de ruas no OpenStreetMap pela Overpass API e os renderiza como um desenho de linhas denso, que pode ser estilizado e exportado como arte.
city-roads é gratuito? Qual é a licença?
city-roads é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.
city-roads ainda é mantido?
Manutenção ativa. O último commit de city-roads foi em 10 de out. de 2026.
Para que posso usar city-roads?
Criar pôsteres abstratos ou arte de parede com mapas de cidades Explorar visualmente o traçado das ruas de uma cidade Criar visualizações de mapas personalizadas com a scene API
Como instalar city-roads?
Instale as dependências: npm install Inicie o servidor de desenvolvimento local com hot reload: npm run dev
Onde consigo city-roads?
O código-fonte e as instruções de instalação estão no GitHub: https://github.com/anvaka/city-roads

Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.

Projetos relacionados