TileMillによる地図デザイン

tilemill logo

TileMillは、細かいところまで美しく地図をデザインすることができる優れたアプリケーションです。編集や解析といった機能は持っておらず、地図の製図/カートグラフという点に特化しています。TileMillでは以下を利用します:

  • データ (OpenStreetMapデータベースや、Shapefileなど)
  • アイコン (既存や自作のアイコン)

TileMillは、あなたのデータを豊かに表現し、必要に応じたアイコンなどを付与するためのプラットフォームとなります。デザインされた地図は、画像やMBTileなどのファイル形式でエクスポートを行うことができ、MapBoxなどのサービスへ展開することで、ウェブサイトへの埋め込みを行うことができます。

この章では以下の内容を紹介します:

  1. TileMillのインストール
  2. TileMillの画面表示(地図、凡例、テーザー、CartoCSS)
  3. データの追加(Shapefile、あるいはOSMデータベース) (JOSMプラグインを利用したOSMデータの修正)
  4. CartoCSSを使ったスタイル定義(Line, Polygon, Pointのスタイル定義、ズームレベル、色の変更、コメント)
  5. 凡例の作成
  6. 作成した地図のエクスポート(PNG画像形式 & MBTile形式)

demo map

TileMillのインストール

ここでは、WindowsにTileMillをインストールする方法を解説します。その他のOS向けのパッケージは、以下のページからダウンロード可能です http://mapbox.com/tilemill/

  • ダウンロードページ( http://mapbox.com/tilemill/ )を表示させ、TileMillのセットアップファイルをダウンロードします

tilemill setup

  • TileMillのインストーラを起動します。オプション設定はデフォルトのままでよいでしょう

  • TileMillのインストールが完了すると、スタートメニューに”Start TileMill”という項目が登録されます

start tilemill

この項目をクリックすると、アプリケーションのプロジェクトタブを呼び出すことができます。TileMillにはいくつかのサンプルが付属しており、設定の参考とすることができます。

sample projects

TileMill画面表示

それではTileMillでなにができるかを確認するため、サンプルプロジェクトの中身を確認してみましょう。”Geography Class”という名称のサンプルプロジェクトを開いてください。10-20秒ほど読み込み処理が行われた後、地図が表示されます。

tilemill interface

TileMillの主要な要素:

地図 (Map)

地図ウィンドウには、現在のスタイル定義にもとづいてデータが表示されます。データを追加したり、スタイル定義を変更するたびにこの表示は更新されます。変更を適用するには、”save”ボタンを押してください。変更を適用した際、表示対象のデータ量が多いとしばらく白と青のグリッドが表示されることがあります。表示処理に時間がかかっているためですので、数分ほどお待ちください。

凡例 (Legend)

HTMLを使って、地図に凡例を表示させることができます。凡例を作成するためのHTML編集ウィンドウを開くには、画面左側下にある手の形のアイコンをクリックしてください。具体的に凡例表示でどのようなことができるのかは、サンプルプロジェクトの “OpenStreetMap DC”を参考にしてください。

hand button

テーザー (Teaser)

テーザーとは、地図の中の特定の部分にマウスカーソルをあわせたり、クリックを行った際に表示されるポップアップ、あるいは情報ウィンドウを意味します。コンテンツの記述は凡例と同じくHTMLで行います。サンプル地図では、利用者がマウスを移動させた位置に応じて国旗を表示するようになっています。

CartoCSS

TileMillで地図のスタイルを編集するにあたって、最も重要な部分です。TileMillのプロジェクトにはそれぞれ、地図のスタイルを設定するためのファイルが1つ以上定義されています。この記述を行うための言語はCartoCSSと呼ばれており、CSSと似た記法ではありますが、内容は地図のスタイル変更に特化しています。CartoCSSの詳細については後ほど再度取り上げますが、まずここでは “Geography Class”プロジェクトで利用されている3つのファイルを参照してみます。1つめのファイル style.mss では地図の基本的なスタイル定義が行われており、例えば水域の塗りつぶし色や、海岸線のアウトラインなどが記述されています。labels.mss には各国の名称をどのように表示するかが定義されています。このファイルにはテキストのフォントやサイズ、地図を拡大縮小した際に、国や地域の正式名称ではなく別名を表示させるための記述も含まれます。最後の rainbow.mss では、国や地域がどの色で塗りつぶし表示されるかが定義されています。このファイルではほぼすべての国ごとに個別の設定が記載されています。

サンプルプロジェクトのいろいろな箇所を変更してみて、それがどのような表示に影響するかを試してみてください。CartoCSSの記述を変更した後、 “Save”をクリックすることでその変更を反映させることができます。反映後は地図が再度読み込まれ、スタイルの変更点は即座に適用されます。TileMillは文法のチェック機能も用意されており、保存時にCSSの記述で間違いがあった場合はそのエラー箇所を警告表示してくれます。

プロジェクト自体の設定を変更する場合、右上に表示されているレンチのアイコンをクリックしてください。 “Geography Class”プロジェクトでは、利用可能なズームレベルが通常の半分になっています。設定画面では、このズームレベル制限を緩和することが可能です。デフォルトで 0〜8になっている箇所を、0〜12に変更してみてください。こうすることで、ズームイン可能なレベルを増やすことができます。

zoom control

データの追加

プロジェクトには複数のレイヤが登録されており、左下の “Layer”ボタンをクリックすることで詳細の確認が可能です。

tilemill layers

このリストには、そのプロジェクトに登録されているすべてのレイヤが表示されています。リストの左側に表示されているアイコンは、そのレイヤがポイントなのか、ラインなのか、ポリゴンなのかを示しています。各レイヤの右側のボタンからは、そのレイヤの詳細情報を表示させたり、設定を編集することが可能です。

シェイプファイルレイヤの追加

  • 地図にシェイプファイルのレイヤを追加してみます。 “Add Layer”をクリックします。

tilemill add layer

  • IDは、あなたがそのレイヤにつけたい名称を示します。どのような記述でも構いませんが、利用可能な文字列は英数字、ダッシュ、アンダースコアのみで、同じプロジェクト内の別レイヤと重複させることはできません。また、2byte文字は利用できません。

    レイヤに対してクラス(class)を付与することもできます。クラス定義とは、CSSでスタイル設定を行う際の補助情報です。例えば、水域の情報を含んでいるレイヤが複数登録されている場合、その複数のレイヤにそれぞれ “water” というクラスを割り当てておくことで、CSSの記述を行う際にそれらすべての “water”クラスを一度に指定することが可能になります。1つのレイヤに対して、複数のクラスを割り振ることも可能です。

    データソースとは、レイヤとして読み込んでいる対象のファイルを指します。ファイルの形式は、CSV、GeoJSON、KML、GeoTIFFが利用可能です。この例では、グルジア地域のポリゴン情報を含んだShapefileを読み込んでいます。このフィールドは、新しくレイヤを作成する際には入力が必須です。 SRSは Spatial Reference System の略であり、日本語では測地系、と称されます。TileMillでは多くの場合、自動判別によって正しいSRSが適用されます。

    各項目の設定が完了したら “Save”を押すと、プロジェクトに新しいレイヤが追加されます。続けて操作を行う場合は、 “Save & Style”を選んでください。この場合、新しく追加されたレイヤに対して最低限のスタイル設定が自動的に行われます。

    新しく追加されたレイヤはレイヤタブに表示され、 “Zoom to extent”ボタンを押すとそのデータが存在している位置まで自動的に表示を移動させることができます。

zoom to extent

  • 新しいレイヤのデータ位置へ表示を移動した画面です。 “Save & Style”を選択していた場合、基本的なスタイル定義が自動的に行われています。

georgia basic styling

  • 新規追加されたレイヤは、地図の最前面に表示されます。ただし、地名のラベル表示を前面にしておきたいなどの場合は、レイヤの表示順を変更することが可能です。レイヤタブに表示されているアイコンをドラッグし、この場合であれば country-name レイヤの下に移動させます。地図の表示を更新する場合は、プロジェクトのセーブを行う必要がありますので注意してください。

自作のOSMデータベースを追加

OpenStreetMapデータを格納したPostGIS(このマニュアルの1章で作成したデータベース)を追加する方法を見てみましょう。

  • レイヤタブから “Add Layer”をクリックします。

  • “PostGIS”ボタンをクリックします。

    この手順は、上記でShapefileレイヤを追加した際とほぼ同等です。主な違いは、PostGISへの接続パラメータを設定する必要がある点となります。

db connection parameters

  • “Connection”の隣にある項目に、以下を入力します:

    host=localhost dbname=osm user=postgres password=my_password

    my_password の部分は、あなたの実際のパスワードに変更してください。

  • “Table or subquery” の部分には、以下を入力します: planet_osm_roads

    この部分に記入する値としては planet_osm_point 、 planet_osm_line あるいは planet_osm_polygon と記入してもかまいません。

  • 最後に、SRSをWGS84に変更する必要があります。

  • “Save & Style”をクリックしてプロジェクトに新しいレイヤとして追加し、最低限のスタイル設定を行ってください。レイヤの情報がある位置まで表示を移動させ、どのような表示になっているかを確認します。

layer extent

JOSMプラグイン

TileMillにはJOSMプラグインが用意されており、JOSMを起動して現在表示している地域のOpenStreetMapデータを編集することができます。スタイルを設定中にOSMデータに間違いがあることに気がついた場合、このプラグインを使ってデータの間違いを修正することが可能です。こうした作業を行う予定がない場合、この箇所はスキップしてください。ただし、プラグインを有効化する方法は全般的にこの作業と同じ手順となります:

  • JOSMをインストールしておき、Plusins タブをクリックします。

josm plugin

  • JOSMを起動します。JOSMの設定で “遠隔操作 (Remote Control)”機能を有効化しておく必要があります。

  • TileMillの地図表示を移動させ、編集を行いたい位置を表示させます。 “Edit in JOSM”をクリックします。

edit in josm

  • TileMillで表示中の地域のOpenStreetMapデータがJOSMでダウンロードされます。OSMデータは通常と同じように編集し、サーバにアップロードすることが可能です。

OSMに対して実施した編集結果がそのまますぐにTileMillに反映されるわけではないことに注意してください。編集した対象はOSMのメインデータベースであり、あなたが接続しているデータベースの情報ではないためです。OpenStreetMapに対して行った編集結果をTileMillにも反映させたい場合、なんらかの手段で接続先のデータベースの情報も更新を行う必要があります。

CartoCSSによるスタイル定義

ようやくお楽しみの、地図のスタイル定義についてです！ 既に言及したとおり、TileMillでの地図スタイル定義にはCartoCSSという言語を利用します。CSSに慣れ親しんでいるかたにとって、CartoCSSはおそらく直感的に理解可能な言語でしょう。もしそうでなくとも、記法の習得はそれほど難しいものではありません。

TileMillでは、様々な種類のレイヤを様々な方法でスタイル定義することが許されています。ラインレイヤ(Line Layers)では、ライン自体と、ラベル表示、ラインの内側の塗りつぶしパターン、マーカーの追加、国道などへ番号を表示させたい場合のシールド(標識)表示設定が可能です。ポリゴンレイヤ(Polygon Layers)では、ポリゴン自体と、ラベル表示、ポリゴンの内側の塗りつぶしパターンやアウトライン表示、マーカーの追加が設定できます。ポイントレイヤ(Point Layers)では、ポイント自体とラベル表示、シールドやマーカーの設定が可能です。

“Geography Class”プロジェクトにはいくつものファイルがレイヤとして登録されています。データソースを複数のファイルに分割するのは、編集時の利便性を高めるためです。最終的に、これらのレイヤはすべて同一のスタイルシート設定でマークアップされます。ただし、スタイル設定に関する情報をまとめておくことはよいアイデアです。例えば、ラベル設定については1つの設定ファイルの中でまとめ、マーカーに関する設定はまた別のファイルでまとめる、などです。

ラインのスタイル定義

ラインのスタイル定義は以下のように行います。PostGISデータベースから planet_osm_roads レイヤを追加した場合、TileMillは自動的に style.mss の一番下に基本的なスタイル定義を追加します。

#planetosmroads {
  line-width:1;
  line-color:#168;
}

