도시의 모든 도로를 한 번에 그리는 City Roads

 (anvaka.github.io)
3P by GN⁺ | ★ favorite | 댓글 1개
  • City Roads는 도시를 선택하면 해당 도시의 도로망을 한 화면에 시각화해, 도시 구조를 직관적으로 볼 수 있게 해주는 웹사이트임
  • 한 번에 수백만 개의 도로를 렌더링할 수 있어 대규모 도로 데이터 탐색에 맞춰져 있음
  • 많은 데이터를 빠르게 그리기 위해 WebGL을 사용함
  • 사용 중인 기기가 WebGL을 지원하지 않으면 사이트가 정상적으로 실행되지 않을 수 있음
  • WebGL 미지원 환경에서는 다른 기기나 지원 브라우저에서 접속해야 도구를 사용할 수 있음

도시 도로망 시각화

  • City Roads는 도시를 선택해 해당 도시의 모든 도로를 한 화면에 그려주는 웹사이트임
  • 화면에 수백만 개의 도로를 동시에 렌더링하는 방식으로 동작함

WebGL 실행 조건

  • 빠른 렌더링을 위해 WebGL을 사용함
  • 사용 중인 기기에서 WebGL이 지원되지 않으면 WebGL is not enabled :( 메시지가 표시됨
  • WebGL을 사용할 수 없는 경우 다른 기기에서 접속해야 함

함께 보면 좋은 글 β

GN⁺   [-]
Hacker News 의견들

  • 보행로, 도로, 고속도로 등을 선 두께만이라도 다르게 구분해 주면 더 좋겠음
    이 보기에서는 유럽 도시들이 꽤 지저분해 보임
    개인적으로는 prettymaps가 훨씬 나음: https://github.com/marceloprates/prettymaps

  • 리소스를 잡아먹는 비대한 앱들이 많은 시대에, 휴대폰에서도 체감 가능한 지연이나 버벅임 없이 렌더링돼서 기분 좋게 놀랐음
    모든 것이 이렇게 효율적으로 그려지는 게 인상적임

    • 동의함. 핀치 줌도 정말 부드러웠고, 잘 만든 작업임

  • Twitter에 올라온 취미 규모 프로젝트와 영상들이 매혹적임: https://x.com/anvaka
    진짜 해커 마인드셋이 느껴지고, 훌륭한 작업임

  • GitHub 프로젝트 링크: https://github.com/anvaka/city-roads

  • 결국 OpenStreetMap에서 highway=* 태그가 붙은 모든 길을 가져와서 동일하게 그리는 필터인 셈인가?
    구현은 기존 벡터 타일 소스를 축소해서 쓰는 편이 훨씬 빠르고 쉬웠을 것 같음
    Mapbox GL JS를 그대로 쓰고 전체 캔버스를 4배 정도 줄이면, 도시 단위 줌 레벨에서 작은 도로가 빠지는 문제도 피할 수 있을 듯함

  • 머그컵에 인쇄하려고 데이터를 내보낼 때 OSM 저작자 표시가 빠져 있음
    아예 추가되지 않았거나 잘려 나가는 것 같음

    • 개인 용도로 머그컵에 인쇄할 때도 저작자 표시가 필요한가?

  • 일부 도시에서는 403이 뜸
    예를 들어 Wyk auf Föhr는 이 .pbf 리소스에서 403 오류가 남: https://city-roads.s3-us-west-2.amazonaws.com/nov-02-2020/36...

  • Brighton을 고르고 Hove Park를 확대하면 거기 있는 지문 미로가 벡터로 아주 아름답게 렌더링됨
    OSM에 이런 디테일까지 있다는 게 놀라움

  • 캐시해 둔 3,000개 도시 중 내가 들어본 도시가 얼마나 많은지 흥미로웠음
    인구 10만 명 초과를 기준으로 삼았는데, 사람들이 들어본 도시 수와 인구 규모를 비교해 보면 재미있을 듯함
    누군가의 “세계 지향성”을 평가하는 재미있는 지표가 될 수 있음. 인구 100만 명 이상 도시만 알아본다면 낮은 GO 점수, 좀 더 좋게 말하면 높은 로컬 집중 점수일 듯 :-)

    • Sporcle에 그런 퀴즈가 많이 있음

  • 이 도구로 만든 Brugge 지도를 인쇄해서 벽에 걸어 놨음
    정말 좋은 콘셉트임

    • 나도 비슷하게 해 보고 싶었는데, 항상 서식이 이상하게 나왔음
      팁이 있을까?
답변달기