FOSS4G Tokyo 2013のハンズオン"TileMill基礎編"で行った資料です。 OpenStreetMap人道支援チーム(HOT)の資料(ライセンスCC0)をもとに作成しています。 Thank you HOT Team! https://docs.google.com/presentation/d/13YDKoHBruHhC74ITmUbEh0p2gLvU4bkoxRlFkymLr-A/ https://docs.google.com/presentation/d/1dj0axOstGOYPN35fmi6qhc2I3IhUtlbznevB68wHxxM/

1. TileMill基礎編
Designing Beautiful Maps
original instruction docs by HOT
https://github.com/hotosm/learnosm/wiki/English-Teaching-Guides
modified by Satoshi IIDA, @nyampire

2. 概要
1. TileMillとは
2. 画面表示 (表示/編集インターフェース)
3. 新規プロジェクト作成
4. レイヤーの追加 (Shapefiles, SQLite & PostGIS)
5. スタイリング (Colors RGB & CartoCSSの基礎)
6. エクスポート

3. 1. TileMillとは
TileMillとは:
地図表現を簡単にデザインするオフラインエディタ
利用可能なデータ形式:
CSV, Shapefile
GeoJSON, GeoTIFF
PostGIS, SQLite Database
スタイル定義:
CartoCSS
データエクスポート形式:
タイル、画像などなど

4. 1. TileMillとは
よいところ
設定がテキストである
設定コピー、再利用が容易
データ形式(カラム名など)変更時にも対処容易
処理が早い
データ表示に特化しているため、高速
多様な出力データ形式
MBTile、PDF、PNGなど
OSMに特化せずとも利用可能

5. 2. TileMillインターフェース

6. 主題図の作成が簡単です

7. 2. TileMill インターフェース

8. 2. TileMill インターフェース
ツールTIP: 凡例(Legend), テーザー/ポップアップ, URL指定
フォントディレクトリ
CartoCSS ディレクトリ
レイヤー

9. フォントディレクトリ
CartoCSSディレクトリ

10. ツールTIP: 凡例, テーザー/ポップアップ, URL指定
テーザー(Teaser)
クリック(Full)
•
対象地物にマウス載せた時の処理
•
•
•
ポップアップ、Teaser
クリック、Full
レイヤ内のデータを情報としてポ
ップアップします
•
凡例(Legend)
•
•
地図上のシンボルについての説明
地図上にはタイトルの配置ができないため、地図
が主題としている内容は凡例への記述が便利です
•
HTMLで記述します
HTMLと {{{ brackets}}} で記述

11. レイヤ
= ポイント・レイヤ
= ライン・レイヤ
= ポリゴン・レイヤ
アイコンをドラッグすると、
レイヤの上下を変更できます

12. レイヤ
データテーブル表示
データ範囲へズーム
表示/非表示の切替
参照ファイル変更
レイヤの削除

13. 3. 新規プロジェクト作成
プロジェクトタブから “New Project” を選択します。
適宜情報を記入したら ”Add” をクリック。
filenameとnameは同一でも可

14. プロジェクトの対象範囲とズームレベルを調整

15. プロジェクトが新規作成されます

16. 5. レイヤの追加
• TileMillで追加可能なデータレイヤ
CSV, Shapefile
GeoJSON
GeoTIFF
KML
PostGIS, SQLiteデータベース
Step 1:
Layers ボタンをクリックし、
”Add layer”を選択

17. I. Shapefilesの追加
Step 2:
.shpを選択
(.shp, .dbf, .shx, .prj が必要)
Step 3:
Save & Style で
表示が行われます

18. II. SQLite データベース/ファイルの追加
Step 2:
ファイル選択
Step 3:
クエリを記述
クエリ記法:
SELECT OGC_FID,
GEOMETRY, _______
FROM _______

19. III. PostGIS OSMデータベースの追加
Step 2:
接続先追加
host=localhost
dbname=osm
user=postgres
password= *****
Step 3:
テーブル追加
planet_osm_roads,
planet_osm_points,
planet_osm_buildings
Step 4:
投影法(SRS)を
WGS84に変更

20. 6.データへのスタイル設定
•
•
CartoCSSによるスタイル定義
•
特定のポイント、ウェイ、ポリゴンなどに対する設定
•
•
•
colors(色調)
opacity(透過度)
size/width(サイズ/表示幅)
まずはレイヤ識別子を追加します: #layer { }
•
ブラケットの中に要素を記述
•
line-color: #FFF あるいは line-width: 0.5 のように記述
#planetosmroads {
line-width:1;
line-color:#861;}

21. 6.データへのスタイル設定
• 注意点
•
•
•
ブラケット {} は必ず一対で閉じます
それぞれの要素は行末に ; が記載されている必要があります
スペース、インデントによる動作影響はありません
#planetosmroads {
line-width:1;
line-color:#861;}

22. ポイント/マーカーレイヤ
•
マーカー表示変更 (色調、サイズ、透過度)
•
ラベル追加
•
アイコン追加
ラインレイヤ
•
ライン表示変更 (色調、サイズ、透過度)
•
ラベル追加
•
ライン内側の塗りつぶし指定
•
シールド(道路標識など)の追加
ポリゴンレイヤ
•
ポリゴン表示変更 (色調、サイズ、透過度)
•
ラベル追加
•
ポリゴン内側の塗りつぶし指定
•
建物やラスタレイヤの表示変更