非常にシンプルなコードです。#planetosmroads の部分は一般的に セレクタ (selector)を呼ばれます。このコードは “ID planetosmroads の中に存在しているすべてのオブジェクトに対し、以下のスタイル定義を適用する”という内容を表しています。このセレクタを利用して、オブジェクトに適用したいスタイルを定義します。例では、基本的なスタイルが適用されています。line-width:1;は、ラインの太さを1ピクセルに指定しています。line-color:#168; はラインを青く色付けする指定を行っています。色の指定は、16進数、#xxx、#xxxxxx などの形式で記述します。

同じスタイル定義を2回以上定義した場合、最後に記述したスタイルが適用されます。 すなわち:

#planetosmroads {
 line-width:1;
 line-color:#168;
}

#planetosmroads {
 line-width:1;
 line-color:#861;
}

この場合、レイヤーの色指定は #861 になり、最初に行った定義は無視されます。

ラインに対する記述は多くの項目があります。以下はその一例です:

#planetosmroads {
  // ラインの幅を 0.5 ピクセルにする
  line-width: 0.5;
  // ラインの色を #1a6e8a にする
  line-color: #1a6e8a;
  // 透過度を 80% に指定 (20% の透過)
  line-opacity: 0.8;
  // ラインの終点を円状にする
  line-join: round;
  // ラインを点線として表示する。
  // この記述の場合、
  // 点線は表示幅 6px、空白 2px、ライン表示 2px、空白 2pxで繰り返し
  line-dasharray: 6,2,2,2;
}

