Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
TileMill基礎編
Designing Beautiful Maps
original instruction docs by HOT

https://github.com/hotosm/learnosm/wiki/English-Tea...
概要
1. TileMillとは
2. 画面表示 (表示/編集インターフェース)
3. 新規プロジェクト作成
4. レイヤーの追加 (Shapefiles, SQLite & PostGIS)
5. スタイリング (Colors RGB & Ca...
1. TileMillとは
TileMillとは:
地図表現を簡単にデザインするオフラインエディタ

利用可能なデータ形式:
CSV, Shapefile
GeoJSON, GeoTIFF
PostGIS, SQLite Database

スタ...
1. TileMillとは
よいところ
設定がテキストである
設定コピー、再利用が容易
データ形式(カラム名など)変更時にも対処容易

処理が早い
データ表示に特化しているため、高速

多様な出力データ形式
MBTile、PDF、PNGなど
O...
2. TileMillインターフェース
主題図の作成が簡単です
2. TileMill インターフェース
2. TileMill インターフェース

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

CartoCSSディレクトリ
ツールTIP: 凡例, テーザー/ポップアップ, URL指定

テーザー(Teaser)
クリック(Full)

•

対象地物にマウス載せた時の処理

•
•
•

ポップアップ、Teaser
クリック、Full
レイヤ内のデータを情報として...
レイヤ
= ポイント・レイヤ
= ライン・レイヤ
= ポリゴン・レイヤ

アイコンをドラッグすると、
レイヤの上下を変更できます
レイヤ

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

レイヤの削除
3. 新規プロジェクト作成
プロジェクトタブから “New Project” を選択します。
適宜情報を記入したら ”Add” をクリック。

filenameとnameは同一でも可
プロジェクトの対象範囲とズームレベルを調整
プロジェクトが新規作成されます
5. レイヤの追加
• TileMillで追加可能なデータレイヤ
CSV, Shapefile
GeoJSON
GeoTIFF
KML
PostGIS, SQLiteデータベース

Step 1:

Layers ボタンをクリックし、

”Add...
I. Shapefilesの追加
Step 2:

.shpを選択

(.shp, .dbf, .shx, .prj が必要)

Step 3:

Save & Style で
表示が行われます
II. SQLite データベース/ファイルの追加

Step 2:

ファイル選択

Step 3:

クエリを記述

クエリ記法:

SELECT OGC_FID,
GEOMETRY, _______
FROM _______
III. PostGIS OSMデータベースの追加
Step 2:

接続先追加

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

Step 3:

テーブル追加

planet...
6.データへのスタイル設定
•

•

CartoCSSによるスタイル定義

•

特定のポイント、ウェイ、ポリゴンなどに対する設定

•
•
•

colors(色調)
opacity(透過度)
size/width(サイズ/表示幅)

まず...
6.データへのスタイル設定

• 注意点
•
•
•

ブラケット {} は必ず一対で閉じます
それぞれの要素は行末に ; が記載されている必要があります
スペース、インデントによる動作影響はありません
#planetosmroads {
li...
ポイント/マーカーレイヤ
•

マーカー表示変更 (色調、サイズ、透過度)

•

ラベル追加

•

アイコン追加

ラインレイヤ
•

ライン表示変更 (色調、サイズ、透過度)

•

ラベル追加

•

ライン内側の塗りつぶし指定

•
...
ラインとポリゴンを一緒のレイヤにすると
塗りつぶしをしたときに破滅します
CartoCSS読解
CartoCSS読解
#land[zoom>=0]{
polygon-fill: #df8cf9;
polygon-gamma:0.7;
}
ポリゴンの色を紫(#df8cf9)に変更
ポリゴンのエッジを滑らかにする
CartoCSS読解
#cities {
marker-fill: orange;
marker-height: 10;
marker-line-opacity: 0;
}
ポイントの色はオレンジ
ポイントの縦幅 10px
ポイントのアウトライ...
CartoCSS読解
#international_boundaries[zoom>1]{
line-color: #030000;
line-dasharray:1, 1;
line-width: 0.5;
[zoom=4] { line-w...
色調指定: 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...
RGB 色調一覧

その他色調の指定例: http://0to255.com/
カラーコード

http://www.mikesclark.com/
web_management/html_colors.html
CartoCSSでの色指定
1. 変数による色指定
@base:#FFF ;

2. カラーコードの変更
#FFF

を

#2fabf9

へ

3. Save をクリック
変数 @base 指定箇所
の色が変更されます
白(#FFF)から青(#2fabf9)に変更
ラベル
• フォントの text-face-name: と text-name: を指定
• 詳細はCartoCSSガイドを参照
日本語フォントの text-face-name:
• 一部はメモがあります
•

http://qiita.com/nyampire/items/25f9effbef1b2a498c5e
Sawarabi Gothic Medium
Sazan...
その他Tips
• ラベルだけのレイヤ(例えば #country-labels)を作っておくと、

制御が楽になります
Tips: 地物描画の順番
•レイヤが上位のものが、前面に描画されます
•同じレイヤの中では、CartoCSSで後に書いた定義が有効になります
•同じ定義に対して2回以上の描画を行う場合、レイヤ識別子に :: を追加
•ケーシング処理など
#h...
Class指定について
•レイヤ設定から指定が可能
•複数のレイヤにまたがったスタイル定義が可能
•例: river, water_areaという2つのレイヤに class.water を割り振る
•.water を指定して記述 -> 1回の記...
7. 画像エクスポート
Exportボタンをクリックすると、出力可能な
形式が一覧で表示されます。
PNG(画像形式)をクリックしてください。
設定を調整してExportを押すと、
作成した地図がPNG形式で出力さ
れます。
数秒ほど処理を待っ...
やってみましょう!

Go Design Beautiful Maps
配布するファイル
• TileMill_Binaryフォルダ
•

Mac版

•

Windows版

• OSM_DATA
•

Tokyo-Shape: OSMのTokyoエリアダンプ

• Samples: 今回は利用しません
• DO...
進

、どうですか?

How is the progress?
追補: CartoCSSの定義分類
追補: Mapnik Symbolizer
•

TileMillはMapnikの機能をベースにしています

•

文法の詳細を知る場合、MapnikのSymbolizer定義が参考になります

https://github.com/mapni...
追補: アイコンの追加
手順
•TileMillのフォルダに画像用フォルダを作成
•CSS内のリンクで画像フォルダを指定
例:
marker-file: url(images/hospital.png)
marker-file: url(images/school.png...
追補. ラスターレイヤ
•
•
•

背景図として、ラスタレイヤを追加することも可能です
重ね合わせの際の混乱を少なくするため、ラスタレイヤの透過度を微調整します
もちろん、レイヤの重ね合わせの順番を変更することもできます
ラスタ画像はShapefileと同じ手順で追加します
おつかれさまでした!

Thank you!
FOSS4G_Tokyo_2013_ハンズオン_TileMill基礎編
Upcoming SlideShare
Loading in …5
×

FOSS4G_Tokyo_2013_ハンズオン_TileMill基礎編

4,133 views

Published on

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/

  • Be the first to comment

FOSS4G_Tokyo_2013_ハンズオン_TileMill基礎編

  1. 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. 2. 概要 1. TileMillとは 2. 画面表示 (表示/編集インターフェース) 3. 新規プロジェクト作成 4. レイヤーの追加 (Shapefiles, SQLite & PostGIS) 5. スタイリング (Colors RGB & CartoCSSの基礎) 6. エクスポート
  3. 3. 1. TileMillとは TileMillとは: 地図表現を簡単にデザインするオフラインエディタ 利用可能なデータ形式: CSV, Shapefile GeoJSON, GeoTIFF PostGIS, SQLite Database スタイル定義: CartoCSS データエクスポート形式: タイル、画像などなど
  4. 4. 1. TileMillとは よいところ 設定がテキストである 設定コピー、再利用が容易 データ形式(カラム名など)変更時にも対処容易 処理が早い データ表示に特化しているため、高速 多様な出力データ形式 MBTile、PDF、PNGなど OSMに特化せずとも利用可能
  5. 5. 2. TileMillインターフェース
  6. 6. 主題図の作成が簡単です
  7. 7. 2. TileMill インターフェース
  8. 8. 2. TileMill インターフェース ツールTIP: 凡例(Legend), テーザー/ポップアップ, URL指定 フォントディレクトリ CartoCSS ディレクトリ レイヤー
  9. 9. フォントディレクトリ CartoCSSディレクトリ
  10. 10. ツールTIP: 凡例, テーザー/ポップアップ, URL指定 テーザー(Teaser) クリック(Full) • 対象地物にマウス載せた時の処理 • • • ポップアップ、Teaser クリック、Full レイヤ内のデータを情報としてポ ップアップします • 凡例(Legend) • • 地図上のシンボルについての説明 地図上にはタイトルの配置ができないため、地図 が主題としている内容は凡例への記述が便利です • HTMLで記述します HTMLと {{{ brackets}}} で記述
  11. 11. レイヤ = ポイント・レイヤ = ライン・レイヤ = ポリゴン・レイヤ アイコンをドラッグすると、 レイヤの上下を変更できます
  12. 12. レイヤ データテーブル表示 データ範囲へズーム 表示/非表示の切替 参照ファイル変更 レイヤの削除
  13. 13. 3. 新規プロジェクト作成 プロジェクトタブから “New Project” を選択します。 適宜情報を記入したら ”Add” をクリック。 filenameとnameは同一でも可
  14. 14. プロジェクトの対象範囲とズームレベルを調整
  15. 15. プロジェクトが新規作成されます
  16. 16. 5. レイヤの追加 • TileMillで追加可能なデータレイヤ CSV, Shapefile GeoJSON GeoTIFF KML PostGIS, SQLiteデータベース Step 1: Layers ボタンをクリックし、 ”Add layer”を選択
  17. 17. I. Shapefilesの追加 Step 2: .shpを選択 (.shp, .dbf, .shx, .prj が必要) Step 3: Save & Style で 表示が行われます
  18. 18. II. SQLite データベース/ファイルの追加 Step 2: ファイル選択 Step 3: クエリを記述 クエリ記法: SELECT OGC_FID, GEOMETRY, _______ FROM _______
  19. 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. 20. 6.データへのスタイル設定 • • CartoCSSによるスタイル定義 • 特定のポイント、ウェイ、ポリゴンなどに対する設定 • • • colors(色調) opacity(透過度) size/width(サイズ/表示幅) まずはレイヤ識別子を追加します: #layer { } • ブラケットの中に要素を記述 • line-color: #FFF あるいは line-width: 0.5 のように記述 #planetosmroads { line-width:1; line-color:#861;}
  21. 21. 6.データへのスタイル設定 • 注意点 • • • ブラケット {} は必ず一対で閉じます それぞれの要素は行末に ; が記載されている必要があります スペース、インデントによる動作影響はありません #planetosmroads { line-width:1; line-color:#861;}
  22. 22. ポイント/マーカーレイヤ • マーカー表示変更 (色調、サイズ、透過度) • ラベル追加 • アイコン追加 ラインレイヤ • ライン表示変更 (色調、サイズ、透過度) • ラベル追加 • ライン内側の塗りつぶし指定 • シールド(道路標識など)の追加 ポリゴンレイヤ • ポリゴン表示変更 (色調、サイズ、透過度) • ラベル追加 • ポリゴン内側の塗りつぶし指定 • 建物やラスタレイヤの表示変更
  23. 23. ラインとポリゴンを一緒のレイヤにすると 塗りつぶしをしたときに破滅します
  24. 24. CartoCSS読解
  25. 25. CartoCSS読解 #land[zoom>=0]{ polygon-fill: #df8cf9; polygon-gamma:0.7; } ポリゴンの色を紫(#df8cf9)に変更 ポリゴンのエッジを滑らかにする
  26. 26. CartoCSS読解 #cities { marker-fill: orange; marker-height: 10; marker-line-opacity: 0; } ポイントの色はオレンジ ポイントの縦幅 10px ポイントのアウトラインを非表示
  27. 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. 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. 29. RGB 色調一覧 その他色調の指定例: http://0to255.com/
  30. 30. カラーコード http://www.mikesclark.com/ web_management/html_colors.html
  31. 31. CartoCSSでの色指定 1. 変数による色指定 @base:#FFF ; 2. カラーコードの変更 #FFF を #2fabf9 へ 3. Save をクリック 変数 @base 指定箇所 の色が変更されます
  32. 32. 白(#FFF)から青(#2fabf9)に変更
  33. 33. ラベル • フォントの text-face-name: と text-name: を指定 • 詳細はCartoCSSガイドを参照
  34. 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. 35. その他Tips • ラベルだけのレイヤ(例えば #country-labels)を作っておくと、 制御が楽になります
  36. 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. 37. Class指定について •レイヤ設定から指定が可能 •複数のレイヤにまたがったスタイル定義が可能 •例: river, water_areaという2つのレイヤに class.water を割り振る •.water を指定して記述 -> 1回の記述で2つのレイヤに定義可能 •既定の色や、道路幅を指定する際に便利
  38. 38. 7. 画像エクスポート Exportボタンをクリックすると、出力可能な 形式が一覧で表示されます。 PNG(画像形式)をクリックしてください。 設定を調整してExportを押すと、 作成した地図がPNG形式で出力さ れます。 数秒ほど処理を待った後、 Save   をクリックして画像を 保存してください。
  39. 39. やってみましょう! Go Design Beautiful Maps
  40. 40. 配布するファイル • TileMill_Binaryフォルダ • Mac版 • Windows版 • OSM_DATA • Tokyo-Shape: OSMのTokyoエリアダンプ • Samples: 今回は利用しません • DOCS: HOTのTileMillドキュメント(日本語訳つき)
  41. 41. 進 、どうですか? How is the progress?
  42. 42. 追補: CartoCSSの定義分類
  43. 43. 追補: Mapnik Symbolizer • TileMillはMapnikの機能をベースにしています • 文法の詳細を知る場合、MapnikのSymbolizer定義が参考になります https://github.com/mapnik/mapnik/wiki/SymbologySupport#symbolizers
  44. 44. 追補: アイコンの追加
  45. 45. 手順 •TileMillのフォルダに画像用フォルダを作成 •CSS内のリンクで画像フォルダを指定 例: marker-file: url(images/hospital.png) marker-file: url(images/school.png) marker-file: url(images/mosque.png) 2byte文字は使わないでください
  46. 46. 追補. ラスターレイヤ • • • 背景図として、ラスタレイヤを追加することも可能です 重ね合わせの際の混乱を少なくするため、ラスタレイヤの透過度を微調整します もちろん、レイヤの重ね合わせの順番を変更することもできます
  47. 47. ラスタ画像はShapefileと同じ手順で追加します
  48. 48. おつかれさまでした! Thank you!

×