littlewing

人間とコンピューターとメディアの接点をデザインするために考えたこと

CartoDB[第2回]水位情報を追加する

CartoDBとオープンデータでお手軽地図マッピングの後編です。

既にお手軽じゃなくなってる気が・・


[STEP6] 河川の水位情報を追加する。

  1. 左上の[戻る矢印アイコン](下図)をクリックしてダッシュボードを表示します。 f:id:pigshape:20160623192424p:plain

  2. Mapsの[▼]をクリックして[Your datasets]を選択します。 f:id:pigshape:20160623192309p:plain

  3. 右上緑色ボタンの[NEW DATASET]を選択して、水位情報のCSVファイル[Shizuoka_WaterLevel_[日付].csv]をドラッグするなどしてアップロードします。


[STEP7]地点情報と水位情報をマージする

  1. 無事に水位情報CSVがアップロードできたら。データを組み合わせます。右側メニューの[marge datasets]をクリックします。 f:id:pigshape:20160623194217p:plain

  2. その後[Column join]をクリックします。 f:id:pigshape:20160623194426p:plain

  3. マージ画面が現れます。水位情報、地点情報ともに[point1]を選択して、組み合わせます。 f:id:pigshape:20160623212710p:plain

  4. マージ後に残すカラムを選択します。今回はそのままで

  5. 新たなマージされたデータセットが作成されました。テーブルの名称は違うかもしれません。 f:id:pigshape:20160623195120p:plain

[STEP8]水位情報をバブル表示

  1. 再度右メニューのwizardから表示方法を調整します。表示スタイルにBUBBLEを選択し、[Column]に[Waterlevel_10min]を選択することで水位に合わせたバブル表示が可能です。

f:id:pigshape:20160623213524p:plain

[STEP9]GoogleMapにリンクを張る(外部リンク)

経路案内をしたい場合などは、やはりGoogleMapが便利です。CartoDBの地図からGoogleMapにリンクを貼ってみます。

GoogleMapにおける緯度・経度を指定したリンクの張り方は

https://maps.google.co.jp/maps?q={緯度},{経度}

となります。このリンク用URLをdatasetに追加します。

  • 右メニューの[SQL]アイコンをクリックします。 f:id:pigshape:20160624100916p:plain

  • Custom SQL Queryの欄の

SELECT *  FROM shizuoka_waterlevel_observationpoint_merge

を、以下に変更してください。

SELECT
   *,
    'https://maps.google.co.jp/maps?q=' || latitude || ',' || longitude || '' as url
FROM
    shizuoka_waterlevel_observationpoint_merge

※[shizuoka_waterlevel_observationpoint_merge]がdatasetの名前です。datasetの名前が違う場合は変更してください。

  • [Apply query]を押すと、datasetに[url]という列が追加されます。 f:id:pigshape:20160624101332p:plain

  • [Map View]に切り替えて、右メニューの[infowindow]を開き、[url]欄のトグルをONにしてください。 f:id:pigshape:20160624101821p:plain

  • これで、地点をクリックしたときに、Google Mapへのリンクが表示されるようになります。 f:id:pigshape:20160624101914p:plain


  • こんな感じになりました。

littlewing.hatenablog.com