23. ラインとポリゴンを一緒のレイヤにすると
塗りつぶしをしたときに破滅します

24. CartoCSS読解

25. CartoCSS読解
#land[zoom>=0]{
polygon-fill: #df8cf9;
polygon-gamma:0.7;
}
ポリゴンの色を紫(#df8cf9)に変更
ポリゴンのエッジを滑らかにする

26. CartoCSS読解
#cities {
marker-fill: orange;
marker-height: 10;
marker-line-opacity: 0;
}
ポイントの色はオレンジ
ポイントの縦幅 10px
ポイントのアウトラインを非表示

27. CartoCSS読解
#international_boundaries[zoom>1]{
line-color: #030000;
line-dasharray:1, 1;
line-width: 0.5;
[zoom=4] { line-width:0.6; }
[zoom=5] { line-width:0.8; }
[zoom=6] { line-width:1; }
[zoom=7] { line-width:1.2; }
[zoom=8] { line-width:1.4; }
[zoom>8] { line-width:1.6; }
}
Zoom 1より多い場合に表示
ラインの色は黒 (#030000)
ラインを破線表示 (1px表示, 1px非表示)
ラインの幅は0.5px
Zoom 4では、ラインの幅を0.6pxで表示
Zoom 5では、ラインの幅を0.8pxで表示
Zoom 6では、ラインの幅を1pxで表示
...etc

28. 色調指定: RGB
0
0
0
R
B
G
G
255
255
255
Choose your own color scheme:
http://www.youthedesigner.com/2011/04/05/20-color-scheme-generators-for-web-and-graphic-designers/

29. RGB 色調一覧
その他色調の指定例: http://0to255.com/

30. カラーコード
http://www.mikesclark.com/
web_management/html_colors.html

31. CartoCSSでの色指定
1. 変数による色指定
@base:#FFF ;
2. カラーコードの変更
#FFF
を
#2fabf9
へ
3. Save をクリック
変数 @base 指定箇所
の色が変更されます

32. 白(#FFF)から青(#2fabf9)に変更

33. ラベル
• フォントの text-face-name: と text-name: を指定
• 詳細はCartoCSSガイドを参照

34. 日本語フォントの text-face-name:
• 一部はメモがあります
•
http://qiita.com/nyampire/items/25f9effbef1b2a498c5e
Sawarabi Gothic Medium
Sazanami Gothic Gothic-Regular
TakaoExGothic Regular
TakaoExMincho Regular
TakaoGothic Regular
TakaoMincho Regular
TakaoPGothic Regular
TakaoPMincho Regular
VL Gothic regular
VL PGothic regular
mikachan Regular
mikachan-P Regular
mikachan-PB Regular
mikachan-PS Regular
mikachan-puchi Regular

35. その他Tips
• ラベルだけのレイヤ(例えば #country-labels)を作っておくと、
制御が楽になります

36. Tips: 地物描画の順番
•レイヤが上位のものが、前面に描画されます
•同じレイヤの中では、CartoCSSで後に書いた定義が有効になります
•同じ定義に対して2回以上の描画を行う場合、レイヤ識別子に :: を追加
•ケーシング処理など
#highway::blur {
line-width: 3px;
line:color: blue;
line-opacity: .50;
line-gamma:4;
}
#highway::basic {
line-width:1px;
line-color: black;
}

37. Class指定について
•レイヤ設定から指定が可能
•複数のレイヤにまたがったスタイル定義が可能
•例: river, water_areaという2つのレイヤに class.water を割り振る
•.water を指定して記述 -> 1回の記述で2つのレイヤに定義可能
•既定の色や、道路幅を指定する際に便利

38. 7. 画像エクスポート
Exportボタンをクリックすると、出力可能な
形式が一覧で表示されます。
PNG(画像形式)をクリックしてください。
設定を調整してExportを押すと、
作成した地図がPNG形式で出力さ
れます。
数秒ほど処理を待った後、
Save をクリックして画像を
保存してください。

39. やってみましょう！
Go Design Beautiful Maps

40. 配布するファイル
• TileMill_Binaryフォルダ
•
Mac版
•
Windows版
• OSM_DATA
•
Tokyo-Shape: OSMのTokyoエリアダンプ
• Samples: 今回は利用しません
• DOCS: HOTのTileMillドキュメント(日本語訳つき)

41. 進
、どうですか？
How is the progress?

42. 追補: CartoCSSの定義分類

43. 追補: Mapnik Symbolizer
•
TileMillはMapnikの機能をベースにしています
•
文法の詳細を知る場合、MapnikのSymbolizer定義が参考になります
https://github.com/mapnik/mapnik/wiki/SymbologySupport#symbolizers

44. 追補: アイコンの追加

45. 手順
•TileMillのフォルダに画像用フォルダを作成
•CSS内のリンクで画像フォルダを指定
例:
marker-file: url(images/hospital.png)
marker-file: url(images/school.png)
marker-file: url(images/mosque.png)
2byte文字は使わないでください

46. 追補. ラスターレイヤ
•
•
•
背景図として、ラスタレイヤを追加することも可能です
重ね合わせの際の混乱を少なくするため、ラスタレイヤの透過度を微調整します
もちろん、レイヤの重ね合わせの順番を変更することもできます

48. ラスタ画像はShapefileと同じ手順で追加します

49. おつかれさまでした！
Thank you!