ベースマップ

ExpTech は 3 組のベースマップタイルを提供します。いずれも TileJSON 付きで、MapLibre GL JS の source としてそのまま使えます。

タイル	形式	内容
行政界ベースマップ	ベクトル（`.pbf`）	世界の陸地、台湾の県・市と郷鎮市区の境界、津波警報の沿岸区間
地形	ラスタ（`.png`、Terrain-RGB）	台湾の標高。陰影起伏（hillshade）や 3D 地形を描けます
道路・建物	ベクトル（`.pbf`、OpenMapTiles 形式）	台湾の道路、建物、水系、地名、地点（POI）など。データは OpenStreetMap から

この 3 組は時刻で変わらないため、時刻リストは不要です。

データライセンス

ベースマップ、地形出典明記・商用可
推奨表記データ出典：ExpTech Studio（exptech.dev）
道路・建物出典明記・商用可
推奨表記データ出典：© OpenStreetMap contributors、© OpenMapTiles、ExpTech Studio（exptech.dev）

上流の条件

OpenStreetMap：OpenStreetMap のデータは ODbL です。地図上に「© OpenStreetMap contributors」を表示し、https://www.openstreetmap.org/copyright へリンクしてください。
OpenMapTiles：OpenMapTiles スキーマのタイルには「© OpenMapTiles」の表示が必要です。

表記の場所、例、商用利用の申請はデータの利用条件と出典表記をご覧ください。

認証

現在は API Token は不要です。レスポンスには Access-Control-Allow-Origin: * が付くため、ブラウザからクロスオリジンで直接読み込めます。

行政界ベースマップ

GEThttps://lb.exptech.dev/api/v1/map/tiles/tiles.json

商用可

サーバーLB

リクエスト例

curl "https://lb.exptech.dev/api/v1/map/tiles/tiles.json"

const res = await fetch("https://lb.exptech.dev/api/v1/map/tiles/tiles.json");
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const data = await res.json();
console.log(data);

import requests

res = requests.get("https://lb.exptech.dev/api/v1/map/tiles/tiles.json", timeout=10)
res.raise_for_status()
print(res.json())

レスポンス

200

TileJSON 2.0.0（抜粋）

{
  "tilejson": "2.0.0",
  "name": "ExpTech Studio Map",
  "format": "pbf",
  "minzoom": 0,
  "maxzoom": 12,
  "bounds": [
    -180,
    -85.051129,
    180,
    83.634101
  ],
  "attribution": "ExpTech Studio Map",
  "tiles": [
    "https://lb.exptech.dev/api/v1/map/tiles/{z}/{x}/{y}.pbf"
  ]
}

試してみる

GEThttps://lb.exptech.dev/api/v1/map/tiles/{z}/{x}/{y}.pbf

商用可

サーバーLB

パスパラメーター

zinteger必須
ズームレベル。範囲は TileJSON の minzoom / maxzoom を参照してください。
xinteger必須
XYZ タイルの列番号です。
yinteger必須
XYZ タイルの行番号です（北から南）。

リクエスト例

curl -o output.pbf --compressed "https://lb.exptech.dev/api/v1/map/tiles/<z>/<x>/<y>.pbf"

const res = await fetch("https://lb.exptech.dev/api/v1/map/tiles/<z>/<x>/<y>.pbf");
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const blob = await res.blob();

import requests

res = requests.get(
    "https://lb.exptech.dev/api/v1/map/tiles/<z>/<x>/<y>.pbf",
    timeout=10,
)
res.raise_for_status()
with open("output.pbf", "wb") as f:
    f.write(res.content)

レスポンス

200204

Mapbox Vector Tile（Content-Type: application/octet-stream）。一部のタイルは gzip で返します（Content-Encoding: gzip）binary MVT

この位置にタイルがない（内容なし）レスポンスボディなし

試してみる

レイヤー（source-layer）

source-layer	幾何	内容
`global`	面	世界の陸地
`city`	面	台湾の県・市
`town`	面	台湾の郷鎮市区
`tsunami`	線	津波警報の沿岸区間

各レイヤーの属性フィールドには、現在、正式な仕様がありません。変わることがあります。

地形

GEThttps://lb.exptech.dev/api/v1/map/terrain/terrain.json

商用可

サーバーLB

リクエスト例

curl "https://lb.exptech.dev/api/v1/map/terrain/terrain.json"

const res = await fetch("https://lb.exptech.dev/api/v1/map/terrain/terrain.json");
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const data = await res.json();
console.log(data);

import requests

