- tinyworldmap은 오프라인 우선 및 저대역폭 웹 앱을 위한 세계 지도이며, Leaflet과 함께 쓰도록 설계됨
- 전체 줌 레벨을 지원하고 가장 완전한 버전은 gzip 450KB이며, 10년 된 저사양 휴대폰에서도 체감 지연이 없도록 클라이언트 렌더링을 프로파일링하고 테스트함
- 기본 지도에는 OpenStreetMap에 추가된 인구 상위 10,000개 도시가 표시되며, 작성 시점 기준 인구 48,000명 이상 도시와 마을을 포함함
- 사용 방식은 OpenStreetMap 타일을 대체하는 베이스맵 또는 오프라인 상태에서 OSM 타일 요청을 로컬 생성 타일로 바꾸는 fallback 지도 두 가지임
- 지도 데이터는 OpenStreetMap처럼 ODBL 라이선스를 따르며, Leaflet 푸터 등에 OpenStreetMap과 tinyworldmap 저작자 표시가 필요함
tinyworldmap의 목적과 범위
- tinyworldmap은 오프라인 우선 및 저대역폭 웹 앱을 위한 세계 지도임
- Leaflet과 함께 쓰도록 설계됐으며, 모든 줌 레벨을 지원함
- 가장 완전한 버전은 gzip 450KB, 압축 해제 시 1.1MB임
- 클라이언트 측 렌더링은 10년 된 저사양 휴대폰에서 광범위하게 프로파일링 및 테스트됐고, 체감 가능한 지연이 없었음
- 데모는 Nightly demo, Stable demo, v3 announcement로 제공됨
기본 지도 데이터
- 기본 설정에서는 OpenStreetMap에 추가된 인구 상위 10,000개 도시를 표시함
- 작성 시점 기준으로 이 범위는 인구 48,000명 이상의 모든 도시와 마을을 포함함
Leaflet에서 쓰는 두 가지 방식
지도 스타일과 맞춤 지도
- 생성자는
render 옵션을 받아 지도 모양을 바꿀 수 있음
- 각 레이어의
style 옵션은 Canvas의 CanvasRenderingContext2D에 적용됨
- 예를 들어
state_borders 레이어에 fillStyle을 지정해 스타일을 바꿀 수 있음
let render = {
state_borders: {
style: {fillStyle: '#f00'}
}
}
new L.GridLayer.TinyWorld({maxZoom: 19, render}).addTo(map)
- 조직에 도로 지도, 도시 지도, 다른 언어의 지도, OSM 또는 비-OSM 데이터를 포함한 맞춤 콘텐츠 지도가 필요하면
business@tinyworldmap.com으로 견적을 요청할 수 있음
더 작은 지도 파일 옵션
-
경계선 없는 버전
tiny-world-cities-10000.js(on)은 전체 버전에서 주 경계, 국가 경계, 해안선을 제외한 데이터를 포함함- 이 버전은 gzip 기준 300KB, 압축 해제 기준 825KB를 줄임
- 경계선 없는 버전은 포함 데이터가 모두 정밀하다는 장점이 있음
- 전체 버전의 국가 경계는 높은 줌 레벨에서 정확하지 않아, 국가 경계나 해안선에 맞는 도형을 오버레이할 때 어색하게 보일 수 있음
- 그런 경우 경계선 없는 버전이 더 나아 보이는 경우가 많음
-
도시 라벨 없는 버전
- 도시 라벨이 없는 파일은 두 가지임
tiny-world-borders.js(on): 주 경계를 생략함tiny-world-nocities.js(on): 주 경계를 유지함- 도시 라벨은 압축 해제 시 410KB, 압축 시 172KB를 차지함
-
도시 수를 줄인 버전
- 도시 라벨 포함 파일은 2,000개, 4,000개 도시 버전도 제공됨
- 파일명에서
10000을 2000 또는 4000으로 바꾸면 됨
- | 포함 도시 수 | 인구 기준 |
- | --- | --- |
- | 10,000 | 48,000명 초과 |
- | 4,000 | 137,000명 초과 |
- | 2,000 | 287,000명 초과 |
라이선스와 저작자 표시
- tinyworldmap 데이터는 OpenStreetMap 데이터처럼 ODBL 라이선스를 따름
- ODBL은 저작자 표시를 요구함
- 안내된 방식대로 설정했다면 Leaflet 푸터에 OpenStreetMap과 tinyworldmap 저작자 표시가 포함돼야 함
- 그렇지 않으면 OpenStreetMap과 tinyworldmap 저작자 표시를 별도로 추가해야 함