地図を仕上げてウェブサイトへサイトへ埋め込む

思い通りの地図が出来上がったら、次はその地図を公開するように仕上げます。そのためには、地図の名前を変更したり、地図の説明をくわたり、情報ウィンドウをカスタマイズしたりします。その上で、地図を友達や仕事仲間と共有したり、ブログに貼り付けたりして公開します。このチュートリアルでは、データのインポートから順番に手順を解説しますが、もし皆さんがすでにビジュアリゼーションを作成し、公開する方法だけを知りたいのであれば、このチュートリアルの「地図の公開」から読み始めてください。

チュートリアルデータの読み込み

チュートリアルデータとして、世界の主要都市の点データを、データライブラリから読み込みます。そのためにはまず、図1の様にデータセットリスト画面を表示させ(①)、「Search」テキストボックスに「populated places」と入力し(②)、絞り込み表示された「Populated places」データセット名をクリックして(③)、表示されるメニューから「Connect Dataset」をクリックしてデータセットをインポートします。

tutorial036

図1.  チュートリアル用データセットのインポート

しばらくしてデータのインポートが終わると、データセットがテーブル表示されます。ここでデータセットの名前を確認すると「ne_10m_populated_places_simple」というような名前になっていると思います。

データセット名の変更

データセット名は、これから作業して作成する地図や、将来的に作成するかもしれないウェブアプリケーションからデータを呼び出す際の指定に使われるので、あとから変更しないように、インポートした時点でわかり易い名前にしておくことが重要です。地図を作成したあとでデータセット名を変更すると、データへのリンクが切れ、地図が削除されてしまいます。

「ne_10m_populated_places_simple」となっているデータセットの名前をクリックして、「Populated places points」に変更してみてください(図2)。

tutorial037

図2. データセット名の変更と変更後の名前.変更後の名前は、英数半角とスペースは全てアンダースコアで置き換えられる.テーブル名に日本語は使えない.

変更後の名前が指定したものと違うことに皆さんは気づかれると思います。CartoDBでは、テーブル名は全て小文字英数半角でなければならず、スペースはアンダースコアで置き換えられます。特殊な文字もアンダースコアで置き換えられます。ちなみに、漢字、ひらがな、カタカナはテーブル名には使えません。

メタデータの編集

インポートしたデータに関する記述を残しておくことは、後からデータを管理する上でとても便利なので、メタデータを記述する癖をできるだけ付けておきましょう。メタデータの編集は、データセット名の下にある、「Edit metadata…」をクリックして始めます。「Description」には、データの内容、出典などに関する記述をしますが、日本語が使えます。「Tags」には、データセットをわかりやすく整理するための単語を入力しますが、日本語も使えます。ここでは「Description」に「世界の主要な都市を点として表したデータです。」、「Tags」に「points」、「cities」を入力します(図3)。編集したメタデータの内容は、データセットリストを表示させた際に表示されます(図4)。ちなみに、タグの1つをクリックすると、同じタグを持つデータセットだけがリストに表示されるようになります。

tutorial038

図3. インポートしたデータセットのメタデータの編集

tutorial039

図4. 編集したメタデータの内容はデータセットリストに表示される

ポップアップ情報ウィンドウの設定

インポートしたPopulated placesを地図ビュー表示させてみてください。地図ビューでは、データの見た目を様々な設定を通して調整することができます。表示されているデータポイントをクリックしてみてください。すると、情報ウィンドウが表示され、まだ表示するデータの内容が設定されていないというメッセージとともに、表示するデータ列の選択のための「Select fields」というリンク、データのID番号、3つのアイコンも表示されます(図5)。ちなみに、それらのアイコンをクリックすると、その点の属性データの編集、ジオメトリの編集、点の削除、などが行えます。

tutorial040

図5. ポップアップ情報ウィンドウ

次に表示された情報ウィンドウから「Select fields」をクリックしてください(図5)。すると画面右に隠れていたサイドバーが展開され、情報ウィンドウに表示するデータ列を選択するためのパネルが表示されます(図6)。このパネルから「name」と「pop_max」のスイッチをスライドして情報ウィンドウに属性値が表示されるようにします。この際に、スライドスイッチの横にある「title?」チェックボックスをチェックしておくと、情報ウィンドウに属性値のフィールド名が同時に表示されます。

tutorial041

図6. 情報ウィンドウの表示内容設定

背景地図の設定

