Maputnikによるベクトルタイルのデザイン編集

ベクトルタイル(Mapbox Vector Tile)及びtileserver-glではMapLibre GL Styleを使って地図のデザインを行います。

今回はMaputnikとOpenMapTilesを例に説明をします。

Maputnikについて

Maputnik自体はReactを使ったシングルページアプリケーションとして構築されています。 そのため、ローカル内で動作をさせる方法もありますが、今回は OpenMapTiles が公開してるMaputnikのサイトを使います。

Maputnik Editor

Maputnik Editorは日本語で表示した場合を想定しています(スクリーンショットは英語のままです)。

なお、ローカル内での動作方法については Maputnik-CLI の使い方を参照してください。

Maputnik CLI

今回利用するOpenMapTilesの設定について

今回はOSMFJが運用するサーバ、 https://tile.openstreetmap.jp/ をターゲットとします。 運用上停止する可能性がありますのでご注意ください。

自身で運用するものを対象とする場合、以下の項目を自分のサーバに置き換えてください。

• TileJSON URL
• Sprite URL
• Glyphs URL

Maputnikの基本

新規ファイル作成

新しいデザインを作成する場合はまず最初にベースとするデザインファイルをギャラリースタイルの中から選択して開きます。 なお、この時に3Dを含むデザインファイル(現在ではOSM Liberty)を使わないようにしてください。 3Dの表現を含んでいる場合、tileserver-glでのレンダリングで問題が生じる可能性があります。

今回はギャラリーからMapTiler Basicを選びます。

次に地図を日本の場所に移動したあとに画面上部の データソース タブを選択して、 ソース一覧 のダイアログを出します。

ここで、 #openmaptiles に対する TileJSON URL をベクトルタイルサーバを参照するように設定します。

TileJSON URLはベクトルタイルサーバのトップからURLをコピーします。

今回利用するTileJSON URLは https://tile.openstreetmap.jp/data/planet.json となります。

入力を終えたらタブを押すと即時に変更が反映されます。

次に、フォントとスプライトを変更します。 画面上部の スタイル設定 を選択し、 スタイル設定 のダイアログを出します。

ここでは スプライトURL と フォントグリフURL の二箇所を書き換えます。 なお、アイコンを利用しない場合は スプライトURL は利用しません。

現状では以下の設定が可能です。

スプライトURL : https://tile.openstreetmap.jp/styles/osm-bright/sprite

フォントグリフURL : https://tile.openstreetmap.jp/fonts/{fontstack}/{range}.pbf

これで初期設定が完了です。

あとは一度この段階でスタイルファイルのダウンロードをします。 画面上部の 保存 を選択し、 スタイルを保存 のダイアログを出します。

ここではスタイルファイルのダウンロードが可能になっています。 保存を押してJSONファイルをダウンロードします。

MapLibre GL Styleの基本

MapLibre GL StyleはJSON形式のファイルとなります。

MapLibre Style Spec

Root要素

MapLibre GL Styleでは最初にRoot要素を決定します。

重要となる要素は以下のものです。

version : MapLibre GL StyleのSpecificationのバージョンを指します。これは 8 で固定です。

name : スタイルの名称を指定します

sources : スタイルファイルが参照するデータソースを指定します。データソースは複数指定可能です。

glyphs : スタイルファイルが参照するフォントのURLを指定します。詳細は後述する フォントグリフURL について を参照してください。

sprite : スタイルファイルが参照するアイコンのスプライトのURLを指定します。詳細は後述する スプライトURL について を参照してください。

layers : 後述するレイヤーを複数指定します。Maputnikでは主にこのレイヤーの編集を行います。

レイヤー

今回利用するOpenMapTiles及びMapLibre GL Styleの組み合わせでは、 OpenMapTilesが提供してるスキーマに沿ったレイヤーごとにデザインをする仕組みになります。

レイヤーは概ね以下のものから構成されます。

ID : レイヤーのID値、他と重複してはいけない

タイプ : Background(背景), Fill(ポリゴン), Line(ポリライン), Symbol(POIなどのポイント), Raster(ラスタデータソース), Circle(円), Fill-extrusion(噴出したFill、3Dで利用), Hillshade(標高表示), Heatmap(ヒートマップ)のいずれか