ポリゴンのスタイル定義

ポリゴンのスタイル定義はラインととてもよく似ています。ラインに対して利用可能な属性はすべて利用可能で、さらにいくつか、利用可能な属性が増えています。なぜならば、ポリゴンを描画する際にはポリゴン内部を指定するためのスタイル定義と、アウトラインを描くためのスタイル定義がそれぞれ必要になるからです。そのため、ポリゴンに対するline属性の定義は主にポリゴンのアウトラインに対して適用されます。例を見てみましょう:

#georgia_regions {
 line-color:#000;
 line-dasharray: 6,6;
 line-width:0.5;
 polygon-opacity:0.5;
 polygon-fill:#ae8;
}

レイヤの表示結果は、以下のようになります: georgia 1

ライン属性への定義が、ポリゴンのアウトラインに対して適用されていることに注目してください。ここでは、ポリゴンの中身を塗りつぶすために polygon-fill が、塗りつぶしの透過度を設定するために polygon-opacity が使われています。

ポイントのスタイル定義

ポイントレイヤでは多くの場合、特定の地点を表すためになんらかのアイコンが使われます。これは、CartoCSSのなかでアイコン画像ファイルへの適切なパスを記述することで簡単に実現可能です。例えば以下のような指定方法になります:

#cities {
 point-file: url(icons/star-10.png);
}

