y2blog

オープンソースのマップスタイル編集ツール Maputnik を使ってみる

先の記事『MapboxでカスタムWebmap作りに挑戦 #1』でMapboxがユーザ向けに提供している Mapbox Studio を使った地図のスタイル変更について紹介したが、この記事では Mapbox Studio と同じような機能を有するWebベースのマップスタイルエディターである Maputnik について紹介することにする．

Maputnikの最大の特徴はオープンソースベースで開発されており、誰でも無料で利用することができる汎用的なWEBベースのマップスタイルエディタだ．Maplibre GL JSが Mapbox GL からフォークしてオープンソースした際に、Mapbox Studioからフォークされたものなので、Mapbox Studio とほぼ同様の機能が備わっている．

Maputnik のソースコードはGitHub上で公開されているので、自分のサイト上で動かすことが可能だ．

とりあえず Maputnik の機能を試してみるのであれば、Maplibre がホストしているWEBサイト “https://maplibre.org/maputnik/” にアクセスすれば誰でもMaputnikを無料で使えことができる．

ちなみに、Maputnikの読みは　Googleさんが仰るには　”Map – oot – nick” で、真ん中の　oot　にアクセントを置くらしい．

Maputnik サイトにWEBブラウザからアクセスしてみる

WEBブラウザ（WebGLに対応したもの）で、https://maplibre.org/maputnik/　にアクセスすると次のような黒と白の２つのパートに分かれた画面が表示されていることだろう．

尚、この画面は一番最初にアクセスした時だけ表示される画面で、次回以降同じブラウザでMaptunikにアクセスすると、前回の作業終了時の内容がそのまま引き継がれた状態で起動してしまうので、この画面の様にはならないだろう．

Maptunikでの作業を新たに開始させるためにリセットする必要がある場合は、画面上部の”Open”タブを開いて、”Empty Style”（真っ白な画面）を選択することで　Maptunikを初期状態に戻すことができる．

Maptunikにはデフォルトのスタイルセットが幾つか登録されており、その中から “OSM OpenMapTiles” を選択してみることにする．これらのスタイルセットには、スタイル定義情報やタイルデータのソース情報などが予め設定されているので、セットを選択するだけでマップが表示される．

Maptunikの表示言語は数ヶ国語を選択することができ、日本語を選択するとメニューやダイアログなどの項目は日本語表示にすることが可能だ．

国土地理院のベクタータイルをMaptunik上に表示してみる

Maptunikに国土地理院のベクタータイルを読み込むには、QGISの場合と同じ様にデータソースに地理院のベクタータイルのURLを、スタイル定義のURLを地理院のスタイル定義ファイルを設定すれば良い．（後ほど行うスタイル定義ファイルを取り込む際に、自動的にベクタータイルの情報がデータソースとして取り込まれるので、データソースにベクタータイルを登録する作業はここで行わなくても良い）

“Data Sources” メニューを開くと、OSMなどの5種類の既存のパブリックソースから選らぶか、あるいはユーザが新たにデータソースを追加するのかを選択する事ができる．今回は、新たにデータソースを登録するので、ダイアログの下部にある”Add New Source” の各項目に必要な設定を行い、”Add Source” ボタンでユーザ定義のデータソースをプロジェクトに追加する．

  Source ID:    "GSI Vector Tile"     <=== 分かり易い名前を付ける）
  Source Type:  "Vector(Tile URLs)"
  Tile URL:     "https://cyberjapandata.gsi.go.jp/xyz/experimental_bvmap/{z}/{x}/{y}.pbf"
　Scheme Type:   "xyz (Slippy map tilename scheme)"
  Min Zoom:      "4"
  Max Zoom:      "17"

"Data Sources"の設定が終わったら、今度は再び "Open"メニューを開き、"Open local Style" か、"Load from URL" のどちらかを選んで必要な項目を設定する．手元のPC上に置いたスタイル定義ファイルを取り込む場合は"Open local Style"を、GitHubなどの外部サイトに置いてあるスタイル定義ファイルを取り込む場合は、"Load from URL" を選べば良い．

今回は、GitHub上に置かれたスタイル定義ファイル
　　"https://raw.githubusercontent.com/gsi-cyberjapan/gsivectortile-mapbox-gl-js/refs/heads/master/pale.json"
を指定する．

スタイル定義ファイルが取り込まれると、Maptunikの左端の"Layer"ペーンに"gsibv-vectortile-layer-1539"というレイヤー名が表示されており、真ん中のペーンには、"gsibv-vectortile-layer-1539" レイヤーに関する各種パラメータの値が表示され、設定されているパラメータの値をGUI画面から変更することができるようになっている．

