CartoDB で案内図をつくろう with 地理院地図


## CartoDB ?
CartoDB は ブラウザで操作できる地理情報可視化ツールです。
この CartoDB を使って、会社やお店の位置を伝えるための、簡単な案内図をつくってみます。

## CartoDB の始め方
### ユーザ登録

[CartoDB](https://cartodb.com/) のページで、ユーザ登録します。お試し用のフリープラン[^1]を使いましょう。
SIGN UP で ユーザ名、メールアドレス、パスワードを入力して登録し、ログインします。

## Map の作成
右上の黄緑色の NEW MAP をクリックすると、データを追加する Add datasets 画面になります。

<img width="90%" alt="01_arw.png" src="https://qiita-image-store.s3.amazonaws.com/0/104969/a433a09e-4942-d9b4-f0e6-30a633a16fcf.png">

Connect dataset ボタンで、ローカルやクラウドストレージにあるファイルを追加できます。
今回は、右上の Create empty map をクリックし、データを追加せず空の Map を作成しましょう。

<img width="90%" alt="02.png" src="https://qiita-image-store.s3.amazonaws.com/0/104969/5ead8690-3cee-8e9b-4348-ba4813c9fe51.png">

すると、Start by adding points, lines or polygons. というページが表示されます。
ここで作りたい地図データのタイプを選んで始めてもいいですが、今回はとりあえず 下の SKIP をクリックして進みます。

<img width="90%" alt="03.png" src="https://qiita-image-store.s3.amazonaws.com/0/104969/9a4df8af-3dea-8fe2-a2e2-f71917ab3095.png">

すると背景が世界地図の MAP VIEW 画面が表示されました。

## ポイントデータを作成する
### 検索機能
今回は、東京の丸の内にあるオフィスの位置を伝える案内図をつくります。
世界地図の中からその位置にたどり着くのは大変なので、右上の検索バーに「marunouchi」と入力して Enter を押して検索します[^2]。

<img width="90%" alt="04.png" src="https://qiita-image-store.s3.amazonaws.com/0/104969/c4281945-3246-328a-f5aa-09106be99eca.png">

すると、丸の内がズームされました。
左上の ＋ をクリックしさらにズームしながら、該当の場所を探してください。

<img width="90%" alt="05.png" src="https://qiita-image-store.s3.amazonaws.com/0/104969/c75b0143-8f25-5ae7-b27a-58c87fd98ae6.png">

検索したときの marunouchi のふきだしは、ふきだしの右上の × をクリックすると消えます。

### ポイントの追加
ポイントを落としたい場所が見つかったら、右下の add feature ボタンをクリックしてください。

<img width="95%" alt="06.png" src="https://qiita-image-store.s3.amazonaws.com/0/104969/a00b11f3-45b2-ac66-0088-ad6679ae51a6.png">

そして、該当の場所をぽちっとクリックします。

<img width="90%" alt="07.png" src="https://qiita-image-store.s3.amazonaws.com/0/104969/40e1a973-00c9-adbd-923d-5801589dad86.png">

この位置でよければ done を、やり直したい場合は discard をクリックします。

<img width="90%" alt="08.png" src="https://qiita-image-store.s3.amazonaws.com/0/104969/4121efb1-9bc0-203b-0dcf-77bedbfeb13a.png">

done をクリックすると、ポイントが保存されます。

### ポイントのアイコンを変える
会社・お店の位置のポイントが ただの丸 だと少しつまらないので、アイコンを変えてみましょう。
見た目の編集をするときは、右の wizards のアイコンをクリックします。

<img width="90%" alt="09.png" src="https://qiita-image-store.s3.amazonaws.com/0/104969/9a0f3054-a9f5-270a-94d0-ca2232e80442.png">

次に、IMG と書かれたボタンをクリックします。

<img width="90%" alt="10.png" src="https://qiita-image-store.s3.amazonaws.com/0/104969/ed98712a-b1f1-215a-d50a-c0bf36c8bd4a.png">

好きなアイコンを選び、右下の SET IMAGE をクリックします。

<img width="90%" alt="11.png" src="https://qiita-image-store.s3.amazonaws.com/0/104969/68423f01-eead-dc72-6278-5500617483ae.png">

すると、アイコンを変更できました。
その左のアイコンの大きさも 30 くらいに増やし、大きくします。

<img width="90%" alt="12.png" src="https://qiita-image-store.s3.amazonaws.com/0/104969/c2d61107-ac0a-9333-14e7-c8ff4178bf9f.png">

## 背景図を変更する

背景図も変更することが可能です。
左下の Change basemap をクリックすると、いろいろな背景図が選べます。

<img width="90%" alt="13.png" src="https://qiita-image-store.s3.amazonaws.com/0/104969/24fbf7c6-fac0-f35a-59a6-f273c6893ca9.png">

用意された背景図以外にも、web 上に地図を提供するサービスに接続して、背景図として利用することが可能です。
今回は、国土地理院が提供している地理院地図の淡色地図を使わせていただきます。
Change basemap の中の一番下の Yours をクリックします。

<img width="90%" alt="14.png" src="https://qiita-image-store.s3.amazonaws.com/0/104969/a3c62df5-3827-43b6-d7ac-6c3a91449881.png">

URL を入れる欄に、[このページ](http://maps.gsi.go.jp/development/ichiran.html#pale) に記載されている URL http://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png をコピペして、ADD BASEMAP をクリックします。

<img width="90%" alt="15.png" src="https://qiita-image-store.s3.amazonaws.com/0/104969/c19ddbbf-4820-f37e-314d-3e9b86233197.png">

背景図が地理院地図になりました。

<img width="90%" alt="17.png" src="https://qiita-image-store.s3.amazonaws.com/0/104969/9ed2c842-92f5-a462-41e5-aa92cfc19111.png">

## 地図を画像として出力する

次に案内図用の画像を出力したいと思います。
上のツールバーの一番右の Export Image をクリックします。

<img width="90%" alt="16.png" src="https://qiita-image-store.s3.amazonaws.com/0/104969/5488daaa-c3af-816d-ff75-3adc3f365b6d.png">

適度に周囲の駅が載るように縮尺や範囲を調整したあと、
下の Export をクリックします。

<img width="90%" alt="18.png" src="https://qiita-image-store.s3.amazonaws.com/0/104969/bce67478-2084-fff3-2c3b-933ed1fbddb5.png">

生成された画像名をクリックして保存してください。

<img width="90%" alt="19.png" src="https://qiita-image-store.s3.amazonaws.com/0/104969/94abd130-d8c3-194e-15b3-b42648dc75df.png">

完成です。

<img width="90%" alt="untitled_map_by_imai_04_20_2016_03_09_19.png" src="https://qiita-image-store.s3.amazonaws.com/0/104969/cf8abdf6-01a9-bda2-bd68-239940642eb9.png">

## 名前をつけて保存

最後に、この MAP に名前をつけて保存します。
初期設定では Untitled map となっているところをクリックして、わかりやすい名称に変更し、Save をクリックして保存します。

<img width="90%" alt="20.png" src="https://qiita-image-store.s3.amazonaws.com/0/104969/e061732c-4762-d631-7e9c-1f63670281e5.png">

ブラウザを閉じても、再び CartoDB にログインすればまた編集することが可能です。

## 参考サイト
- [地図DB](http://chizudb.jp)：CartoDBに関するもっと詳細な情報を掲載しています。

[^1]: データ権限が Public しか選べないので注意
[^2]: まだ日本語非対応なので、ローマ字を使ってください。