スタイルの定義方法に関してより詳しい情報を知りたい場合、TileMill画面の左下に表示されている {} カコミのボタンをクリックしてみてください。

parentheses

タイルに関する用語

ズームレベルについて正しく理解するために、そもそもスリッピーマップの動作原理について、ここで整理しておきましょう。地図の左上に、ズームレベルを変更するためのボタンと、”Zoom XX”と数字が表示されていることに注目してください。

zoom buttons

この数字は、現在のズームレベルを表しています。プロジェクトの設定にもよりますが、数字は0から22までの値をとることができます。ズームレベルの数字が大きくなるほど、地図の詳細部分にズームすることを示します。ズームレベル0では、全世界が表示されます。

イントロダクションでも触れましたが、スリッピーマップではそれぞれのズームレベル毎に小さなタイル形式の画像ファイルを大量に作成します。それぞれの画像は 縦256ピクセル、横256ピクセルとなります。ズームレベル0では、TileMillはタイル画像を1つだけ生成します。ズームレベルを1に変更すると、1つであったタイルは4つに分割されます。ズームレベル2では、4つに分割されたタイルがさらに4つずつに分割され、結果として16個のタイル画像が生成されます。ズームレベルを増やすごとに、同様の処理が行われます。

ズームレベル 0 - タイル画像は1つ one tile