ソース : データの元となるソース、今回は openmaptiles に固定

ソースレイヤ : ソースに指定したソースの中でレイヤーが利用するデータのレイヤー

最小ズーム : 表示される最小のズーム

最大ズーム : 表示される最大のズーム

また、これから以下のものを組み合わせて表示を行います。

フィルタ : ソースレイヤで指定した中でレイヤーが使う条件となる式(複数設定可能)

ペイントプロパティ : レイヤーをどのように描画するか指定するプロパティ

レイアウトプロパティ : レイヤーをどのように表示するか指定するプロパティ(Line及びSymbolのみ)

例えば、水を真っ青で表現した場合は以下のようになります。

また、JSONでは以下のように表現されます。

{
  "id": "water",
  "type": "fill",
  "source": "openmaptiles",
  "source-layer": "water",
  "filter": [
    "==",
    "$type",
    "Polygon"
  ],
  "paint": {
    "fill-color": "rgba(0, 0, 255, 1)"
  },
  "layout": {}
}

なお、JSON上での表現ではペイントプロパティは paint、 レイアウトプロパティは layout と表現されますが、 Maputnik上ではタイプがSymbolの場合は、 これらのプロパティを 一般レイアウトプロパティ、 文字レイアウトプロパティ、アイコンレイアウトプロパティ、 文字ペイントプロパティ、アイコンペイントプロパティと わかりやすく項目を分けるようになっています。

また、typeごとにペイントプロパティとレイアウトプロパティの順番が変わり、 またレイアウトプロパティの表示が無いものもあります。

フィルタ

フィルタではソースレイヤに対して演算子を用いたフィルタリングを行う機能となります。

railway というIDのレイヤーについて見ていきます。

{
  "id": "railway",
  "type": "line",
  "source": "openmaptiles",
  "source-layer": "transportation",
  "filter": ["==", "class", "rail"],
  "layout": {"visibility": "visible"},
  "paint": {
    "line-color": "hsl(34, 12%, 66%)",
    "line-opacity": {
      "base": 1,
      "stops": [[11, 0], [16, 1]]
    }
  }
}

railway は transportation という ソースレイヤ を参照していますが、 transportation 自体には class というフィールドに多くの value が存在しています。

OpenMapTiles Schema - transportation

現状では transportation には以下のものが存在しています。

• motorway
• trunk
• primary
• secondary
• tertiary
• minor
• service
• track
• path
• raceway
• motorway_construction
• trunk_construction
• primary_construction
• secondary_construction
• tertiary_construction
• minor_construction
• service_construction
• track_construction
• path_construction
• raceway_construction
• rail
• transit
• cable_car
• gondola
• ferry
• bridge
• pier

このうち電車の線路は rail が相当します。 そのため、フィルタは以下のようになります。

"filter": [
  "==",
  "class",
  "rail"
],

フィルタ 自体は 演算子, filed, value という並びの配列として表現されます。

なお、このフィルタは以下の表現の省略系となります。

"filter": [
  "all",
  [
    "==",
    "class",
    "rail"
  ]
],

フィルタはデフォルトでは all が指定されていて、これはすべてのフィルタがマッチするという表現になります。

では、このレイヤーをコピーして、橋になっている部分のみ適応するようフィルタを拡張してみます(レイヤー操作については後述します)。

まず、右下のフィルタの追加を選択します。すると、フィルタが一行追加されます。

ここで、 field に brunnel を、 value に bridge を、 演算子 は == を指定します。

フィルタが適応されているレイヤーを確認するには画面上部の表示で 検査 を選択して 地図 から 検査 へと切り替えます。

上記の操作では以下のように bridge のものだけが参照されるよう変化しているのがわかります。

このようにフィルタを使うケースでは 検査 での確認を頻繁に行います。

フィルタで用いられるschemeは下記サイトを参照してください。

OpenMapTiles Schema

演算子については MapLibre Style Style の Expression を参照してください。

MapLibre Style Spec / Expression

レイヤーの順序及び操作

レイヤーは一番左に並んでいます。

上にあるレイヤーから順番にレンダリングをしていくため、Adobe PhotoshopやAdobe illustratorのレイヤーとは逆の並びになるのに注意してください。

