2009年10月6日火曜日

OpenLayers で東京都の地図表示 9 Google Pisca ウェッブアルバム の GeoRSS の表示

Google のサービスを使って画像を地図上に表示してみました。

1 Google Pisca ウェッブアルバムにログインします。

2 画像のないときはアップロードします。
2-1 「アップロード」ボタンをクリックします。
2-2 「新規アルバムを作成」リンクをクリックします。
2-3 「タイトル」を入力します。
「マップで場所を表示」は後で設定します。
「共有 マイギャラリーで」は「一般公開」にします。
「続行」ボタンをクリックします。
2-4 「アップロードする写真を選択」で「参照」ボタンをクリックして画像を選択します。
「アップロードを開始」ボタンをクリックしてアップロードします。

3 アルバムマップを作成します。
(位置情報がある画像は自動的に配置されるので確かめてみてください。)
3-1 「編集」をクリックして「アルバム マップ」をクリックします。
3-2 「場所を検索」に位置を入力して実行します。
3-3 サムネイルを選択し、マップをクリックして配置するか、サムネイルをマップ上にドラッグ アンド ドロップします。
3-4 「完了」ボタンをクリックします。
3-5 「アルバム表示に戻る」をクリックします。
3-6 RSS ボタンをクリックします。(アルバム表示右下)
3-7 URL をコピーします。

4 Google Pisca ウェッブアルバムの RSS を読み込むには、tokyo_bmi_pgis_img03.html に次のコードを追加します。

---
// ここから追加
var rsslayerURL2 = "http://picasaweb.google.com/data/feed/base/user/[user_id]/albumid/5264350151050308177?alt=rss&kind=photo&hl=ja";
var rssLayer2 = new OpenLayers.Layer.GeoRSS("Nishi Tachikawa", rsslayerURL2, {
visibility: false,
projection: new OpenLayers.Projection("EPSG:4326")
});
map.addLayer(rssLayer2);
// ここまで

map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl(new OpenLayers.Control.MousePosition());
map.addControl(new OpenLayers.Control.ScaleLine());
---

/usr/lib/cgi-bin/proxy.cgi を開いて次のように allowedHosts に
'picasaweb.google.com', 'picasaweb.google.co.jp' を追加します。
(ドメインが2つ [.com, .co.jp] あるので念のため両方追加してください。)

---
allowedHosts = ['www.openlayers.org', 'openlayers.org',
'labs.metacarta.com', 'world.freemap.in',
'prototype.openmnnd.org', 'geo.openplans.org',
'sigma.openplans.org', 'demo.opengeo.org',
'www.openstreetmap.org', 'sample.avencia.com',
'maps.google.co.jp', 'picasaweb.google.com',
'picasaweb.google.co.jp']
---

0 件のコメント: