超小型ワールドマップ（World Map）技術

tinyworldmap の紹介

• tinyworldmap は、オフラインファーストおよび低帯域幅の Web アプリ向けの世界地図
• Leaflet と一緒に使うよう設計されており、すべてのズームレベルをサポート
• 最も完全なバージョンでも gzip 圧縮時でわずか 300kB
• クライアント側レンダリングは、10年前の低性能な携帯電話で広範にプロファイリングおよびテストされており、目立つ遅延はない
• デフォルトで OpenStreetMap に追加された人口上位 10,000 都市を表示
• 執筆時点で人口 48,000 人以上のすべての都市・町を含む

tinyworldmap の使い方

ベースマップとして使う

• tinyworldmap を Leaflet のベースマップとして使うには、head タグに次を追加:

• このスクリプトには、地図表示に必要なすべてのデータが含まれる
• タイルレイヤーを Leaflet 地図に追加する代わりに、次を使う:

new L.GridLayer.TinyWorld().addTo(map)

• TinyWorld コンストラクタは複数のオプションを受け取る: backgroundColor, textFillColor, borderStrokeColor, borderFillColor, borderWidth, textStrokeColor（テキストを他の要素と区別するため）, textStrokeWidth, cityFont（例: "12px Arial"）, countryFont, dotColor
• dotColor を指定すると、各都市が点で表示される。これは国境を除いた tinyworldmap の縮小版を使う際に使い勝手を向上させる

フォールバック地図として使う

• オフラインファーストの Web アプリケーションでは、すべてのズームレベルの画像ベース地図をキャッシュすることは不可能（タイル数が膨大で、サイズがテラバイト級になるため）
• このリポジトリは、Web アプリでオフライン機能を有効にするサービスワーカーを提供する
• サービスワーカーがインストールされると、フォールバック地図がプリロードされる。訪問したすべてのページはキャッシュされるが、ベースマップは除外される
• サーバーに接続できる間は、キャッシュ済みデータは使われない
• ユーザーがオフラインの場合、Web サイトはキャッシュから提供され、サービスワーカーは OSM タイルサーバーへのリクエストを横取りし、tinyworldmap を使ってローカルで代替タイルを生成する
• サービスワーカーを登録する前に、まずサービスワーカー内で 'IMPORTANT' と示されたすべてのセクションを修正する必要がある
• 登録後は、タイルレイヤーで OpenStreetMap と tinyworldmap の両方を必ず attribution として表示する必要がある:

L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
  maxZoom: 19,
  attribution: '© [OpenStreetMap](https://www.openstreetmap.org/copyright), [tinyworldmap](https://www.tinyworldmap.com)'
}).addTo(map);

• tinyworldmap をフォールバックとして使う本番アプリケーションの例を見るには、Hitchmap を参照。サービスワーカー対応ブラウザで Web サイトを読み込み、しばらく待ってからインターネットを切断して再読み込みすると、Web アプリはフォールバック地図を使って正常に動作するはず。サービスワーカーのインストールには時間がかかる場合がある

より小さな世界地図

• 完全版の地図は gzip 圧縮時 300K／展開時 694K。用途によっては、このサイズでもまだ大きすぎる場合がある

国境線なし

• tiny-world-noborders-10000.js(on) には、国境線と海岸線を除き、完全版にあるすべてのデータが含まれている
• gzip 圧縮版では 100k、非圧縮版では 200k 削減される
• 国境なし版はサイズが小さいだけでなく、含まれるすべてのデータが正確という利点がある
• 完全版の国境線は高ズームレベルでは正確ではないため、国境線や海岸線に合う形状をオーバーレイすると不自然に見えることがある。このような場合は国境なし版のほうが適している
• デフォルトのスタイルは次のとおり

都市なし