例えば、waterというレイヤーを一番下に持っていくと橋を表現した道路よりも上位になってしまうため、橋がレンダリングされないということになります。

各レイヤーには次のように操作が可能となっています。

レイヤーの削除、コピー、表示非表示切り替え

レイヤーの削除ボタン(ゴミ箱のアイコン)は選択しているレイヤーを削除します。 確認などがないため、操作をする時には気をつけてください。 なお、レイヤーは削除するのではなく非表示で代用するという手もあります。

レイヤーのコピーボタン(レイヤーが重なっているアイコン)は選択しているレイヤーを複製します。 複製後のレイヤーは複製したレイヤーの上に配置されますが、 グループ化されていないレイヤーを複製した際には即座にグループ化されます。 また、複製後のレイヤーはIDの重複を防ぐために -copy というsuffixが追加されます。

レイヤーの表示非表示切り替えボタン(目のアイコン)では単に表示と非表示を切り替えます。 レイヤーが表示から非表示になった場合は、 layout に "visibility": "none" という値が設定されます。 逆に非表示から表示になった場合は、 layout に "visibility": "visible" という値が設定されます。 なお、"visibility": "visible" はデフォルト値です。

レイヤーの順番操作

レイヤーの順番を操作するにはレイヤーの左にあるアイコンをクリックしたまま上下に動かして、 挿入したい場所に移動させます。

この時に同じ ソースレイヤ が参照されているものが上下に並ぶと自動的にグループ化されます。

また、グループ内に２つしかレイヤーがないレイヤーを違う ソースレイヤ の間に移動させるとグループ化が解除されます。

なお、一部のレイヤーが上下に動かせないという現象があります。 その場合はレイヤーを複製してから複製したレイヤーを動かし、その後元のレイヤーを非表示にするなどしてください。

レイヤプロパティ 及び ペイントプロパティ

レイアウトプロパティ は Line 及び Symbol でレイヤーの編集画面で編集が可能です。 ただし、仕様においては全てのtypeでvisibleという表示非表示を選択するpropertyがあり、 このpropertyのみレイヤー自体の操作(後述)で扱います。

ペイントプロパティの基本項目

ペイントプロパティ では以下の項目は多くのところで共通で指定可能です。

