▲

GN⁺: 초소형 월드맵(World Map) 기술

 (github.com/tinyworldmap)
9P by neo 3달전 | favorite | 댓글 1개

tinyworldmap 소개

  • tinyworldmap은 오프라인 우선 및 저대역폭 웹 앱용 세계 지도임
  • Leaflet과 함께 사용하도록 설계되었으며, 모든 확대/축소 수준이 지원됨
  • 가장 완전한 버전은 gzip 압축 시 300kB에 불과함
  • 클라이언트 측 렌더링은 10년 된 저성능 휴대폰에서 광범위하게 프로파일링되고 테스트되었으며, 눈에 띄는 지연 현상이 없음
  • 기본적으로 OpenStreetMap에 추가된 인구 상위 10,000개 도시를 표시함
  • 작성 시점에서 인구 48,000명 이상의 모든 도시와 마을을 포함함

tinyworldmap 사용 방법

기본 지도로 사용

  • tinyworldmap을 Leaflet 기본 지도로 사용하려면 head 태그에 다음을 추가:
<script src="https://tinyworldmap.com/dist/tiny-world-all-10000.js">;
  • 이 스크립트는 지도를 표시하는 데 필요한 모든 데이터를 포함함
  • 타일 레이어를 Leaflet 지도에 추가하는 대신 다음을 사용:
new L.GridLayer.TinyWorld().addTo(map)
  • TinyWorld 생성자는 여러 옵션을 받음: backgroundColor, textFillColor, borderStrokeColor, borderFillColor, borderWidth, textStrokeColor(텍스트를 나머지와 구분), textStrokeWidth, cityFont(예: "12px Arial"), countryFont, dotColor
  • dotColor를 지정하면 각 도시가 점으로 표시됨. 이는 국경이 제외된 tinyworldmap의 축소 버전을 사용할 때 사용성을 향상시킴

폴백 지도로 사용

  • 오프라인 우선 웹 애플리케이션에서는 모든 확대/축소 수준에서 이미지 기반 지도를 캐싱하는 것이 불가능함(타일 수가 방대하고 크기가 테라바이트 단위임)
  • 이 저장소는 웹 앱에 오프라인 기능을 사용할 수 있는 서비스 워커를 제공함
  • 서비스 워커가 설치되면 폴백 지도가 미리 로드됨. 방문한 모든 페이지는 캐시되지만 기본 지도는 제외됨
  • 서버에 연결할 수 있는 동안에는 캐시된 데이터가 사용되지 않음
  • 사용자가 오프라인 상태인 경우 웹사이트가 캐시에서 제공되며, 서비스 워커는 OSM 타일 서버에 대한 요청을 가로채고 tinyworldmap을 사용하여 로컬에서 대체 타일을 생성함
  • 서비스 워커를 등록하기 전에 먼저 서비스 워커에서 'IMPORTANT'로 표시된 모든 섹션을 수정해야 함
  • 등록되면 다음과 같이 타일 레이어에서 OpenStreetMap과 tinyworldmap을 반드시 속성으로 표시해야 함:
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
  maxZoom: 19,
  attribution: '&copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap</a>/;, <a href="https://www.tinyworldmap.com">tinyworldmap</a>;'  
}).addTo(map);
  • tinyworldmap을 폴백으로 사용하는 프로덕션 애플리케이션의 예를 보려면 Hitchmap을 방문. 서비스 워커를 지원하는 브라우저에서 웹사이트를 로드하고 잠시 기다린 다음 인터넷을 끄고 다시 로드하면 웹앱이 폴백 지도를 사용하여 정상적으로 작동해야 함. 서비스 워커가 설치되는 데 시간이 걸릴 수 있음

더 작은 세계 지도

  • 완전한 지도는 gzip 압축 시 300K/압축 해제 시 694K임. 특정 사용 사례의 경우 이 정도 크기도 여전히 너무 클 수 있음

국경선 없음

  • tiny-world-noborders-10000.js(on)에는 국경과 해안선을 제외한 완전 버전에 있는 모든 데이터가 포함되어 있음
  • gzip 압축 버전은 100k, 압축 해제 버전은 200k 감소함
  • 국경이 없는 버전은 크기가 작을 뿐만 아니라 포함된 모든 데이터가 정확하다는 장점이 있음
  • 완전 버전의 국경은 높은 확대 수준에서 정확하지 않아 국경과 해안선에 맞는 모양을 오버레이할 때 이상하게 보일 수 있음. 이러한 경우 국경이 없는 버전이 더 잘 어울림
  • 기본 스타일은 다음과 같음

도시 없음

  • 도시 레이블이 없는 버전으로 tiny-world-nocities.js(on)(국가 레이블 유지)와 tiny-world-borders.js(on)(국가 레이블 생략)의 두 가지 버전을 사용할 수 있음
  • 도시 레이블은 압축되지 않은 상태로 410K, 압축된 상태로 172K를 차지함