res = requests.get("https://lb.exptech.dev/api/v1/map/terrain/terrain.json", timeout=10)
res.raise_for_status()
print(res.json())

レスポンス

200

TileJSON 2.0.0（抜粋）

{
  "tilejson": "2.0.0",
  "name": "ExpTech Studio Terrain",
  "format": "png",
  "encoding": "mapbox",
  "minzoom": 0,
  "maxzoom": 12,
  "bounds": [
    120.0166,
    21.8939,
    122.0096,
    25.3015
  ],
  "attribution": "ExpTech Studio Map",
  "tiles": [
    "https://lb.exptech.dev/api/v1/map/terrain/{z}/{x}/{y}.png"
  ]
}

試してみる

GEThttps://lb.exptech.dev/api/v1/map/terrain/{z}/{x}/{y}.png

商用可

サーバーLB

パスパラメーター

zinteger必須
ズームレベル。範囲は TileJSON の minzoom / maxzoom を参照してください。
xinteger必須
XYZ タイルの列番号です。
yinteger必須
XYZ タイルの行番号です（北から南）。

リクエスト例

curl -o output.png "https://lb.exptech.dev/api/v1/map/terrain/<z>/<x>/<y>.png"

const res = await fetch("https://lb.exptech.dev/api/v1/map/terrain/<z>/<x>/<y>.png");
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const blob = await res.blob();

import requests

res = requests.get(
    "https://lb.exptech.dev/api/v1/map/terrain/<z>/<x>/<y>.png",
    timeout=10,
)
res.raise_for_status()
with open("output.png", "wb") as f:
    f.write(res.content)

レスポンス

200

image/png、512 × 512 の Terrain-RGB。データがない位置は、海面（0 m）の単色画像を返しますbinary image/png

試してみる

タイルは 512 × 512 の Terrain-RGB PNG（mapbox の符号化）です。標高（メートル）は次のとおりです。

const elevation = -10000 + (r * 256 * 256 + g * 256 + b) * 0.1;

範囲外やデータがない位置は 204 ではなく、海面（0 m）を表す 512 × 512 の画像を返します。MapLibre の raster-dem はそのまま処理できます。

道路・建物

GEThttps://lb.exptech.dev/api/v1/map/gsi/gsi.json

商用可

サーバーLB

リクエスト例

curl "https://lb.exptech.dev/api/v1/map/gsi/gsi.json"

const res = await fetch("https://lb.exptech.dev/api/v1/map/gsi/gsi.json");
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const data = await res.json();
console.log(data);

import requests

res = requests.get("https://lb.exptech.dev/api/v1/map/gsi/gsi.json", timeout=10)
res.raise_for_status()
print(res.json())

レスポンス

200

TileJSON 2.0.0（抜粋）

{
  "tilejson": "2.0.0",
  "name": "ExpTech Studio GSI (Taiwan roads & buildings)",
  "format": "pbf",
  "minzoom": 0,
  "maxzoom": 14,
  "bounds": [
    114.28579,
    10.32677,
    122.3283,
    26.43722
  ],
  "attribution": "© OpenStreetMap contributors © OpenMapTiles",
  "tiles": [
    "https://lb.exptech.dev/api/v1/map/gsi/{z}/{x}/{y}.pbf"
  ]
}

試してみる

GEThttps://lb.exptech.dev/api/v1/map/gsi/{z}/{x}/{y}.pbf

商用可

サーバーLB

パスパラメーター

zinteger必須
ズームレベル。範囲は TileJSON の minzoom / maxzoom を参照してください。
xinteger必須
XYZ タイルの列番号です。
yinteger必須
XYZ タイルの行番号です（北から南）。

リクエスト例

curl -o output.pbf --compressed "https://lb.exptech.dev/api/v1/map/gsi/<z>/<x>/<y>.pbf"

const res = await fetch("https://lb.exptech.dev/api/v1/map/gsi/<z>/<x>/<y>.pbf");
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const blob = await res.blob();

import requests

res = requests.get("https://lb.exptech.dev/api/v1/map/gsi/<z>/<x>/<y>.pbf", timeout=10)
res.raise_for_status()
with open("output.pbf", "wb") as f:
    f.write(res.content)

レスポンス

200204

Mapbox Vector Tile（Content-Type: application/octet-stream）。一部のタイルは gzip で返します（Content-Encoding: gzip）binary MVT

この位置にタイルがない（内容なし）レスポンスボディなし

試してみる