ズームレベル1 - タイル画像は4つ four tiles

次の章で詳しく説明しますが、ズームレベル毎に異なるスタイル定義を記述することがしばしばあるため、ズームレベルを意識しておくことはとても重要です。

複雑なセレクタの例

前章で説明したセレクタについて、地図のスタイル定義における利用法を学びましょう。特定のレイヤを選択してスタイルの編集を行うために、レイヤIDをどのように記述して指定すればよいかは既に紹介しました:

#cities {
 point-file: url(icons/star-10.png);
}

このような定義があったとして、レイヤに含まれる一部の地物だけを選択するにはセレクタの記述を変更し、データテーブルの中身を示す引数を加えます。以下の定義では、ウルグアイの都市にだけ星印を表示させています:

#cities[SOV0NAME='Uruguay'] {
 point-file: url(icons/star-10.png);
}

同様の定義方法はレイヤに含まれてい属性テーブルのどの項目に対しても適用することができます。 labels.mss ファイルでは既に、都市のスタイル定義をこの手法で行っています:

#cities[ADM0CAP=1][zoom\>3] {
 ...
}

このセレクタ指定では、ズームレベルによる指定も追加されています。この方法を使うことで、どのズームレベルでどのような表示を行うべきかをTileMillで指定することができます。上記の例では、ブラケット {} で囲まれているスタイル定義は、ズームレベルが3より多い場合にのみ適用されます。すべてのズームレベルで都市の名称が表示されるわけではないのは、この設定が行われているためです。

ズームレベル 5 zoom five

ズームレベル 3 zoom three

rainbow.mss では、別の書式での指定も行われてます:

#country::land-glow-outer[zoom>1] {
 line-color:#000;
 line-width:5;
 line-opacity:0.1;
 line-join:round;
}

対象となっているレイヤは #country で、ズームレベルが1より上の場合、という関数が付与されています。では、 ::land-glow-outer の部分はなんでしょうか。

ここで、以下の記述を行った際の挙動を思い出してください。 最初に行った定義は無視されます:

#country {
 line-color: #000;
 line-width: 6;
}

#country {
 line-color: #999;
 line-width: 3;
}

ここで適用される最終的な表示は、ラインの幅 3ピクセル、色は #999 となります。しかし場合によっては、同じレイヤに対して複数の定義を記述する必要があります。例えばラインに枠線をもたせたり、ぼかし効果をかけたりする場合、TileMillではまず厚みのある線を描き、そこにより細い線を重ねて表示させることで表現します。この手法を行うには、レイヤに対して 付属情報 (attachment) を指定する必要があります。このため、1つのレイヤに対して複数回の描画指定を行う機能が実装されているのです。

#country::outline {
 line-color: #000;
 line-width: 6;
}

#country::fill {
 line-color: #999;
 line-width: 3;
}

この例では1つのレイヤに対して付帯情報として ::outline と ::fill が与えられ、描画指示が2回行われています。TileMillはその指定に従って、まずは色 #000、幅 6ピクセルの線を描画し、その上から色 #999、幅 3ピクセルの線を描画します。rainbow.mssファイルでは、それぞれの国の国境線の内側と外側にぼかし効果をかけるためにこの記述方法が行われています。

