gh-pagesで OSM 日本ベクトルタイル提供

Last updated at 2017-12-09Posted at 2017-12-09

gh:openmaptiles/openmaptiles で生産したバイナリベクトルタイルを GitHub の gh-pages だけを使ってホストすることに成功していましたので、その方法を紹介します。結果からはじめて、各ステップを逆向きに紹介します。

OSM 日本ベクトルタイル gh-pages サイト

今回解説するOSM 日本ベクトルタイルのサンプルサイトは、https://hfu.github.io/jp1710/ です。特に初回の読み込みの場合には、地図が表示され始めるまでに時間がかかるかもしれません。このサンプルサイトは gh-pages でホストされていて、もとのレポジトリは、https://github.com/hfu/jp1710 です。

同様に gh-pages を使った全国レベルのベクトルタイルとしては、eStat の Chome (neighbourhood) level boundary polygon のベクトルタイル chome-vt も作っています。

1GB を超えるベクトルタイルのデータセットを gh-pages でホストする

chome-vt の場合には、tippecanoe で作成した mbtiles ファイルを fan-out.rb でレポジトリ内に展開し、それをプッシュすることで https://hfu.github.io/chome-vt/{z}/{x}/{y}.mvt という形でホストできました。OSM 日本ベクトルタイルの場合には、サイズが大きいために、もう一つ工夫が必要でした。

現時点で、GitHub の標準的なレポジトリのサイズの上限は 1GB です。このため、OSM 日本ベクトルタイルでは、ズームレベルごとにレポジトリを分割して配置することにし、https://hfu.github.io/jp1710_{z}/{x}/{y}.mvt というテンプレート URL で参照できるようにすることにしました。ズームレベルをレポジトリ名の一部にする、ということですね。

これを実現するために用意したレポジトリは、次の通りです。

さらに大きなタイルセットをホストするとすれば...

さらに大きなタイルセットをホストするとすれば、おそらく x の mod でレポジトリを分けられるようにテンプレート URL の解釈系から作り変えるなどの工夫が必要そうです。それは、大掛かりな工夫になって、あまり現実的ではないかもしれません。なお、例えば gitlab のレポジトリサイズの上限はgithub よりも大きいようであり、gitlab page という仕組みもあるようなので、必要に迫られればそのような方向を追求するという線もあるかもしれません。

消費のためのコード（Mapbox GL JS）

今回ご紹介したベクトルタイルのテンプレート URL は https://hfu.github.io/jp1710_{z}/{x}/{y}.mvt であり、Mapbox style ファイルのサンプルは https://hfu.github.io/jp1710/style.json にあります。これを Mapbox GL JS を使って消費するための HTML コードは、次の通りです。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jp1710</title>
<link rel="stylesheet" type="text/css" href="https://api.mapbox.com/mapbox-gl-js/v0.34.0/mapbox-gl.css" />
<script src="https://api.mapbox.com/mapbox-gl-js/v0.34.0/mapbox-gl.js"></script>
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script>
//mapboxgl.setRTLTextPlugin('https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.1.0/mapbox-gl-rtl-text.js');
var map = new mapboxgl.Map({
  container: 'map', style: 'style.json',
  attributionControl: true, hash: true
});
map.addControl(new mapboxgl.NavigationControl());
</script>
</body>
</html>

なお、この HTML コードでは、フォントについても https://github.com/hfu/noto-jp でホストしているものを使っており、Mapbox さんのサーバインフラに頼ることなくベクトルタイルベースのウェブ地図を実現できることのデモにもなっています。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up