0. はじめに

ベクトルタイルのスタイル作成の練習をするために、Maputnikを利用して地理院地図Vectorのスタイルを作成してみます。

Maputnikとは

MaputnikはオープンソースのMapLibre Style Specificationのためのビジュアルエディタです。Maputnikを使用することで、JSONファイルを編集することなく、地図が表示されている画面で編集結果を確認しながらスタイル編集をすることが出来て便利です。

1. Maputnikで地理院地図Vectorのベクトルタイルを読み込む

まずは、Maputnikのオンラインエディタを開きましょう。以下のようなサイトが開くと思います。

今回は、一から地図を作っていきたいので、「Open」を押して、一番下の「Empty Style」をクリックしましょう。そうすると、白い画面が表示されます。この時に気を付けることは、次のステップで日本付近を読み込んでいくので、日本付近にズームしてから、「Empty Style」をクリックすることです、そうしないと、地理院地図Vectorのスタイルを読み込んだ時に、その地図が表示されている領域がどこか分からなくなります。

次に「Data Sources」をクリックして、「Add New Srouce」に以下のように入力します。

プロパティ	値	説明
Source ID	v	任意の値
Source Type	Vector(XYZ URLs)	既定値
Tile URL	https://cyberjapandata.gsi.go.jp/xyz/experimental_bvmap/{z}/{x}/{y}.pbf	地理院地図VectorのタイルURL
Min Zoom	4	最小ズーム値
Max Zoom	16	最大ズーム値

最後に「Add Source」をクリックすると、以下の通り「Active Sources」として加えられます。

2. Maputnikで地理院地図Vectorのスタイルを作成する

では、次にデータソースからレイヤを追加しましょう。①Add Layerをクリックして、
ID: bg（任意の値でOK）
Type: Background
として、背景を設定します。

その後、①bgレイヤをクリックして選択し、②色を適当な値に設定します。

次に地理院地図Vectorのベクトルタイルのレイヤを読み込んでいきます。その際には、地理院地図Vector提供実験のウェブサイトの属性等の仕様詳細の内容を読む必要があります。

今回は、海岸線と水域を読み込むことにします。source-layerがそれぞれ、「coastline」、「waterarea」とあるので、これらをMaputnikに読み込む時の「source layer」とします。

まずは海岸線を読み込みます。

ID: coastline（任意の値、今回はSource Layerと同じ名前とした）
Type: Line（データタイプが線であるため）
Source: v（先ほど追加したソースを指定）
Source Layer: coastline（上記のレイヤの名称を記載）

次に水域を読み込みます。

ID: waterarea（任意の値、今回はSource Layerと同じ名前とした）
Type: Fill（データタイプが面であるため）
Source: v（先ほど追加したソースを指定）
Source Layer: waterarea（上記のレイヤの名称を記載）

水域の色を以下のように青色に変化させました。

ちなみに、レイヤーのリストはそのままレンダリングされるレイヤーの階層になっていて、一番下にあると一番上にレンダリングされます。

3. MapLibre GL JSで表示する

最後に作成したスタイルをMapLibre GL JSで表示してみましょう。まずは作成したスタイルファイルをダウンロードします。①「Export」をクリックして、②「Download Style」をクリックするとスタイルファイルがダウンロード出来ます。

ダウンロードされたスタイルファイルに、出典の追記をしたファイルが以下です。

test_style.json

{
  "version": 8,
  "name": "Empty Style",
  "metadata": { "maputnik:renderer": "mlgljs" },
  "sources": {
    "v": {
      "type": "vector",
      "tiles": [
        "https://cyberjapandata.gsi.go.jp/xyz/experimental_bvmap/{z}/{x}/{y}.pbf"
      ],
      "minzoom": 4,
      "maxzoom": 16,
      "attribution": "<a href=\"https://maps.gsi.go.jp/vector/\" target=\"_blank\">国土地理院ベクトルタイル提供実験</a>"
    }
  },
  "sprite": "",
  "glyphs": "https://orangemug.github.io/font-glyphs/glyphs/{fontstack}/{range}.pbf",
  "layers": [
    {
      "id": "bg",
      "type": "background",
      "paint": { "background-color": "rgba(232, 225, 225, 1)" }
    },
    {
      "id": "coastline",
      "type": "line",
      "source": "v",
      "source-layer": "coastline"
    },
    {
      "id": "waterarea",
      "type": "fill",
      "source": "v",
      "source-layer": "waterarea",
      "paint": { "fill-color": "rgba(20, 101, 223, 1)" }
    }
  ],
  "id": "hfkgus5"
}

次にこちらの記事で作成したHTMLファイルの中身を少し修正して、以下のようにします。style, center, zoomを変更しています。また、出典を明示するため、「maplibreLogo: true,」をコメントアウトしています。

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Using Maputnik</title>
    <meta
      property="og:description"
      content="Initialize a map in an HTML element with MapLibre GL JS."
    />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="stylesheet"
      href="https://unpkg.com/maplibre-gl@4.1.3/dist/maplibre-gl.css"
    />
    <script src="https://unpkg.com/maplibre-gl@4.1.3/dist/maplibre-gl.js"></script>
    <style>
      body {
        margin: 0;
        padding: 0;
      }
      html,
      body,
      #map {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      const map = new maplibregl.Map({
        container: "map", // container id
        style: "./text_style.json", // style URL
        center: [138.34, 35.66], // starting position [lng, lat]
        zoom: 5, // starting zoom
        // maplibreLogo: true,
      });
    </script>
  </body>
</html>

GigHub Pagesでアップロードした地図はこちらから見られます。

4. まとめ

Maputnikで地理院地図Vectorのスタイルを作成して、MapLibre GL JSで表示しました。Maputnikを使えば、色々なスタイリングが出来るので今後試していこうと思います。

Maputnikで地理院地図Vectorのスタイルを作成する