セレクタについてのより詳細な情報は、ヘルプの “Intro” タブを参照してください。

利用色の変数化

CSSの機能である変数は、複数の箇所で使われる色の指定に一貫性を持たせるためにたいへん有用な機能です。CartoCSSで複雑な定義を行う場合、ファイルのなかで同じ色を複数のレイヤ、複数の地物に対して利用します。そしてそれらの色を後から変更しようとする場合、それぞれの箇所の記述を逐一変更する必要があります。CartoCSSの変数定義を利用することで、色の指定を一箇所にまとめ、一括で変更できるようにしておくのが便利です。

rainbow.mss ファイルの先頭には、以下の指定があります:

@white: #F0F8FF; /* blue-tinted, for Antarctica */
@red: #fdaf6b;
@orange: #fdc663;
@yellow: #fae364;
@green: #d3e46f;
@turquoise: #aadb78;
@blue: #a3cec5;
@purple: #ceb5cf;
@pink: #f3c1d3;
@f00: #f00;

この部分が、変数の設定部分です。ここで定義した変数 (@green や @pink など)を他の場所で使用すると、自動的に定義した色として置換されて適用が行われます。

コメント

CartoCSSにはコメントを追加することができます。 /* と */ で囲まれた部分のテキストはスタイル定義に影響しません。また、スラッシュを2回 // 入力した場合、その行の残り部分はコメントとして扱われます。例:

/* This is
a comment \*
// this is a comment too!

凡例の作成

  • TileMillでの凡例は、HTMLで記述します。左下に表示されている手の形のアイコンをクリックして、凡例編集ウィンドウを開いてください。

hand button

  • “Legend”タブには、地図の右上に表示されている凡例表示部分のHTMLコードが描かれています。HTMLに慣れ親しんでいれば、自作の凡例は簡単に記述することができるでしょう。

sample legend

地図のエクスポート

見やすい地図をTileMillで作成したら、その地図を世界に向けて公開してみましょう。TileMillにはいくつかの形式でデータをエクスポートする機能が存在しており、 “Export”ボタンをクリックすることで実行することができます。

PNG画像ファイルのエクスポート

export button

  • PNG画像ファイルとしてエクスポートするには “PNG”をクリックします
  • キーボードのShiftキーを押しながら地図をドラッグして、対象の地域を選択します。必要に応じてズームレベルを変更してください。

shift and drag

  • 右側のパネルから、出力する画像ファイルの名称や画像のピクセル数などを変更します。

png dimensions

  • 値の調整が終わったら “Export”をクリックしてください。
  • 画像生成が開始され、処理が完了すると “Save”ボタンから結果を保存することができます。

save png

MBTiles形式のエクスポート

MBTiles は複数の画像タイルの集合体です。256x256サイズの小さな画像ファイルであり、スリッピーマップの生成が可能です。この次の章では、このMBTileをアップロードして、Development Seedである MapBoxのサービス上で地図を簡単に公開する方法を紹介します。 images that make up the slippy map.

  • タイルをエクスポートするには、エクスポートメニューから”MBTiles”を選択します

  • 先程と同様、キーボードのShiftキーを押しながら地図をドラッグして、対象の地域を選択します。

  • 出力するファイルの容量を減らすため、適宜ズームレベルを調整してください。ズームレベルを1増やす毎に4枚の画像が生成されるため、ファイルサイズが4倍に増える、ということを念頭に置いてください。今回は目安として、MBTilesのファイル容量が50MB以下になるようにしてください。

zoom control

もしMapboxアカウント ( 前章で作成したアカウント を持っている場合は、MBTilesをアップロードして、レイヤーとしてウェブ上で参照することができます。

まとめ

この章では、地図デザインにおける強力なアプリケーションであるTileMillの使い方を紹介しました。より詳しい情報は、MapboxのTileMillドキュメントページに掲載されています。閲覧はこちらから。

CC0
Official HOT OSM learning materials