背景地図は、データを視覚化する際の重要な設定項目です。CartoDBではデフォルトで様々な背景地図を選択できるようになっています。また、独自の背景図を利用することもできるようになっています。ここでは、予め用意されている背景地図から「Toner」を選択します。地図ビュー画面の左上にある「Basemap」をクリックして、「Toner」を選択してください(図7)。

tutorial042

図7. 背景地図の選択

地図のビジュアリゼーション

地図を公開したり、特定の人と共有したい場合は、地図を「ビジュアリゼーション」する必要があります。地図からビジュアリゼーションを作成することで、既に設定したスタイルや背景図、フィルターなどの設定が保存され、公開のための準備が行えます。また、ビジュアリゼーションでは、難しいコードやSQLステートメントを書かなくても、他の複数のデータセットの地図レイヤを重ねあわせることができます。同一のデータセットから、複数のビジュアリゼーションを作成することもできます。地図ビューに表示されている地図からビジュアリゼーションを作成するには、画面右上の「VISUALIZE」ボタンをクリックします(図8)。

tutorial043

図8. 背景地図を「Toner」にした例.地図からビジュアリゼーションを作成するには、画面右上の「VISUALIZE」ボタンをクリックする.

次に現れるダイアログでは、ビジュアリゼーションの作成をしてよいか確認してくるので、緑色の「OK, CREATE MAP」をクリックしてビジュアリゼーションを作成します(図9)。

tutorial044
図9. ビジュアリゼーション作成の確認ダイアログ

作成したビジュアリゼーションは、これまで見てきたテーブルビューや地図ビューとほぼおなじ様な画面ですが、地図を公開するための様々なアイテムが加えらています(図10)。また、地図に太い枠線が加えられ、表示されているのがビジュアリゼーションであることを強調します。画面右上には、地図を共有したり、一般公開するための「PUBLISH」ボタンが表示されます。一旦ビジュアル化された地図は、地図リストに表示されるようになります。そのため、作成した地図を整理しやすくするように、この時点でデータビューで行ったのと同様に、メタデータを編集し、地図名と地図に関する記述、タグなどを入力してください。

tutorial045

図10. ビジュアリゼーション後の地図の操作画面

地図の公開

この時点で、作成した地図は公開することができます。ビジュアル化した地図には、地図タイトルを加えたり、他のレイヤを重ねたりすることもできますが、ここでは今の状態で地図を公開してみます。地図を公開するためには、作成したビジュアリゼーションのプライバシー設定が、「Public」か、「With link」に設定されている必要があります。ビジュアリゼーションのタイトルの左側にある南京錠アイコンをクリックして、プライバシーの設定を確認して下さい。プライバシーの設定を確認した上で、ビジュアリゼーション画面右上の「PUBLISH」ボタンをクリックします(図10)。すると、作成した地図を利用するための3つの選択肢がダイアログで表示されます(図11)。

tutorial046

図11. 地図公開のためのダイアログ

図11一番左の「Get the link」は、ウェブ上で地図を共有するための一番簡単な方法で、表示されているアドレスをメールやテキスト、インスタントメッセンジャー等で共有すると、簡単に作成した地図を共有することができます。共有された地図は、ズームしたり上下左右に移動したりすることはできますが、既に設定した地図内容の変更はできないようになっています(図12)。また、共有された地図のページをスクロールダウンすると、地図の名前、地図作成者が公開している他の地図、地図へのコメントを残すためのテキストボックスなどもあります(図12)。

tutorial047

図12. 「Get the link」により共有された地図が表示されるページの例.ページをスクロールすると、地図タイトル、地図へのコメント用テキストボックス、同じ作者の地図サンプルなどが表示されている.

ブログやウェブサイトへの地図の貼り付け

もしみなさんが、地図をブログやウェブサイトに貼り付けたいならば、図12のダイアログにある、真ん中の「Embed it」をクリックしてください。HTMLのタグである<iframe>で囲まれた短いコードを皆さんのブログやウェブサイトにHTMLコードとして貼り付ければ、それだけで地図を埋め込むことができます(図13)。ちなみに、図12のダイアログの一番右は、CartoDB.jsを使ったウェブアプリケーションを作成する際などに使うURLです。

tutorial048

図13. ワードプレスのページに地図を埋め込んだ例

以上で、データセットのインポートから、地図の作成、ビジュアリゼーションの作成、地図の公開までの一連の流れをたどってみました。CartoDBでは、ここで紹介した以外の様々な地図のオプションやデータの操作方法がありますが、主な作業の流れはほぼ同じです。地図作成と公開の方法に慣れて、是非みなさんも魅力的な地図を多くの人と共有してください。