--- title: 日本のタイルサーバーとGeoな話題 tags: #openstreetmap author: [Taro Matsuzawa aka. btm](https://www.docswell.com/user/smellman) site: [Docswell](https://www.docswell.com/) thumbnail: https://bcdn.docswell.com/page/LELMDRGM7R.jpg?width=480 description: 日本のタイルサーバーとGeoな話題 OpenStreetMap Foundation Japanの地図タイル配信基盤と最近のGeoな話題 published: August 01, 26 canonical: https://www.docswell.com/s/smellman/5VJX3E-2026-08-01-osmf-tile --- # Page. 1 ![Page Image](https://bcdn.docswell.com/page/LELMDRGM7R.jpg) 日本のタイルサーバーと Geo な話題 OpenStreetMap Foundation Japan の地図タイル配信基盤と最近の Geo な話題 Taro Matsuzawa (@smellman) OSGeo.JP/OSMFJ/jus 2026/08/01 # Page. 2 ![Page Image](https://bcdn.docswell.com/page/4JMYPRQ6JW.jpg) 自己紹介 ● 松澤 太郎 (Taro Matsuzawa / @smellman) ● 一般社団法人 OpenStreetMap Foundation Japan (OSMFJ) 理事 ● 一般社団法人 OSGeo 財団 日本支部(OSGeo.JP) 理事 ● 日本 UNIX ユーザ会 副会長 ● UNOpenGIS/7 Lead Engineer ● とある会社の GIS エンジニア Open Source Conference 2026 Kyoto 2 / 34 # Page. 3 ![Page Image](https://bcdn.docswell.com/page/PJR91R8N79.jpg) OpenStreetMap Japan と OpenStreetMap Foundation Japan # Page. 4 ![Page Image](https://bcdn.docswell.com/page/PEXQYR88JX.jpg) OpenStreetMap Japan と OpenStreetMap Foundation Japan ● OpenStreetMap Japan (OSM Japan) は、OpenStreetMap プロジェクトを支援 する日本のコミュニティです。 ● OpenStreetMap Foundation Japan (OSMFJ) は、OpenStreetMap Foundation の日本支部として、OpenStreetMap プロジェクトの日本国内での普及・啓発活 動を行っています。 ● OSMFJ の活動内容: ● 地図タイル配信基盤の運用 ● 各種問い合わせ対応、OpenStreetMap Foundation への問い合わせ対応 ● OpenStreetMap 関連イベントの開催・支援(主に State of the Map Japan) ● 日本国内での OpenStreetMap コミュニティの支援 Open Source Conference 2026 Kyoto 4 / 34 # Page. 5 ![Page Image](https://bcdn.docswell.com/page/3EK93RKLED.jpg) OSMFJ タイルサーバー # Page. 6 ![Page Image](https://bcdn.docswell.com/page/L73WG8Z675.jpg) OSMFJ タイルサーバーの概要 ● OSMFJ タイルサーバは、OSM データを基にした地図タイルを配信するためのイ ンフラストラクチャです。 ● さくらインターネット様からサーバの支援を受け、2020 年からベクトルタイル サーバ及びラスタタイルサーバを運用しています。 ● OSMFJ タイルサーバの URL: https://tile.openstreetmap.jp/ Open Source Conference 2026 Kyoto 6 / 34 # Page. 7 ![Page Image](https://bcdn.docswell.com/page/87DK1MRMJG.jpg) タイルサーバとは ● タイルサーバは、地図をタイル状の画像に分割して配信するサーバです。 ● クライアントは必要なタイルをリクエストし、サーバはそれに応じてタイルを返 します。 ● タイルは通常、ズームレベルごとに異なる解像度で提供されます。 ● タイルサーバの利点: ● 高速な地図表示 ● キャッシュによる効率的な配信 ● 大規模な地図データの管理が容易 Open Source Conference 2026 Kyoto 7 / 34 # Page. 8 ![Page Image](https://bcdn.docswell.com/page/VJPKQRWQE8.jpg) タイルの構造 ● タイルは通常、XYZ 座標系で管理されます。 ● ズームレベル (Z)、X 座標 (X)、Y 座標 (Y) の 3 つのパラメータで指定されます。 ● 例: ズームレベル 10、X=512、Y=384 のタイルは、URL として次のようにアクセ スできます: ● https://tile.openstreetmap.jp/10/512/384.png Open Source Conference 2026 Kyoto 8 / 34 # Page. 9 ![Page Image](https://bcdn.docswell.com/page/2EVV5R8PEQ.jpg) 国土地理院による説明 Copyright: 国土地理院 Open Source Conference 2026 Kyoto 9 / 34 # Page. 10 ![Page Image](https://bcdn.docswell.com/page/57GL6M5QEL.jpg) ラスタタイルとベクトルタイル ● ラスタタイル: 画像として配信されるタイル (例: PNG, JPEG, WebP) ● 地図のスタイルを変更するには、サーバ側で画像を再生成する必要がありま す。 ● ベクトルタイル: 地図データをベクトル形式で配信するタイル (例: Mapbox Vector Tile, MapLibre Vector Tile) ● クライアント側でスタイルを変更できるため、柔軟な地図表示が可能です。 ● OSMFJ タイルサーバでは、ラスタタイルとベクトルタイルの両方を提供してい ます。 Open Source Conference 2026 Kyoto 10 / 34 # Page. 11 ![Page Image](https://bcdn.docswell.com/page/4EQY4RZWJP.jpg) ラスタタイルを深掘り ● ラスタタイルは、地図の見た目を固定した画像として配信されます。 ● 利点: ● クライアント側の負荷が少ない ● 古いブラウザやデバイスでも表示可能 ● 欠点: ● スタイル変更が困難 ● データ量が大きくなることがある ● 通常、256px × 256px の画像として配信されます。 ● 512px × 512px のタイルを使用する場合もあります。(Retina 対応) Open Source Conference 2026 Kyoto 11 / 34 # Page. 12 ![Page Image](https://bcdn.docswell.com/page/KJ4WQ83171.jpg) ラスタタイルの特殊な例 - 標高タイル ● ラスタタイルでは、画像データ以外にも、地図情報を含めるケースがあります。 ● 例: 標高データを含むラスタタイル (DEM タイル) ● 標高情報を色で表現した画像として配信されます。 ● 色の値に計算式を適用することで、標高を取得できます。 ● 例: 標高タイルの計算式 ● https://github.com/tilezen/joerd/blob/master/docs/formats.md ● decode: (red * 256 + green + blue / 256) - 32768 ● encode: v += 32768 r = floor(v/256) g = floor(v % 256) b = floor((v - floor(v)) * 256) ● なお、OSMFJ のタイルサーバでは標高タイルは配信していません。 Open Source Conference 2026 Kyoto 12 / 34 # Page. 13 ![Page Image](https://bcdn.docswell.com/page/LE1YP2157G.jpg) 標高タイルいろいろ ● 標高タイルはいくつかフォーマットがあります。 ● Mapbox Terrain-RGB ● Mapzen Terrarium ● 地理院地図 標高タイル ● MapLibre GL JS では、標高タイルを使用して 3D 地図を表示することができま す。 ● 地理院地図 標高タイルは別途ライブラリが必要です。 ● https://github.com/mug-jp/maplibre-gl-gsi-terrain ● ただしアーカイブされたので注意が必要。後述する Mapterhorn を推 奨。 Open Source Conference 2026 Kyoto 13 / 34 # Page. 14 ![Page Image](https://bcdn.docswell.com/page/GEWG2R8WJ2.jpg) 標高タイルを組み合わせた例 ● https://smellman.github.io/aws-terrain/#11.97/35.35292/138.74862/0/58 Open Source Conference 2026 Kyoto 14 / 34 # Page. 15 ![Page Image](https://bcdn.docswell.com/page/47ZLDR82J3.jpg) ベクトルタイルを深掘り ● ベクトルタイルは、地図データをベクトル形式で配信するタイルです。 ● 利点: ● クライアント側でスタイルを自由に変更可能 ● データ量が少なく、効率的な配信が可能 ● 欠点: ● クライアント側の負荷が高い ● 古いブラウザやデバイスでは表示できない場合がある ● OSMFJ タイルサーバでは、Mapbox Vector Tile (MVT) フォーマットで配信して います。 ● 最近では、MapLibre Vector Tile (MVT) フォーマットもリリースされていて、 試験的に公開しています。(ただし、OSMFJ ではない個人のサーバです) ● https://dev.smellman.org/static/planet-mlt.pmtiles Open Source Conference 2026 Kyoto 15 / 34 # Page. 16 ![Page Image](https://bcdn.docswell.com/page/YJ6W1RK6JV.jpg) ベクトルタイルの動的な挙動 ● ベクトルタイルは、クライアント側でスタイルを変更することで、地図の見た目 を動的に変えることができます。 ● MapLibre GL JS を使用して、地図の色や線の太さを変更することができま す。 ● 3D 表現も可能で、建物の高さを表現することができます。 ● また、ベクトルタイルは、ズームレベルに応じて表示する地物を制御することも 可能です。 ● これにより、詳細な地図情報を提供しつつ、パフォーマンスを維持することがで きます。 Open Source Conference 2026 Kyoto 16 / 34 # Page. 17 ![Page Image](https://bcdn.docswell.com/page/GJ5M48P5J4.jpg) ベクトルタイルを使ったネタサイト ● https://smellman.github.io/osm-sound-demo/ ● OpenStreetMap の建物を音楽に合わせて上下させるネタアプリです。 ● 楽曲の周波数スペクトルで 3D ビルの高さがリアルタイムに変化します。 Open Source Conference 2026 Kyoto 17 / 34 # Page. 18 ![Page Image](https://bcdn.docswell.com/page/LE3WG835E5.jpg) OSMFJ タイルサーバの技術スタック ● Schema: OpenMapTiles(Planetiler) ● タイル生成: TileServer GL ● キャッシュ: Varnish Cache ● 配信: Nginx ● モニタリング: Prometheus + Grafana ● サーバ: さくらインターネット様からの支援を受けた専用サーバ ● ストレージ: SSD 500GB ● メモリ: 64GB ● CPU: 20 コア ● ネットワーク: 100Mbps Open Source Conference 2026 Kyoto 18 / 34 # Page. 19 ![Page Image](https://bcdn.docswell.com/page/8EDK1M4Y7G.jpg) OSMFJ タイルサーバの特徴 ● OSMFJ タイルサーバは、OpenStreetMap データを基にした地図タイルを配信す るためのインフラストラクチャです。 ● ラスタタイルとベクトルタイルの両方を提供しており、様々な地図アプリケー ションで利用可能です。 ● また、OSMFJ タイルサーバは、非営利団体として運営されており、無料で利用 できることが特徴です。商用利用も可能ですが、定期的に再起動がかかるので商 用なら時前で作る事をおすすめしています。 ● 竹島、北方領土問題にちょっと対応しています。 ● ソースは全て公開しています: https://github.com/osmfj/tileserver-gl-site Open Source Conference 2026 Kyoto 19 / 34 # Page. 20 ![Page Image](https://bcdn.docswell.com/page/V7PKQRM2J8.jpg) OSMFJ タイルサーバの配布形式 ● ラスタタイル: PNG, WebP ● ベクトルタイル: Mapbox Vector Tile (MVT) ● PMTiles 形式及び mbtiles 形式で配布 ● mbtiles 形式は OSMFJ のタイルサーバではなく、 https://file. smellman.org で配布しています。 ● PMTiles 形式は OSMFJ のタイルサーバで配布しています。 ● mbtiles 形式を個人のサーバで配布しているのは単に容量の問題です。 Open Source Conference 2026 Kyoto 20 / 34 # Page. 21 ![Page Image](https://bcdn.docswell.com/page/2JVV5R9XJQ.jpg) OSMFJ タイルサーバの使い方 ● https://tile.openstreetmap.jp からデザインを一つ選択します。 ● 選択したデザインの service から URL をコピーして、地図アプリや Web サイト で使用します。 Open Source Conference 2026 Kyoto 21 / 34 # Page. 22 ![Page Image](https://bcdn.docswell.com/page/5EGL6MZRJL.jpg) ラスタタイルの使い方 - Leaflet.js ● Leaflet.js を使用して、OSMFJ のラスタタイルを地図として表示する例です。 ● HTML に以下のコードを追加します。 <div id="map" style="width: 600px; height: 400px;"></div> <script> var map = L.map('map').setView([35.6895, 139.6917], 13); L.tileLayer('https://tile.openstreetmap.jp/styles/maptiler-basic-ja/512/{z}/{x}/{y}.png', { attribution: '&copy; OpenStreetMap contributors', maxZoom: 18, tileSize: 512, }).addTo(map); </script> ● タイルサイズが 512px なのに注意をしてください。エンドポイントを調整する ことで 256px タイルとしても使用可能です。 Open Source Conference 2026 Kyoto 22 / 34 # Page. 23 ![Page Image](https://bcdn.docswell.com/page/4JQY4RLY7P.jpg) ベクタタイルの使い方 - MapLibre GL JS ● MapLibre GL JS を使用して、OSMFJ のベクタタイルを地図として表示する例で す。 ● HTML に以下のコードを追加します。 <div id="map" style="width: 600px; height: 400px;"></div> <script type="module"> import * as maplibregl from 'https://unpkg.com/maplibre-gl@^6.0.0/dist/maplibre-gl.mjs'; var map = new maplibregl.Map({ container: 'map', center: [139.6917, 35.6895], style: 'https://tile.openstreetmap.jp/styles/maptiler-basic-ja/style.json', zoom: 13 }); </script> ● attribution の設定は自動的に行われます。 Open Source Conference 2026 Kyoto 23 / 34 # Page. 24 ![Page Image](https://bcdn.docswell.com/page/K74WQ8DZE1.jpg) ベクタタイルのスタイル変更 ● MapLibre GL JS では、ベクタタイルのスタイルを自由に変更することができま す。 ● 例えば、坂ノ下さんが作成している万博マニアックマップのスタイルを利用する には、以下のスタイルを指定します。 ● https://k-sakanoshita.github.io/expo2025-maniacs/tiles/japan-20251013. json ● このスタイルは、OSMFJ のベクタタイルを利用して、万博会場周辺の地図 を表示するためのスタイルで、3D の建物の表現が可能になっています。も ちろん、万博会場以外でも利用可能です。 Open Source Conference 2026 Kyoto 24 / 34 # Page. 25 ![Page Image](https://bcdn.docswell.com/page/LJ1YP2ZDEG.jpg) 自分でスタイルを作る ● MapLibre GL JS では、独自のスタイルを作成することも可能です。 ● スタイルは JSON 形式で記述され、地図の色や線の太さ、ラベルの表示などを 自由に設定できます。 ● スタイルエディタとして、Maputnik (https://maplibre.org/maputnik/) を使用 すると、GUI でスタイルを作成できます。 ● JSON を大量に編集したくないっていう人向けには、Charites (https://github. com/unvt/charites) を使うと、JSON を YAML に分解してテキストエディタでス タイルを作成することができます。 ● 作成したスタイルは、OSMFJ のベクタタイルと組み合わせて使用することがで きます。 Open Source Conference 2026 Kyoto 25 / 34 # Page. 26 ![Page Image](https://bcdn.docswell.com/page/GJWG2R9872.jpg) OSMFJ 以外のデータソース ● OSMFJ 以外にも様々なサービスが MapLibre GL JS で利用可能です。 ● Protomap (https://protomap.com/) は、OSM データをベースにしたベクトルタ イルを提供しており、PMTiles 形式の開発元としても有名です。商用、個人利用 ともに可能です。 ● OpenFreeMap (https://openfreemap.org/) は、OSM データをベースにしたベク トルタイルを提供しており、PMTiles 形式で配信しています。商用利用も可能で す。 ● 国土地理院最適化ベクトルタイル (https://github.com/gsi-cyberjapan/ optimal_bvmap) は、国土地理院の地図データをベースにしたベクトルタイルを 提供しており、PMTiles 形式で配信しています。 Open Source Conference 2026 Kyoto 26 / 34 # Page. 27 ![Page Image](https://bcdn.docswell.com/page/4EZLDR9973.jpg) 最近の Geo な話題 # Page. 28 ![Page Image](https://bcdn.docswell.com/page/Y76W1RKD7V.jpg) GeoLibre ● GeoLibre は、最近登場した GIS アプリケーションです。 ● https://github.com/opengeos/GeoLibre ● MapLibre GL JS をベースに様々なフォーマットのビューアーとして使えるアプ リで、Juyter Notebook などの環境でも動作します。 ● 3DTiles なども対応しているので、Plateau の 3D 都市モデルも表示可能で す。 ● 開発スピードがとても速く、気づいたら v2.4 がリリースされていました。 ● 技術スタック: Tauri v2, React, TypeScript, MapLibre GL JS, DuckDB-WASM Spatial, and deck.gl. Open Source Conference 2026 Kyoto 28 / 34 # Page. 29 ![Page Image](https://bcdn.docswell.com/page/G75M48P874.jpg) MIERUNE 地図タイル ● MIERUNE 地図タイルは、OpenStreetMap をベースにした地図タイルを提供す るサービスです。 ● https://maps.mierune.co.jp/ ● セルフホスト可能な地図タイルサーバとしても利用可能で、PMTiles 形式で提供 されています。 ● デザインがかなり凄腕の人たちで作られているので、今後が楽しみなプロダクト です。 Open Source Conference 2026 Kyoto 29 / 34 # Page. 30 ![Page Image](https://bcdn.docswell.com/page/9J29VK6VER.jpg) Mapterhorn ● Mapterhorn は、MapLibre GL JS のための新しい標高タイルインフラです。 ● https://mapterhorn.com/ ● 高解像度(512px)の標高タイルを世界単位で提供しており、日本やスイスなどの 地域によっていはより解像度が高い標高タイルを提供しています。 ● 日本からは国土地理院標高タイルがコミットされています。 ● 前述する MIERUNE さんがスポンサーになりました。 Open Source Conference 2026 Kyoto 30 / 34 # Page. 31 ![Page Image](https://bcdn.docswell.com/page/DEY43N9QJM.jpg) CoMaps ● CoMaps は、OpenStreetMap をベースにしたオフライン地図アプリケーション です。 ● https://www.comaps.app/ ● 地図データをスマートフォンにダウンロードして、オフラインで利用することが できます。 ● ナビゲーションなどがオフラインで可能なので、海外出張の時に入れて置くと便 利なソフトです。 ● 最近、Gigazine でも紹介されました。 ● https://gigazine.net/news/20260718-comaps/ Open Source Conference 2026 Kyoto 31 / 34 # Page. 32 ![Page Image](https://bcdn.docswell.com/page/VJNYVXL278.jpg) MapLibre GL JS v6 ● MapLibre GL JS v6 がリリースされました。 ● ES modules のみでの提供になり、従来の UMD 形式での提供は終了します。 ● いくつか API チェンジがあるので、v5 系からの移行には注意が必要です。 ● https://github.com/maplibre/maplibre-gl-js/blob/main/docs/guides/v5to-v6-migration-guide.md Open Source Conference 2026 Kyoto 32 / 34 # Page. 33 ![Page Image](https://bcdn.docswell.com/page/YE9P684DJ3.jpg) Leaflet.js v2 ● Leaflet.js v2 がそろそろリリースされる予定です。 ● Leaflet.js v2 は、従来の Leaflet.js v1 系からの大幅な変更があり、いくつかの API チェンジがあります。 ● ESM モジュール形式での提供がメインになります。 ● Leaflet.js の特徴だった L.map が new Map に変更されるなど大きな変更があり ます。従来の L.map も提供はされるようですが、非推奨になります。 ● 2.0.0-alpha.1 がリリースされてからそろそろ一年音沙汰が無いので、ちょっと 心配している。 Open Source Conference 2026 Kyoto 33 / 34 # Page. 34 ![Page Image](https://bcdn.docswell.com/page/GE8DZ8Q5ED.jpg) まとめ ● OSMFJ タイルサーバは、OpenStreetMap データを基にした地図タイルを配信す るためのインフラストラクチャです。 ● ラスタタイルとベクトルタイルの両方を提供しており、様々な地図アプリケー ションで利用可能です。 ● 様々なプロバイダが地図を提供しており、MapLibre GL JS などのライブラリを 使用することで、自由に地図のスタイルを変更することができます。 ● 地図の進化は止まらず、今後も新しい技術やサービスが登場することが期待され ます。 Open Source Conference 2026 Kyoto 34 / 34