"gsibv-vectortile-layer-1539"というレイヤーは、スタイル定義ファイル "pale.json" に記されている759個のレイヤーの内の一番最初のレイヤーで、最初はこのレイヤーだけが"Layer"ペーンに表示されている．

真ん中のペーンを一番下までスクロールすると、"JSON Editor" のテキストBOXが現れ、この"JSON Editor" で、レイヤー"gsibv-vectortile-layer-1539"のパラメータの値をテキストエディタで直接編集できるようになっている．

これまで、外部のテキストエディタを使ってスタイル定義ファイルを開いて該当する箇所を探して編集していたが、Maptunikではダイレクトに各レイヤーのパラメータを弄り回すことが可能になっている．

他のレイヤーについては、左端の"Layer"ペーンの上部にある "Expand"ボタンか "gsibv-vectortile-layer-1539"の上にある"gsibv" 項目をクリックすると、折りたたまれているその他の全てのレイヤー項目が表示される．

地図表示部分が真っ白で何も表示されていない原因を解決する

Maputnikに国土地理院のベクタータイルを表示する設定を行っても、肝心の地図が何も描画されない場合がある．上記の画面のように地図が何も表示されていない場合は、恐らくMaputnikを初回に起動しただけの状態で、まっさらな状態で国土地理院のベクタータイルの設定を行ったことが原因だ．

このような現象が起きるのは、国土地理院のベクタータイルデータが日本近辺のごく狭い範囲しか網羅されておらず、ズームレベルも4〜17となっていることが原因で、Maputnik が初回に起動した状態では、地図の中心座標とズームレベルの初期値が国土地理院のベクタータイルデータの範囲にないためだ．

Maputnikの初期起動状態での地図の中心位置は緯度・経度がそれぞれ [ 0, 0 ] （アフリカ大陸のガーナ沖の「ヌル島」付近）で、ズームレベル 1 のタイルを表示する設定になっている．

ズームレベルを国土地理院のベクタータイルの最小値である4まで上げて地図をスクロールして日本列島付近を地図の表示領域内に簡単に収めることができれば良いのだが、この方法で日本付近の地図を表示させることは結構難しい．

そこで、この問題を解決するために、一度プリセットされている "OSM OpenMap Tiles" を開き地図を表示させた後、スクロールとズーム操作で日本の何処かを地図表示領域内に表示させる．このときのズームレベルは 4〜17の範囲内に設定しておく．

この状態でMaputnikには画面上に表示されている地図の中心位置とズームレベルの情報を内部に保持しているので、"OSM OpenMap Tiles"を閉じて、再び国土地理院のベクタータイルの設定を行うと、今度は無事国土地理院のベクタータイル地図が画面にきちんと表示されるようになる．

Maputnikのこの余計なお節介仕様は改善の余地があるが、とりあえずエリア探索で迷子になったらこの方法を使えば、目的の場所を簡単に見つけ出すことができるので覚えておくと良いだろう．

Maputnikのスタイル編集機能

Maputnikの編集機能を用いて、地図のスタイルをカスタマイズして行くことになるが、国土地理院のベクタータイルは沢山のレイヤーに分かれているので、目的のレイヤーを探し出すことから始めなければならない．

前回の QGIS の場合は、個々のレイヤーを個別に表示することが出来ず、貧弱な文字列検索機能で目的のレイヤーを探し出す必要があったが、Maputnikの場合は、個々のレイヤーを全てLayerペーンに表示させて、該当するレイヤーのパラメータをGUIベースまたはJSONエディタを使って弄ることが可能だ．

問題は、数百もあるレイヤーIDの名前が、レイヤー名の表示欄の幅の制限によって文字列の前半部分しか表示されていないので、レイヤーIDの名前の判断がつかないことだ．

とりあえず、前回の記事『』でやった編集内容と同じ事をMaputnikの編集機能で実現してみることにする．

先ずはJR御殿場線の線路部分のパターンの黒白模様の間隔を広げる事にするが、該当するレイヤーIDの名前は "gsibv-vectortile-layer-1777" なのだが、数字の部分が隠れて見えないので手探りで該当するレイヤーを探して行くことになる．

今回は破線の間隔の数値を[ 2,2 ] ⇒ [ 6, 6] に変更するだけだが、"Dasharray" の数値を変更するとオンザフライで結果が地図画面に反映されるので、スタイルの編集がし易い．尚、ここのGUI画面で行った編集結果は、下部の JSON Editor の内容にも即座に反映されるので、GUIベースでの編集操作とテキストベースでの編集を上手く使い分けるとスタイルの編集が楽になるだろう．