더 적은 도시

  • 마지막으로 도시 레이블이 포함된 각 파일에는 2,000개 도시와 4,000개 도시가 포함된 버전도 있음
  • 파일 이름에서 10000을 2000 또는 4000으로 바꾸기만 하면 됨

| 포함된 도시 수 | 인구 | |---|---| | 10,000 | > 48,000 |
| 4,000 | > 137,000 | | 2,000 | > 287,000 |

tinyworldmap 고용

  • 맞춤형 지도(예: 더 자세하거나 다른 언어로)가 필요하거나 웹사이트에서 오프라인 기능을 구현하는 데 도움이 필요한 경우 business@tinyworldmap.com으로 문의 바람

출처 표시

  • OpenStreetMap 데이터와 마찬가지로 tinyworldmap 데이터는 ODBL에 따라 라이선스가 부여되므로 속성 표시가 필요함
  • 위에 설명된 단계를 따랐다면 Leaflet 바닥글에 OpenStreetMap과 tinyworldmap에 대한 속성이 모두 포함되어야 함. 그렇지 않은 경우 다음을 추가:
&copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap</a>/;, <a href="https://www.tinyworldmap.com">tinyworldmap</a>;

GN⁺의 의견

  • tinyworldmap는 오프라인 지도 또는 저사양 기기에서 사용할 수 있는 가벼운 세계 지도를 제공함. 기존의 OpenStreetMap 등을 대체할 수 있는 솔루션이 될 것으로 보임
  • 국경, 도시 등을 선택적으로 제외하여 더 가벼운 버전을 제공하는 것이 장점. 필요에 따라 맞춤형 지도를 사용할 수 있어 활용도가 높아 보임
  • 다만 오프라인에서 동작하려면 서비스 워커를 수정해야 하는 등 기술적인 구현이 필요하므로, 개발자가 어느 정도 경험이 있어야 할 것임. 이 부분에 대한 상세한 가이드가 더 제공되면 좋겠음
  • 국내에서는 Naver, Kakao 등 포털의 지도 API를 많이 사용하는데, 이런 서비스들과 연동해서 오프라인에서 동작할 수 있다면 활용 사례가 더 많아질 것 같음
  • 전 세계 주요 도시 정보를 담고 있어서 여행, 물류 등의 분야에서 유용하게 쓰일 수 있을 것으로 보임. 다국어 지원 여부도 관건이 될 듯
▲
neo 3달전  [-]
Hacker News 의견
  • 저자는 디트로이트 교외 지역의 세부 정보보다는 해안선과 주요 대도시 구분에 더 많은 데이터를 투입하는 것이 좋겠다는 의견을 제시함.
  • 해안선의 디테일이 부족하고, 영국의 몇몇 마을은 바다에 잠겨 있는 반면 그린란드와 북부 캐나다는 너무 많은 꼭지점을 차지하고 있다는 지적이 있음. 메르카토르 투영법이 이미 반영된 것 같지만, 인구가 없는 지역의 우선순위를 낮추는 것이 좋겠다는 의견도 있음.
  • 한 사용자는 유엔 공용어(스페인어 제외)로 된 국제화(i18n)에 초점을 맞춘 유사한 오프라인 우선, 초소형, 벡터 기반 지도를 만들었음. 국가와 도시 이름은 유엔에 공식 선언된 이름을 사용함.
  • 전 세계 상위 10,000개 정착지의 인구가 48,000명까지 내려간다는 것을 알게 되었는데, 이것이 놀라운 수치인지 아직 판단하기 어렵다는 의견이 있음.
  • 공간 데이터를 경로(Path)로 압축하는 아이디어가 인상적이며, 모바일에서 매우 빠르게 로드된다는 평가가 있음. 그러나 OSM 대신 Natural Earth 데이터를 사용하여 ODbL 라이선스를 제거하고, 공간 데이터를 경로로 변환하는 도구를 포함하면 좋겠다는 제안도 있음.
  • 인구 규모와 관계없이 수도를 포함하고 특별히 표시해야 한다는 의견과, 종 페이지에서 해당 종을 세계 어디에서 대략적으로 찾을 수 있는지 답변하는 데 이 지도가 잘 어울릴 것 같다는 의견도 있음.
  • 오프라인 버전을 위해 서비스 워커를 사용하는 것이 이상하며, 사람들이 빠르게 설치하고 사용할 수 있도록 더 간결한 튜토리얼이 필요하다는 지적이 있음. 단순히 타일을 base64로 인코딩한 HTML 파일이나 ZIP 파일을 제공하는 것이 더 나을 수 있음.
  • 체코, 마케도니아 등 선호 이름의 최근 변경 사항은 반영되었지만 터키, 동티모르 등은 아직 반영되지 않았다는 점이 흥미로움.
  • 프로그레시브 로딩이 다소 불안정하여 때로는 빠르게 확대/이동할 때 타일이 표시되지 않는 문제가 있음.
답변달기