2
27
2026
MapboxでカスタムWebmap作りに挑戦 #3（地理院のベクタータイルを表示する）
ベクタータイルについて
前回の記事『MapboxでカスタムWebmap作りに挑戦 #2』からかなり間が開いてしまったが、国土地理院のベクタータイルをMapbox等のフレームワークを用いて、WEBサイト上に表示させる方法について概要を説明していくことにする．
前回までの記事では、Mapbox GL を用いてベクタータイル地図を表示する際にとても重要な役割を果たしているスタイルについて簡単にその概要を紹介した．このスタイルを自分で作成するのはかなりの力量と地図作りのデザインセンスが要求されるが、既存のスタイルをベースに部分的にカスタマイズを加える程度であれば、Mapbox Studioなどのツールを使って割と簡単に地図のスタイルを変更することが可能だ．
スタイルについてある程度理解できたところで、今度はベクター形式の地図データの中身であるベクタータイルデータセットについて、その構造をほんの少し探ってみることにする．
Mapboxが使用しているベクタータイルの仕様はCreative Commons 3.0ライセンスで一般に公開されており、最新のバージョンは “Vector Tile Specification V2.1“としてGitHub上に置かれている．
このベクタータイルの仕様はMapbox社が2014年にV1.0として公開したものであるが、ベクタータイルの規格としては最も一般的なもので、ベクタータイルのデファクトスタンダード的な位置づけのものだ．このドキュメントの目的にも書かれているが、タイル形式のベクターデータをクライアントのブラウザーやサーバサイドで効率的かつ高速にレンダリングさせることを目的として開発されている．
ベクタータイルのデータはテキストではなくバイナリデータで、Google Protocol Bufferというエンコード方式が用いられている．
私はProtocol Bufferについてはきちんとした知識や知見を持ち合わせていないので、Protocol Bufferについての解説はできないが、Googleさんによると『”language-neutral, platform-neutral,extensible mechanism for serializing structured data”（言語やプラットフォームに依存しない構造化されたデータをシリアライズ化するための拡張可能な機構）』だそうな．
エンコードされたデータはXMLやJSONなどのテキスト形式ではなくバイナリーデータなので、データ通信量を大幅に削減することが可能になる．ベクター地図タイルデータのような構造化されたデータをこのProtocol Bufferを用いて汎用的なバイナリデータに変換することで、地図データサイズの大幅な圧縮を実現しているとのことだ．
Protocol BufferでエンコードすることでJSONやXMLなどのテキスト化されたデータと較べると数分の1から数十分の1までデータを圧縮可能となるそうだ．ベクター地図データのような膨大なデータを取り扱うにはProtocol Bufferの利用は理にかなっているのだろう．
ベクタータイルの仕様書の内容を要約すると、
データ形式はGoogle Protocol Buffersでエンコードされたもので、ファイルの拡張子は “.mvt” とする．MIME形式は “application/vnd.mapbox-vector-tile” とする．
ベクタータイルは、投影法により規定される正方形の領域に区切られた範囲内の地物に関するベクトルデータで、データの中身には境界や投影法に関する情報は含めない．デコーダ側では予め境界と投影法に関する情報を持っているという前提で作成されている．
投影法として、Web Mercator projection (Wikipedia)を基準とし、Google Mapsや地理院地図で用いられているタイル座標形式を採用する．
タイルデータを配信する際のURLのスキームは https://domain/Z/X/Y.mvt のような形式を用いる．
なお、URLのスキームで指定する Z(Zoomレベル）、X（タイルのX座標）、Y（タイルのY座標）の値は、国土地理院のホームページ 『タイル座標確認ページ』で調べると、目的のタイルを簡単に探し出すことが可能だ．
実際のベクタータイルのProtocol Buffer形式のデータ構造は、“Vector Tile protobuf schema document” で定義されている．
このドキュメントの中で、実際のジオメトリデータがどのようにエンコードされるのかが具体的に説明されているので、ベクタータイルの中身のイメージを掴みやすいのではないかと思う．とりあえずベクタータイルの中身がこのようなバイナリデータの塊であるということを知っているだけで良いだろう
エンコードされたデータは非可逆な圧縮データとなっているので、デコードされたデータの精度は落ちてしまうが大幅なデータ圧縮が得られる利点がある．JPEG圧縮された画像データと同じようなイメージで捕らえておけば良いだろう．
『国土地理院ベクトルタイル提供実験』について
国土地理院ではこれまでのラスターイメージ形式の地理院地図以外に、試験的な位置づけではあるが『地理院地図Vector』と称する新しいベクタータイル形式のWEBマップを一般に公開している．
地理院地図Vectorで公開されているベクタータイル形式の地図データに関しては、国土地理院のGitHubサイト https://github.com/gsi-cyberjapan 上で地図のサンプルや詳しい仕様等が公開されている．
ベクトルタイル提供実験で提供されているタイルの仕様やスタイル定義等については、GitHubリポジトリの “gsimaps-vector-experiment” に詳細が記載されている．
【参考資料】 「地理院地図 Vector()」の試験公開The Experimental Release of “GSI Maps Vector” (https://www.gsi.go.jp/common/000220903.pdf)
ベクタータイルの仕様
従来のラスタイメージタイルと同じタイル座標形式で配布されており、ベクタータイルデータにアクセスするURLは
https://cyberjapandata.gsi.go.jp/xyz/experimental_bvmap/{z}/{x}/{y}.pbf
となっている．ファイルの拡張子は、”.mvt” ではなく”.pbf”を用いている．
ベクタータイルのズームレベルは、ラスタータイルのズームレベルよりも1レベル小さな値となっており、ラスターのズームレベルが14の場合と同じスケールで表示するには、ズームレベルを13に設定する必要がある．
ベクタータイルにどのような項目がデータとして記載されているのかは、下記のドキュメントに記載されているので、目的の地物の表示スタイルを自分で調整する場合は、この内容を確認しながら自分でスタイルファイルの該当する項目を編集することになる．
・地物コード及び表示ズームレベル一覧 （PDF版）
地物情報の一覧
・地物等の属性一覧 （PDF版）
対象となる地物のコードや属性を基に、自分でスタイルの定義を変更することによって地図を自分の好みのスタイルで表示することができるようになる．地理院のベクタータイルに含まれていない地物や自分だけのマップを作成することも可能だが、Mapbox GLの機能を駆使しなければ難しいだろう．
ベクトルタイル提供実験で提供されているスタイル定義ファイルは 地理院地図の標準スタイルに近づけた”std.json”, “std2.json”、淡色系の ”pale.json”, “pale2.json” 、白地図系の “blank.json”, “blank2.json” が提供されているが、これらのJSONデータはMapboxのスタイル定義ファイルの仕様 “Mapbox Style Specification” とは異なるので、Mapboxで直接読み込むことはできないので注意が必要だ．
国土地理院が提供しているベクタータイルのスタイルの仕様は、国土地理院が国土地理院の地図データの仕様に合わせて独自に拡張を施したしたもので、『地理院地図Vector』で使われているようだ．MapboxやMapLibreなどのWEBマップフレームワークや、QGISなどのGISツールではそのままでは利用できないので、今のところこの地理院独自のスタイルデータは使用することは難しそうだ．
地理院独自のスタイル定義ファイルの仕様については、『地理院地図 Vector(仮称)地図デザインファイル仕様』で、その内容が公開されている．
Mapboxのスタイルファイル形式で作成されたスタイルのサンプルは、GitHubの https://github.com/gsi-cyberjapan/gsivectortile-mapbox-gl-jsから入手することができる．
[ 国土地理院スタイル形式 ]
https://maps.gsi.go.jp/vector/data/std.json （標準地図）
https://maps.gsi.go.jp/vector/data/std2.json （標準地図2）
https://maps.gsi.go.jp/vector/data/pale.json （淡色地図）
https://maps.gsi.go.jp/vector/data/pale2.json （淡色地図2）
https://maps.gsi.go.jp/vector/data/blank.json （白地図）
https://maps.gsi.go.jp/vector/data/blank2.json （白地図2）
[ Mapbox GL で読み込み可能なスタイル形式 ]
https://github.com/gsi-cyberjapan/gsivectortile-mapbox-gl-js/blob/master/pale.json
https://github.com/gsi-cyberjapan/gsivectortile-mapbox-gl-js/blob/master/std.json
https://github.com/gsi-cyberjapan/gsivectortile-mapbox-gl-js/blob/master/std_vertical.json （注釈の一部が縦表記されている）
https://github.com/gsi-cyberjapan/gsivectortile-mapbox-gl-js/blob/master/blank.json
上記のスタイルファイルの名前の末尾に数字の2が付いているのは、道路の立体交差を表現しているマイナーチェンジバージョンということのようだが、該当部分を拡大表示しない限り違いは殆ど分からないので、デモでは道路の立体交差バージョンは省略している．
個々のJSON形式のスタイル定義ファイルはテキストエディタ等でその内容を見たり内容を変更することが可能だが、改行やインデント等の整形を施すと10万行以上にもなる巨大なデータなので、このファイルの中身を書き換えて自分専用のスタイルを作成するのはかなり大変だ．
属性値に関する情報
Mapbox GLを用いて国土地理院のベクタータイルを表示するデモ
国土地理院のベクタータイルを表示する方法はとても簡単で、
const map = new mapboxgl.Map({
container: 'map', // container ID
// Choose from Mapbox's core styles, or make your own style with Mapbox Studio
style: './oldstyle/std.json', // <=== スタイルファイルを指定する
center: [ 139.069610, 35.360790 ], // starting position [lng, lat]
language: 'ja',
zoom: 14.6 , // starting zoom
testMode: true
});
のように、マップのインスタンスを作成する際に、スタイル定義ファイルへのパスを指定するだけである．ベクタータイルを参照するためのURL情報などは、スタイルファイルの中で定義することになる．
標準スタイル定義ファイル "std.json" の中を覗いてみると、762個のレイヤーに関する定義が記述されている．
{
"version": 8,
"glyphs": "https://maps.gsi.go.jp/xyz/noto-jp/{fontstack}/{range}.pbf",
"sources": {
"gsibv-vectortile-source-1-4-16": {
"type": "vector",
"tiles": [
"https://cyberjapandata.gsi.go.jp/xyz/experimental_bvmap/{z}/{x}/{y}.pbf"
],
"minzoom": 4,
"maxzoom": 16,
"attribution": "地理院地図Vector（仮称）"
}
},
"layers": [
{
"id": "gsibv-vectortile-layer-761",
"type": "line",
"source": "gsibv-vectortile-source-1-4-16",
"source-layer": "structurel",
"metadata": {
"layer-id": "layer-577",
"title": "坑口",
"path": "構造物-坑口",
"added": 1
},
"minzoom": 14,
"maxzoom": 17,
"filter": [ "all", [ "in", "ftCode", 4202 ] ],
"layout": {
"line-cap": "square",
"visibility": "visible"
},
"paint": {
"line-color": "rgba(100,100,100,1)",
"line-width": 1.5
}
},
{ "id": "gsibv-vectortile-layer-762",
...
{ "id": "gsibv-vectortile-layer-1538",
...
"sprite": "https://gsi-cyberjapan.github.io/gsivectortile-mapbox-gl-js/sprite/std",
"metadata": {
"gsimaps-vector-url": "https://maps.gsi.go.jp/vector/#7/36.104611/140.084556/&ls=&disp=&d=l",
"center": { "lng": 140.084556, "lat": 36.104611 },
"zl": 7
}
}
上記のスタイル切替えデモでは画面左下のセレクターでスタイルを簡単に切り替えることができるようになっているので、スタイルを切り替えて実際に表示される地図の見映えを確認してみて欲しい．
Mapboxのコードを書いたことがあれば、国土地理院のベクタータイルマップを表示させることはそれほど難しいことはないだろう．
国土地理院のベクタータイルセットと地理院地図風のスタイル定義ファイルを用いて、比較的簡単なWEBプログラムコードを書くだけでWEBマップとして表示できるようになったが、自分好みのマップスタイルに変更するには、上記の３種類のドキュメント（地物コード及び表示ズームレベル一覧、地物情報の一覧、地物等の属性一覧）と何万行もあるスタイルファイルの内容を照らし合わせて、スタイルファイルの中から該当する部分を探し出し、地物の表示色や線の種類や太さ、描画条件などを事細かに変更を加えていかなければならない．
ただでさえ難解なスタイルの定義をいじくり回して所望の結果が得られるまで何度も試行錯誤を繰り返さなければならないので、手動でスタイルファイルを書き換えてWEBブラウザ上で修正結果を確認する方法はあまり現実的な方法ではないだろう．
スタイルファイルの中身を覗いてみると、数多くのレイヤーが定義されており、それらのレイヤー中にメタデータが記載されているので、そのタイトル名からその地物が何であるかはある程度見当が付くだろう．ただし、同じようなタイトルを持つレイヤーが幾つも存在するので、その一つ一つの違いを見極めるのが結構大変だ．
例えばJR御殿場線（単線）のデザインを変更したい場合、上記のデモの標準タイプのスタイルファイル "std.json" のメタデータから探し出すとそれらしき部分が見つかるが、同じフィルタ抽出条件で3つのレイヤーが見つかる．
何で一つの線路を描くのに3つのレイヤが必要なのか最初は???だったが、最初のレイヤ1003が線路部分(4px) の下地の塗りつぶし（グレー）で、次のレイヤ1004が白の3.2pxのラインで内側の塗りつぶし、最後のレイヤ1005で3.2pxのグレーの破線の描画となっている．
一つのレイヤーで上手くグレーの破線を描画できればこのような面倒な描画を行わなくても良いのではないかと思うが、レイヤの数が多すぎるとシステムの負荷が大きくなるのでレイヤの使い方はもう少し工夫が必要だろう．
Mapboxのスタイル定義での式の表現は少し分かり難いので、filter項目の式の演算子 "all", "any", "in" の簡単な説明をしておく．詳細については、Mapboxのドキュメント "Expressions" を参照して欲しい．
all
Syntax : ["all", boolean, boolean, ... ]: boolean
全てのboolean項目が"true"の場合には "true" を返すがそれ以外の場合は"false"を返す．（AND演算）
any
Syntax : ["any", boolean, boolean, ...]: boolean
boolean項目がどれか1つでも"true"であれば "true" を返す．（OR演算）
in
Syntax :
["in",
keyword: InputType (boolean, string, or number),
input: InputType (array or string)
]: boolean
keywordがinputに含まれているかどうかを判定する．含まれていれば "true"を返す．
例: [ "in", "prefecture", "Tokyo", "Kanagawa", "Saitama", "Chiba" ]
"prefecture"の値が "Tokyo", "Kanagawa", "Saitama", "Chiba"のどれかに該当すれば"true"となる．
"std.json" スタイルファイルから該当部分を抜き出し、フィルタリング部分の式を少し分かり易く整形して表示すしてみる．
{
"id": "gsibv-vectortile-layer-1003",
"type": "line",
"source": "gsibv-vectortile-source-1-4-16",
"source-layer": "railway",
"metadata": {
"layer-id": "layer-760",
"title": "単線",
"path": "鉄道-JR-通常部-単線",
"added": 1
},
"minzoom": 14,
"maxzoom": 17,
"filter": [ "all", [ "in", "ftCode", 8201 ],
[ "==", "snglDbl", 1 ],
[ "any", [ "==", "staCode", "0" ],
[ "!has", "staCode" ]
],
[ "==", "railState", 0 ],
[ "any", [ "all", [ ">=", "rtCode", "40201000000" ],
[ "<", "rtCode", "40202000000" ]
],
[ "all", [ ">=", "rtCode", "40216000000" ],
[ "<", "rtCode", "40217000000" ]
]
]
],
"layout": {
"line-cap": "square",
"visibility": "visible"
},
"paint": {
"line-color": "rgba( 100, 100, 100, 1 )",
"line-width": 4
}
},
{
"id": "gsibv-vectortile-layer-1004",
"type": "line",
"source": "gsibv-vectortile-source-1-4-16",
"source-layer": "railway",
"metadata": {
"layer-id": "layer-760",
"title": "単線",
"path": "鉄道-JR-通常部-単線",
"added": 1
},
"minzoom": 14,
"maxzoom": 17,
"filter": [ "all", [ "in", "ftCode", 8201 ],
[ "==", "snglDbl", 1 ],
[ "any", [ "==", "staCode", "0" ],
[ "!has", "staCode" ]
],
[ "==", "railState", 0 ],
[ "any", [ "all", [ ">=", "rtCode", "40201000000" ],
[ "<", "rtCode", "40202000000" ]
],
[ "all", [ ">=", "rtCode", "40216000000" ],
[ "<", "rtCode", "40217000000" ]
]
]
],
"layout": {
"line-cap": "square",
"visibility": "visible"
},
"paint": {
"line-color": "rgba( 255, 255, 255, 1 )",
"line-width": 3.2
}
},
{
"id": "gsibv-vectortile-layer-1005",
"type": "line",
"source": "gsibv-vectortile-source-1-4-16",
"source-layer": "railway",
"metadata": {
"layer-id": "layer-760",
"title": "単線",
"path": "鉄道-JR-通常部-単線",
"added": 1
},
"minzoom": 14,
"maxzoom": 17,
"filter": [ "all", [ "in", "ftCode", 8201 ],
[ "==", "snglDbl", 1 ],
[ "any", [ "==", "staCode", "0" ],
[ "!has", "staCode" ]
],
[ "==", "railState", 0 ],
[ "any", [ "all", [ ">=", "rtCode", "40201000000" ],
[ "<", "rtCode", "40202000000" ]
],
[ "all", [ ">=", "rtCode", "40216000000" ],
[ "<", "rtCode", "40217000000" ]
]
]
],
"layout": {
"line-cap": "square",
"visibility": "visible"
},
"paint": {
"line-color": "rgba( 100, 100, 100, 1 )",
"line-width": 3.2,
"line-dasharray": [ 2, 2 ]
}
},
上記のデモの鉄道の線路の見映えをなるべくラスタータイプの地理院地図のように変更するには、レイヤID : "gsibv-vectortile-layer-1005" の塗りつぶしラインパターンを "line-dasharray": [ 2, 2 ] を "line-dasharray":[ 4, 4 ] のように変更して、破線の間隔を広げると何となくそれらしくなるが、地理院のベクタータイルは地物のデータが非常に小さなフラグメントに分割されてしまっているので、フラグメントの境部分で破線の連続性が途切れてしまい、間の抜けた破線のラインとなってしまう．
ベクタータイル提供実験で提供されているラスター版の地理院地図に近づけたスタイル定義ファイル(std.json,pale.json,blank.json)では、この破線の境界の不整合をなるべく目立たなくするために、破線の間隔を小さめにしているので、JRの線路の見た目に何となく違和感を覚えてしまうのだろう．
淡色地図スタイル（pale.json）の中身を書き換え、ラスター地図版のJR線路の見た目に少し近づけるとともに国道部分の塗りつぶし色を標準地図(std.json) のように、赤系統の色で塗りつぶす変更を行ったカスタマイズ淡色地図スタイルを作成してみた．
上記のデモのカスタム版の淡色地図スタイルファイルは、
https://y2tech.net/MapTest/JSGIVectorMaps/oldstyle/pale_modified.json
に置いてある．
スタイルファイル (pale.json ) で国道部分に関するレイヤーを抽出してみると、
"id": "gsibv-vectortile-layer-1685", "道路-国道-通常部"
"id": "gsibv-vectortile-layer-1686", "道路-国道-3m以上5.5m未満-通常部"
"id": "gsibv-vectortile-layer-1687", "道路-国道-5.5m以上13m未満-通常部"
"id": "gsibv-vectortile-layer-1688", "道路-国道-13m以上19.5m未満-通常部"
"id": "gsibv-vectortile-layer-1689", "道路-国道-19.5m以上-通常部"
"id": "gsibv-vectortile-layer-1695", "道路-国道-徒歩道"
"id": "gsibv-vectortile-layer-1710", "道路-国道-3m未満・その他・不明-通常部"
"id": "gsibv-vectortile-layer-1711", "道路-国道-3m以上5.5m未満-通常部"
"id": "gsibv-vectortile-layer-1712", "道路-国道-5.5m以上13m未満-通常部"
"id": "gsibv-vectortile-layer-1713", "道路-国道-13m以上19.5m未満-通常部"
"id": "gsibv-vectortile-layer-1714", "道路-国道-19.5m以上-通常部"
"id": "gsibv-vectortile-layer-1720", "道路-国道-徒歩道"
"id": "gsibv-vectortile-layer-1728", "道路-国道-石段"
"id": "gsibv-vectortile-layer-1729", "道路-国道-石段"
"id": "gsibv-vectortile-layer-1754", "道路-国道-3m未満・その他・不明-通常部"
"id": "gsibv-vectortile-layer-1755", "道路-国道-3m以上5.5m未満-通常部"
"id": "gsibv-vectortile-layer-1756", "道路-国道-5.5m以上13m未満-通常部"
"id": "gsibv-vectortile-layer-1757", "道路-国道-13m以上19.5m未満-通常部"
"id": "gsibv-vectortile-layer-1758", "道路-国道-19.5m以上-通常部"
"id": "gsibv-vectortile-layer-1801", "道路-国道-3m未満・その他・不明-橋・高架"
"id": "gsibv-vectortile-layer-1802", "道路-国道-3m以上5.5m未満-橋・高架"
"id": "gsibv-vectortile-layer-1803", "道路-国道-5.5m以上13m未満-橋・高架"
"id": "gsibv-vectortile-layer-1804", "道路-国道-13m以上19.5m未満-橋・高架"
"id": "gsibv-vectortile-layer-1805", "道路-国道-19.5m以上-橋・高架"
"id": "gsibv-vectortile-layer-1821", "道路-国道-3m未満・その他・不明-橋・高架"
"id": "gsibv-vectortile-layer-1822", "道路-国道-3m以上5.5m未満-橋・高架"
"id": "gsibv-vectortile-layer-1823", "道路-国道-5.5m以上13m未満-橋・高架"
"id": "gsibv-vectortile-layer-1824", "道路-国道-13m以上19.5m未満-橋・高架"
"id": "gsibv-vectortile-layer-1825", "道路-国道-19.5m以上-橋・高架"
のようにかなりの数のレイヤーで構成されている．これらのレイヤーの中身を確認しながら、塗りつぶしの色を修正していくことになる．
手動でスタイルファイルを編集して地図の見映えを変更する作業があまり現実的ではないことが分かるだろう．
次回の『MapboxでカスタムWebmap作りに挑戦 #4』では、QGISなどのGISツールを活用したスタイルの変更方法について説明する予定だ．
QGISを使用すると地図の表示スタイルを簡単に変更して試してみることが可能
補足：『最適化ベクトルタイル試験公開』について
ベクトルタイル提供実験で提供されているタイルデータやスタイルファイルはとりあえず国土地理院の地図データ作成・管理システムで利用しているデータを、Mapboxのタイルとスタイルの仕様に合わせてデータをそのまま吐き出したような作りになっている．
地図スタイルの変更をするだけでも、上記のデモ例のように膨大な箇所の修正作業が必要になる．データセットのサイズも巨大で、エンドユーザが取り扱うには結構大変なものだったので、国土地理院ではもう少し軽量化した仕様のベクタータイルセット（PMTiles ファイル形式）の提供実験も取り組んでいるようだ．
この最適化ベクトルタイル試験公開についてもGitHub上で公開されており、タイルの仕様などのドキュメントが公開されている．
・注記分類コード・地物種別コード一覧（PDF版）
・データ項目一覧（PDF版）
・地物等の属性一覧（PDF版）
上記の3つのドキュメントの内容もスッキリと整理されており、だいぶ扱い易くなっているようだ．
デモサイト
・https://gsi-cyberjapan.github.io/optimal_bvmap/
この最適化ベクトルタイル試験公開では、PMTiles形式でベクタータイルが公開されており、PMTiles形式では従来の膨大なファイル数のタイルデータセットではなく、一つのファイルの中にタイルデータセット一式が格納されている形となるので、タイルデータの取り扱いがとても楽になる．
Mapboxでもアイコン画像を一つのイメージファイルに纏めた "sprite"形式のアイコンライブラリを扱っているが、それと同じようなイメージでタイルセットを纏めていると考えると分かり易いかもしれない．
上記のデモサイトでは、WEBマップ表示のフレームワークとして、Mapboxではなく MapLibre GLというオープンソースベースのJavascript フレームワークを用いている．このMapLibre GLは、現在のプロプライエタリなライセンスとなる前のMapbox GL から派生（フォーク）されたプロジェクトで、コミュニティー中心で開発されているのでライセンス利用料の心配がいらない素晴らしいフレームワークだ．
これまでは Mapbox GL を用いてWEBマップシステムの開発を行ってきたが、これからはMapLibre GLを用いた開発へ舵を切って行くことにしようと思う．ライセンス料金の心配をしながら Mapbox GLを利用するのは、精神衛生上よろしくない．
- ・MapboxでカスタムWebmap作りに挑戦 #1
- ・MapboxでカスタムWebmap作りに挑戦 #2
- ・MapboxでカスタムWebmap作りに挑戦 #3（地理院のベクタータイルを表示する）