• 都市ラベルのないバージョンとして、tiny-world-nocities.js(on)（国ラベルは維持）と tiny-world-borders.js(on)（国ラベルも省略）の 2 バージョンを使える
• 都市ラベルは非圧縮で 410K、圧縮時で 172K を占める

より少ない都市

• 最後に、都市ラベル付きの各ファイルには 2,000 都市版と 4,000 都市版もある
• ファイル名の 10000 を 2000 または 4000 に置き換えるだけでよい

含まれる都市数	人口
10,000	> 48,000
4,000	> 137,000
2,000	> 287,000

tinyworldmap の利用相談

• カスタム地図（例: より詳細なものや別言語版）が必要な場合、または Web サイトへのオフライン機能実装の支援が必要な場合は、[e-mail] まで連絡

クレジット表記

• OpenStreetMap データと同様に、tinyworldmap のデータも ODBL に基づいてライセンスされているため、attribution 表示が必要
• 上記の手順に従っていれば、Leaflet のフッターに OpenStreetMap と tinyworldmap の両方の attribution が含まれているはず。そうでない場合は、次を追加:

© [OpenStreetMap](https://www.openstreetmap.org/copyright), [tinyworldmap](https://www.tinyworldmap.com)

GN⁺ の意見

• tinyworldmap は、オフライン地図や低スペック端末で使える軽量な世界地図を提供する。既存の OpenStreetMap などを代替できるソリューションになりそう
• 国境や都市などを選択的に除外した、より軽量なバージョンを提供している点が長所。必要に応じてカスタム地図も使えるため、活用の幅が広そう
• ただし、オフラインで動作させるにはサービスワーカーの修正が必要になるなど技術的な実装が求められるため、開発者にはある程度の経験が必要になりそう。この点について、より詳しいガイドがあるとよさそう
• 日本国内でもポータル系の地図 API が多く使われているが、こうしたサービスと連携してオフライン動作できれば、活用事例はさらに増えそう
• 世界の主要都市情報を収録しているため、旅行や物流などの分野で有用に使えそう。多言語対応の有無もポイントになりそう

[GN⁺]

Hacker Newsの意見

• 著者は、デトロイト郊外の細かな情報よりも、海岸線や主要大都市の区別により多くのデータを割り当てるべきだという意見を示している。
• 海岸線のディテールが不足しており、イギリスのいくつかの町は海に沈んでいる一方、グリーンランドやカナダ北部は頂点を取りすぎているという指摘がある。メルカトル図法はすでに反映されているようだが、人口のない地域の優先度を下げたほうがよいという意見もある。
• あるユーザーは、国連公用語（スペイン語を除く）による国際化（i18n）に焦点を当てた、似たようなオフラインファーストの超小型ベクターベース地図を作ったことがある。国名と都市名には、国連に公式に届け出られた名称を使用している。
• 世界の上位10,000の居住地の人口は48,000人まで下がることが分かったが、これが驚くべき数値なのかどうかはまだ判断しにくいという意見がある。
• 空間データをパス（Path）として圧縮するアイデアが印象的で、モバイルでも非常に高速に読み込まれると評価されている。しかし、OSMの代わりにNatural Earthのデータを使ってODbLライセンスを外し、空間データをパスに変換するツールを含めるとよいのではないかという提案もある。
• 人口規模に関係なく首都を含めて特別に表示すべきだという意見や、種のページでその種が世界のどこにおおよそ生息しているかを答えるのに、この地図がよく合いそうだという意見もある。
• オフライン版にサービスワーカーを使うのは不自然で、人々が素早くインストールして使えるように、もっと簡潔なチュートリアルが必要だという指摘がある。単にタイルをbase64エンコードしたHTMLファイルやZIPファイルを提供するほうがよいかもしれない。
• チェコ、マケドニアなど好ましい名称の最近の変更は反映されている一方で、トルコ、東ティモールなどはまだ反映されていない点が興味深い。
• プログレッシブローディングがやや不安定で、素早く拡大・移動するとタイルが表示されないことがある。