国道の色を目立つ赤系統の色に変更するには、国道関連のレイヤーを探し出して塗りつぶす色を変更して行けばよいのだが、国道のレイヤーは数十ものレイヤーから構成されているので、単純に塗りつぶしの色を変更するだけでも結構な手間が掛かる．

Maputnikの便利な機能として、地図上で目的の地物の上でマウスをクリックすると、その地物の周辺にある地物が含まれているレイヤー名を表示するポップアップダイアログが現れるので、目的のレイヤーを探し出すための手間を少し省くことが可能だ．

今回は、国土地理院のベクタータイルのスタイルを Maputnik を用いて編集してみた様子を簡単に紹介したが何となく、Maputnik の便利さがおわかり頂けたであろうか．

今回修正を施したスタイルは、Mapbox/Maplibre形式の汎用的なスタイル定義データとしてローカルファイルに書き出すことが可能なので、自分のWEBサイトにカスタマイズしたマップを表示させることが簡単にできるようになる．

Maputnikはオープンソースベースのマップスタイルの編集エディタとして今後どんどん普及していくものと思われる．現状では、既存のマップスタイルの編集に使うには、レイヤーや地物の検索機能が貧弱で使い難いが、自分でスタイルをスクラッチで一から作成する場合にはとても便利なツールだ．

Maputnikが書き出したスタイル定義ファイルの内容

{
  "version": 8,
  "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,
    "maputnik:renderer": "mlgljs"
  },
  "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（仮称）"
    }
  },
  "sprite": "https://gsi-cyberjapan.github.io/gsivectortile-mapbox-gl-js/sprite/pale",
  "glyphs": "https://maps.gsi.go.jp/xyz/noto-jp/{fontstack}/{range}.pbf",
  "layers": [
    {
      "id": "gsibv-vectortile-layer-1539",
      "type": "line",
      "metadata": {
        "layer-id": "layer-1128",
        "title": "坑口",
        "path": "構造物-坑口",
        "added": 1
      },
      "source": "gsibv-vectortile-source-1-4-16",
      "source-layer": "structurel",
      "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-1540",
      "type": "line",
      "metadata": {
        "layer-id": "layer-1393",
        "title": "人工水路（地下）",
        "path": "河川-人工水路（地下）",
        "added": 1
      },
      "source": "gsibv-vectortile-source-1-4-16",
      "source-layer": "river",
      "minzoom": 11,
      "maxzoom": 14,
      "filter": ["all", ["in", "ftCode", 5322]],
      "layout": {"line-cap": "square", "visibility": "visible"},
      "paint": {
        "line-color": "rgb(190,210,255)",
        "line-width": {"stops": [[11, 1], [14, 1.5]]},
        "line-dasharray": [2, 2]
      }
    },

 ... 【途中省略】

    },
    {
      "id": "gsibv-vectortile-layer-2301",
      "type": "symbol",
      "metadata": {
        "layer-id": "layer-1498",
        "title": "電子基準点(付)",
        "path": "記号-電子基準点(付)",
        "added": 1
      },
      "source": "gsibv-vectortile-source-1-4-16",
      "source-layer": "symbol",
      "minzoom": 14,
      "maxzoom": 18,
      "filter": ["all", ["in", "ftCode", 7101], ["==", "gcpCodeFlag", 1]],
      "layout": {
        "text-anchor": "left",
        "text-offset": [0.8, -0.1],
        "text-pitch-alignment": "viewport",
        "text-rotation-alignment": "viewport",
        "text-allow-overlap": true,
        "text-size": {"stops": [[14, 10], [15, 18], [16, 30], [17, 30]]},
        "text-field": [
          "to-string",
          [
            "case",
            ["!", ["has", "alti"]],
            ["to-string", ""],
            ["==", ["get", "alti"], ""],
            ["to-string", ""],
            [
              "in",
              ".",
              [
                "to-string",
                ["/", ["round", ["*", ["to-number", ["get", "alti"]], 10]], 10]
              ]
            ],
            [
              "to-string",
              ["/", ["round", ["*", ["to-number", ["get", "alti"]], 10]], 10]
            ],
            [
              "concat",
              [
                "to-string",
                ["/", ["round", ["*", ["to-number", ["get", "alti"]], 10]], 10]
              ],
              ".0"
            ]
          ]
        ],
        "text-font": ["NotoSansCJKjp-Regular"],
        "symbol-placement": "point",
        "icon-allow-overlap": true,
        "text-keep-upright": true,
        "symbol-z-order": "auto",
        "text-max-width": 100,
        "visibility": "visible"
      },
      "paint": {
        "text-color": "rgba(100,100,100,1)",
        "text-halo-color": "rgba(255,255,255,1)",
        "text-halo-width": 1
      }
    }
  ],
  "id": "xz8tftm"
}