OpenMapTiles のレイヤー構成に従い、OpenStreetMap の台湾データから生成しています。範囲は台湾だけです。よく使う source-layer は次のとおりです。 transportation、transportation_name、building、water、waterway、water_name、landcover、landuse、park、aeroway、aerodrome_label、boundary、place、poi、mountain_peak、housenumber。各レイヤーの属性は OpenMapTiles の文書を参照してください。使うときは「© OpenStreetMap contributors © OpenMapTiles」を表示しなければなりません。

TileJSON のフィールド

フィールド	型	説明
`tilejson`	`string`	TileJSON の仕様バージョン。現在は 2.0.0 です。
`name`	`string`	タイルセットの名前です。
`format`	`string`	pbf（ベクトル）または png（地形）です。
`encoding`	`string`	地形だけにあります。値は mapbox（Terrain-RGB の符号化）です。
`minzoom`	`integer`	最小ズームレベルです。
`maxzoom`	`integer`	最大ズームレベルです。超えたときは、このレベルのタイルを拡大してください。
`bounds`	`number[4]`	カバー範囲 [西, 南, 東, 北]。度。
`center`	`number[3]`	推奨する初期中心 [経度, 緯度, ズーム] です。
`attribution`	`string`	表示が必要な出典の文字列です。
`tiles`	`string[]`	タイル URL のテンプレート（完全な URL）です。

応用例

1 つの MapLibre GL JS スタイルで、3 組のタイルを同時に使います。TileJSON の url で source を作ると、ズーム範囲とカバー範囲は自動で読み込まれます。TileJSON の attribution には推奨表記の全文が入っていないため、下のように source 側で attribution を設定してください（TileJSON の値を置き換えます）。

const MAP = "https://lb.exptech.dev";

const map = new maplibregl.Map({
  container: "map",
  center: [121, 23.7],
  zoom: 7,
  style: {
    version: 8,
    sources: {
      // 行政界ベースマップ：global / city / town / tsunami
      exptech: { type: "vector", url: `${MAP}/api/v1/map/tiles/tiles.json`, attribution: "データ出典：ExpTech Studio（exptech.dev）" },
      // 地形：Terrain-RGB（mapbox の符号化）
      terrain: { type: "raster-dem", url: `${MAP}/api/v1/map/terrain/terrain.json`, tileSize: 512, encoding: "mapbox", attribution: "データ出典：ExpTech Studio（exptech.dev）" },
      // 台湾の道路・建物：OpenMapTiles 形式
      gsi: { type: "vector", url: `${MAP}/api/v1/map/gsi/gsi.json`, attribution: "データ出典：© OpenStreetMap contributors、© OpenMapTiles、ExpTech Studio（exptech.dev）" },
    },
    layers: [
      { id: "background", type: "background", paint: { "background-color": "#1f2329" } },
      { id: "land", type: "fill", source: "exptech", "source-layer": "global", paint: { "fill-color": "#3e4147" } },
      { id: "county", type: "fill", source: "exptech", "source-layer": "city", paint: { "fill-color": "#4b4e55" } },
      { id: "hillshade", type: "hillshade", source: "terrain", paint: { "hillshade-exaggeration": 0.3 } },
      { id: "roads", type: "line", source: "gsi", "source-layer": "transportation", paint: { "line-color": "#8a8f98", "line-width": 1 } },
      { id: "buildings", type: "fill", source: "gsi", "source-layer": "building", minzoom: 13, paint: { "fill-color": "#5a5e66" } },
      { id: "town-line", type: "line", source: "exptech", "source-layer": "town", paint: { "line-color": "#a9b4bc", "line-width": 0.4 } },
      { id: "county-line", type: "line", source: "exptech", "source-layer": "city", paint: { "line-color": "#a9b4bc", "line-width": 1 } },
    ],
  },
});

注意事項

TileJSON の tiles URL を使ってください。 完全な URL であり、ホスト名は TileJSON 自身と違うことがあります。自分で置き換えないでください。
ベクトルタイル（.pbf）にデータがないときは 204（内容なし）です。404 ではありません。MapLibre は自動で読み飛ばします。
一部のベクトルタイルは Content-Encoding: gzip で返します。ブラウザと MapLibre は自動で展開します。それ以外のクライアントは自分で処理してください（curl には --compressed を付けます）。
地形タイルは 512 × 512 です。MapLibre の raster-dem source には tileSize: 512 を設定してください。
ズーム範囲とカバー範囲は、TileJSON が返す値を正としてください。このページの抜粋は、実際の値と違うことがあります。
レスポンスに Cache-Control はありません。これらのタイルはめったに変わらないので、クライアントで自分でキャッシュできます。