Color : 色指定。RGBのHEX表記(#99EEBBなど)やhsl表記(hsl(210, 67%, 85%))、hsla表記(hsla(0, 0%, 89%, 0.56))が可能です。

Pattern : 塗りつぶす画像を指定。指定可能なものはスプライトの名前を用います。

Opacity : 透明度。1が100%(不透明)で0が0%(透明)です。

これらは共通なので以下では一部説明を省略します。

では、以下ではそれぞれの type ごとに利用可能な プロパティ について説明します。

type: Background

Background は背景を指定します。

MapLibre Style Spec / Layers / Background

以下の ペイントプロパティ が利用可能です。

Backgroundは特にフィルタなどを指定せずに使います。 また、レイヤーは一番上にもっていきます。

type: Fill

Fill はポリゴンの塗りつぶしをします。 建物(building)や水(water)、緑(landcover_wood)などに利用されます。

MapLibre Style Spec / Layers / Fill

以下の ペイントプロパティ が利用可能です。

type: Line

Lineはポリゴンなどの線を描画する時に利用します。

MapLibre Style Spec / Layers / Line

Line には以下の4つの レイアウトプロパティ が存在しますが、 基本的な考え方は SVG 1.1 の ストロークプロパティ と同じです。

SVG 1.1 / 11.4 ストロークプロパティ

line-round-limit のみSVG 1.1に対応する概念がありません。

Line で使われるPaint Propertiesは以下のものがあります。

type: Symbol

Symbol はPOIなどのPointや道路や建物の名前を表示するのに使います。 そのため、POINT, LINESTRING, POLYGONのいずれも利用することができます。

MapLibre Style Spec / Layers / Symbol

また、テキストや画像を使うことができるため、Maputnikでは レイアウトプロパティ 及び ペイントプロパティ が細かく分類されているという特長があります。

• レイアウトプロパティ
  • 一般レイアウトプロパティ
  • 文字レイアウトプロパティ
  • アイコンレイアウトプロパティ
• ペイントプロパティ
  • 文字ペイントプロパティ
  • アイコンペイントプロパティ

以下が利用できる全てのプロパティです。

Symbol の 一般レイアウトプロパティ 一覧

Symbol の テキストレイアウトプロパティ の 一覧

Symbol の アイコンレイアウトプロパティ の 一覧

Symbol の テキストペイントプロパティ の 一覧

Symbol の アイコンペイントプロパティ の 一覧

テクニック

ズームレベルごとの処理(Expression)

線やテキストなどはズームインをすると拡大するように設定するのが一般的です。 MapLibre Styleではズームレベルごとにプロパティを設定することでこの動作を実現します。 MapLibre Styleではこの仕組みを Expression と定義しています。

MapLibre Style Spec / Expressions

MapTiler Basicの road_trunk_primary では line-width の値を以下のように設定しています。

"line-width": {
  "base": 1.4,
  "stops": [
    [
      6,
      0.5
    ],
    [
      20,
      30
    ]
  ]
}

stops がズームレベルごとの大きさを指す配列となり、 [zoom, value] と表現しています。 また、上記の例ではズームレベルが6の時に 0.5 pixel の幅に、ズームレベルが20の時に 30 pixel の幅になるように設定されています。 ズームレベルが7以上20未満の間は 0.5 〜 30 pixel の間を値になるようになります。 なお、ベクトルレンダリングでのズームレベルは切り捨てとなるため、ズームレベル 6.6 などでも 0.5 pixel を維持します。 ただし、ラスタレンダリングの場合はズームレベルで小数点がないため、単純に間の数字になるとだけ考えてください。

base はズームレベルごとの増加の割合を設定する指数関数の基底を設定します。 上記の例で 1 を設定するとズームレベルが7になった段階で幅が 30 pixel になります。 逆に 2 を設定するとなかなか幅が広くならず、ズームレベル20に近づいてやっと広くなるような形になります。 1.4 という値は比較的なめらかにズームをする値になります。

では、この作業をMaputnikで行います。

今回は MapTiler Basic の路線の表示である railway を対象に行います。

まず、 ペイントプロパティ の Width の左にある Σ を選択します。

選択をすると以下のように stops が追加されます。

この値を変更していくのですが、入力時に値の検証が即時にされるため、高いズームレベルから編集をしていきます。

1. zoom 10: value 1
2. zoom 16: value 3

これで線の幅が 1 〜 3 pixel になるようになりましたが、 base の値はUIから追加や編集はできません。 そのため、JSONを直に編集する必要があります。

これで路線が滑らかに拡大するようになります。

fill-translate による2Dでの影付け

fill-translate の説明で影付けで使われるオプションであると紹介しましたが、実際にbuildingで利用する例を紹介します。 手順は以下のようになります。

1. buildingのレイヤーをコピーして、buildingの１つ下のレイヤーに配置をする。この時building-shadowなどわかりやすいIDを付けておく
2. building-shadowのColorを元の色よりも濃い目にする
3. building-shadowのTranslateでx, yを2か3ぐらいの値を入力する

Translateの値をあまり大きくしないのがポイントです。何故なら余り離れてしまうと影としては不自然に見えてしまうからです。

line-dasharray によるゼブラ模様の作成

line-dasharray は行政区を表現するための点線によく使われる表現ですが、工夫をすると線路のゼブラなどを実現することができます。

今回は MapTiler Basic の路線の表示である railway を対象に行います。 実際の作業は以下の手順で行います。

1. railway を複製して、複製したレイヤーが下に(つまりMaputnik上では上に)配置されるようにする
2. 複製したレイヤーの Width に 4 をセット
3. 元のレイヤーの Width に 2 をセット
4. 元のレイヤーの Color に白い色をセット
5. 元のレイヤーの Dasharray の Add Value を二回押す(２つの配列が作成される)
6. それぞれの Dasharray に 2 をセット

ポイントは先にレンダリングされるレイヤーの幅を長くして、次に幅が短いレイヤーを重ねることです。

なお、これに似たような方法としてDasharrayを設定せずに線を重ねて特長のある線を表現するという方法があります。