ラベル Flickr の投稿を表示しています。 すべての投稿を表示
ラベル Flickr の投稿を表示しています。 すべての投稿を表示

2009年11月5日木曜日

OpenLayers 24b Flickr の画像を表示5 - Cluster Strategy2

Cluster Strategy Example(strategy-cluster.html) を参考に、ポインタを重ねたポイントに登録されている画像を欄外に表示します。
ポイントは画像の数で大きさが変わります。

HTML ファイルを新規作成します。
「openlayersTokyoproj」 を右クリックして 新規 -> HTML ファイル をクリック。
「HTML ファイル」ウィンドウの「ファイル名(任意:openlayers_s_cluster.html)」に入力して「完了」ボタンをクリック。
「charset」を「utf-8」にします。
「examples」の「strategy-cluster.html」の内容をコピーして新規作成したファイルに貼り付けます。
コードをつぎのように修正します。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- 追加 -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>OpenLayers25 Cluster Strategy</title>
<link rel="stylesheet" href="./theme/default/style.css" type="text/css" />
<link rel="stylesheet" href="./examples/style.css" type="text/css" />
<!-- ディレクトリに合わせて修正 -->
<script src="./lib/OpenLayers.js"></script>
<script src="./examples/Jugl.js"></script>
<script src="./examples/animator.js"></script>
<!-- 再投影のための Proj4js 設定 -->
<script type="text/javascript" src="./lib/proj4js/lib/proj4js-compressed.js"></script>
<script type="text/javascript" src="./lib/proj4js/lib/projCode/tmerc.js"></script>
<script type="text/javascript" src="./lib/proj4js/lib/defs/EPSG2456.js"></script>

<!-- 画像が表示される部分のスタイル -->

<style type="text/css">
#photos {
height: 100px;
width: 512px;
position: relative;
white-space: nowrap;
}
.shift {
height: 25px;
line-height: 25px;
background-color: #fefefe;
text-align: center;
position: absolute;
bottom: 10px;
font-size: 8px;
font-weight: bold;
color: #696969;
width: 25px;
}
#scroll-start {
left: 0px;
}
#scroll-end {
right: 0px;
}
#scroll {
left: 30px;
width: 452px;
height: 100px;
overflow: hidden;
position: absolute;
bottom: 0px;
}
#photos ul {
position: absolute;
bottom: 0px;
padding: 0;
margin: 0;
}
#photos ul.start {
left: 0px;
}
#photos ul.end {
right: 80px;
}
#photos ul li {
padding 10px;
margin: 0;
list-style: none;
display: inline;
}
img.thumb {
height: 30px;
}
img.big {
height: 90px;
}
</style>

<!-- JavaScript部分 -->

<script type="text/javascript">
var map, template;
var Jugl = window["http://jugl.tschaub.net/trunk/lib/Jugl.js"];
OpenLayers.ProxyHost = (window.location.host == "localhost") ?
"/cgi-bin/proxy.cgi?url=" : "proxy.cgi?url=";
// ここからベースレイヤの変更
function init() {
map = new OpenLayers.Map('map', {
projection: new OpenLayers.Projection("EPSG:2456"),
displayProjection: new OpenLayers.Projection("EPSG:4326"),
maxResolution: 'auto',
units: 'meters',
maxExtent: new OpenLayers.Bounds(-279000,1054000,-185000,1104000)
});

layer1 = new OpenLayers.Layer.WMS( "Tokyo Height WMS",
"http://192.168.1.6/cgi-bin/mapserv?",
{
map: '/home/user/mapfile/tokyo_bmi_pgis_img.map',
layers: 'height',
format: 'image/png'
});

layer2 = new OpenLayers.Layer.WMS( "Tokyo Kukaku Sen WMS",
"http://192.168.1.6/cgi-bin/mapserv?",
{
map: '/home/user/mapfile/tokyo_bmi_pgis_img2.map',
layers: 'kukaku',
transparent: true,
format: 'image/png'
});

map.addLayers([layer1, layer2]);

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

if (!map.getCenter()) {
map.zoomToMaxExtent()
};

// ここまで(ベースレイヤの変更)
// フューチャの設定

var style = new OpenLayers.Style({
pointRadius: "${radius}",
fillColor: "#ffcc66",
fillOpacity: 0.8,
strokeColor: "#cc6633",
strokeWidth: 2,
strokeOpacity: 0.8
}, {
context: {
radius: function(feature) {
return Math.min(feature.attributes.count, 7) + 3;
}
}
});

var photos = new OpenLayers.Layer.Vector("Photos", {
strategies: [
new OpenLayers.Strategy.Fixed(),
new OpenLayers.Strategy.Cluster()
],
protocol: new OpenLayers.Protocol.HTTP({
url: "/featureserver112/featureserver.cgi/flickr/all.gml", // 修正
params: {
format: "WFS",
sort: "interestingness-desc",
service: "WFS",
request: "GetFeatures",
srs: "EPSG:4326",
maxfeatures: 150,
bbox: [138.31229577194503, 35.227550723802125, 140.54908672504484, 36.17489902852169] // 修正
},
format: new OpenLayers.Format.GML()
}),
projection: new OpenLayers.Projection("EPSG:4326"),
styleMap: new OpenLayers.StyleMap({
"default": style,
"select": {
fillColor: "#8aeeef",
strokeColor: "#32a8a9"
}
})
});

var select = new OpenLayers.Control.SelectFeature(
photos, {hover: true}
);
map.addControl(select);
select.activate();
photos.events.on({"featureselected": display});

map.addLayer(photos);
// map.setCenter(new OpenLayers.LonLat(0, 0), 1);

// ここまで(フューチャの設定)
// template setup Jugl テンプレートと画像の表示部分の設定 

template = new Jugl.Template("template");
}

function display(event) {
// clear previous photo list and create new one
$("photos").innerHTML = "";
var node = template.process({
context: {features: event.feature.cluster},
clone: true,
parent: $("photos")
});
// set up forward/rewind
var forward = Animator.apply($("list"), ["start", "end"], {duration: 1500});
$("scroll-end").onmouseover = function() {forward.seekTo(1)};
$("scroll-end").onmouseout = function() {forward.seekTo(forward.state)};
$("scroll-start").onmouseover = function() {forward.seekTo(0)};
$("scroll-start").onmouseout = function() {forward.seekTo(forward.state)};
// set up photo zoom
for(var i=0; i<event.feature.cluster.length; ++i) {
listen($("link-" + i), Animator.apply($("photo-" + i), ["thumb", "big"]));
}
}

function listen(el, anim) {
el.onmouseover = function() {anim.seekTo(1)};
el.onmouseout = function() {anim.seekTo(0)};
}
// ここまで Jugl テンプレートと画像の表示部分の設定
</script>
</head>

<!-- body 部分 -->

<body onload="init()">
<h1 id="title">Cluster Strategy Example</h1>
<p id="shortdesc">
Uses a cluster strategy to render points representing clusters of features.
</p>
<div id="map" class="smallmap"></div>
<div id="docs">
<p>The Cluster strategy lets you display points representing clusters
of features within some pixel distance.</p>
</div>
<div id="photos"></div>
<p>Hover over a cluster on the map to see the photos it includes.</p>
<div style="display: none;">
<div id="template">
<div class="shift" id="scroll-start">&lt;&lt;</div>
<div id="scroll">
<ul id="list" class="start">
<li jugl:repeat="feature features">
<a jugl:attributes="href feature.attributes.img_url;
id 'link-' + repeat.feature.index"
target="_blank">
<img jugl:attributes="src feature.attributes.img_url;
title feature.attributes.title;
id 'photo-' + repeat.feature.index"
class="thumb" />
</a>
</li>
</ul>
</div>
<div class="shift" id="scroll-end">&gt;&gt;</div>
</div>
</div>
</body>
</html>



ポイントに対応した画像が表示されます。



地図を拡大すると2つのポイントに分かれます。
大きいポイントに対応した画像。


小さいポイントに対応した画像。

2009年11月4日水曜日

OpenLayers 24a Flickr の画像を表示4 - Cluster Strategy1

OpenLayers_workshop.pdf の Clustering (Slide28) を参考に画像を描画します。
ここには次の様に書かれています。(意訳してます)
*****
接近しているポイントは、通常、重なります。高い密度のポイントのある場所では混乱が生じます。
クラスタリングは、接近しているポイントを簡素化してこれを防ぎます。
クラスタリングフィーチャは、レイヤのストラテジリストに、クラスタストラテジを追加することは簡単です。

クラスターは、ポイントが1つのフィーチャ以上表示されることが明らかならスタイル(装飾)されます。
それぞれのフィーチャは、プログラムでアクセスすることができます。
*****

前回のブログ「OpenLayers 23 Flickr の画像を表示3 - BBOX Strategy」のコードに次の様に追加してください。

---
var flickrphotos = new OpenLayers.Layer.Vector("Flickr Photos", {
protocol: new OpenLayers.Protocol.HTTP({
url: "/featureserver112/featureserver.cgi/flickr/all.gml",
format: new OpenLayers.Format.GML()
}),
strategies: [
new OpenLayers.Strategy.BBOX(),
new OpenLayers.Strategy.Cluster() // 追加
],
projection: new OpenLayers.Projection("EPSG:4326")
});
map.addLayer(flickrphotos);
---

Point が重ならないように描画されます。

2009年11月3日火曜日

OpenLayers 23 Flickr の画像を表示3 - BBOX Strategy

OpenLayers_workshop.pdf の Filtering by BBOX (Slide27) を参考に画像を描画します。
ここには、データサーバが境界線ボックスによるフィルタリングをサポートしているなら、BBOX strategy は、その時のスクリーン上のものだけリクエストする、とあります。
Open Street Map はかなり拡大しないと表示されないので、Flickr を使用しました。
trigpoint レイヤの部分を次のコードに替えます。

---
var flickrphotos = new OpenLayers.Layer.Vector("OSM Bus Stops", {
protocol: new OpenLayers.Protocol.HTTP({
url: "/featureserver112/featureserver.cgi/flickr/all.gml",
format: new OpenLayers.Format.GML()
}),
strategies: [new OpenLayers.Strategy.BBOX()],
projection: new OpenLayers.Projection("EPSG:4326")
});
map.addLayer(flickrphotos);
---

最初表示されませんでしたが、レイヤスイッチを OFF -> ON にすると表示されるようになりました。



画像を表示するために、BBOX Strategy Example(strategy-bbox.html)を参考に、次の様にコードを修正します。

---
var flickrphotos = new OpenLayers.Layer.Vector("Photos", {
protocol: new OpenLayers.Protocol.HTTP({
url: "/featureserver112/featureserver.cgi/flickr/all.gml",
params: {
format: "WFS",
sort: "interestingness-desc",
service: "WFS",
request: "GetFeatures",
srs: "EPSG:4326",
maxfeatures: 10
},
format: new OpenLayers.Format.GML()
}),
strategies: [new OpenLayers.Strategy.BBOX()],
projection: new OpenLayers.Projection("EPSG:4326"),
styleMap: new OpenLayers.StyleMap(style)
});
map.addLayer(flickrphotos);
---

地図を拡大したときに範囲が変わるので、それに合わせて表示される画像が変わるのを期待しましたができませんでした。

2009年11月2日月曜日

OpenLayers 22b Flickr の画像を表示2 - Paging Strategy

Paging Strategy Example(strategy-paging.html) を参考に、大量のフィーチャを限定した枚数ごとに順次表示します。

trigpoints レイヤ部分のコードを次の様に修正します。

---
var map, layer1, layer2, paging; // paging を追加

function init() {
---
paging = new OpenLayers.Strategy.Paging();

var trigpoints = new OpenLayers.Layer.Vector("Flickr Trigpoint Photos", {
protocol: new OpenLayers.Protocol.HTTP({
url: "/featureserver112/featureserver.cgi/flickr/all.gml",
params: {
format: "WFS",
sort: "interestingness-desc",
service: "WFS",
request: "GetFeatures",
srs: "EPSG:4326",
maxfeatures: 100,
bbox: [138.31229577194503, 35.227550723802125, 140.54908672504484, 36.17489902852169] // Strategy.Fixed のため必要
},
format: new OpenLayers.Format.GML()
}),
strategies: [new OpenLayers.Strategy.Fixed(), paging],
projection: new OpenLayers.Projection("EPSG:4326"),
styleMap: new OpenLayers.StyleMap(style)
});
map.addLayer(trigpoints);

} // End of function init()

function updateButtons() {
document.getElementById("prev").disabled = (paging.pageNum() < 1);
document.getElementById("next").disabled = (paging.pageNum() >= paging.pageCount() - 1);
document.getElementById("num").innerHTML = paging.pageNum() + 1;
document.getElementById("count").innerHTML = paging.pageCount();
}

</script>

<!-- body タグ部分の追加 -->

<body onload="init()">
---
<div id="map" class="smallmap"></div>
Displaying page <span id="num">0</span> of <span id="count">...</span>
<button id="prev" disabled="disabled" onclick="paging.pagePrevious();">previous</button>
<button id="next" disabled="disabled" onclick="paging.pageNext();">next</button>
<br /><br />
<div id="docs">
---

2009年11月1日日曜日

OpenLayers 22a Flickr の画像を表示1 - Fixed Strategy

OpenLayers_workshop.pdf を参考に、Flickr のジオタグのついた画像を表示します。

HTML ファイルを新規作成します。
「openlayersTokyoproj」 を右クリックして 新規 -> HTML ファイル をクリック。
「HTML ファイル」ウィンドウの「ファイル名(任意:openlayers_s_bbox.html)」に入力して「完了」ボタンをクリック。
「charset」を「utf-8」にします。
「examples」の「strategy-bbox.html」の内容をコピーして新規作成したファイルに貼り付けます。

http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=4750b8cf0a0683b86dba5b084b0cb061&bbox=139.23,35.42,139.4,35.71&tags='昭和記念公園'

次の様にコードを修正します。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <!-- 追加 -->
<title>OpenLayers21 Strategy BBOX - Flickr</title> <!-- 追加 -->
<!-- ライブラリと CSS などのリンク -->
<link rel="stylesheet" href="./theme/default/style.css" type="text/css" /> <!-- href の修正 -->
<link rel="stylesheet" href="./examples/style.css" type="text/css" /> <!-- href の修正 -->
<script src="./lib/OpenLayers.js"></script> <!-- src の修正 -->
<!-- ここから Proj4js 追加 -->
<script type="text/javascript" src="./lib/proj4js/lib/proj4js-compressed.js"></script>
<script type="text/javascript" src="./lib/proj4js/lib/projCode/tmerc.js"></script>
<script type="text/javascript" src="./lib/proj4js/lib/defs/EPSG2456.js"></script>
<!-- ここまで -->
<script type="text/javascript">
var map, layer1, layer2;
OpenLayers.ProxyHost = (window.location.host == "localhost") ?
"/cgi-bin/proxy.cgi?url=" : "proxy.cgi?url=";

// ここからベースレイヤの変更
        
function init() {
map = new OpenLayers.Map('map', {
projection: new OpenLayers.Projection("EPSG:2456"),
displayProjection: new OpenLayers.Projection("EPSG:4326"),
maxResolution: 'auto',
units: 'meters',
maxExtent: new OpenLayers.Bounds(-279000,1054000,-185000,1104000)
});

layer1 = new OpenLayers.Layer.WMS( "Tokyo Height WMS",
"http://localhost/cgi-bin/mapserv?",
{
map: '/home/user/mapfile/tokyo_bmi_pgis_img.map',
layers: 'height',
format: 'image/png'
});

layer2 = new OpenLayers.Layer.WMS( "Tokyo Kukaku Sen WMS",
"http://localhost/cgi-bin/mapserv?",
{
map: '/home/user/mapfile/tokyo_bmi_pgis_img2.map',
layers: 'kukaku',
transparent: true,
format: 'image/png'
});

map.addLayers([layer1, layer2]);

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

if (!map.getCenter()) {
map.zoomToMaxExtent()
};
// ここまで

var style = new OpenLayers.Style({
externalGraphic: "${img_url}",
pointRadius: 30
});
---

OpenLayers_workshop.pdf の Loading Vector Data (Slide26) を参考に画像を描画します。
ここには、Flicker は API で style 情報とともに KML フィードを提供するので、Fixed strategy の使用が適当である、とありました。

(上記コードの続き)
---
var trigpoints = new OpenLayers.Layer.Vector("Flickr Trigpoint Photos", {
protocol: new OpenLayers.Protocol.HTTP({
url: "http://api.flickr.com/services/feeds/geo/?id=[user_id]&lang=en-us&format=kml&page=1", //オプションの "g=" を "id=" にする
format: new OpenLayers.Format.KML({extractStyles: true})
}),
strategies: [new OpenLayers.Strategy.Fixed()],
projection: new OpenLayers.Projection("EPSG:4326")
});
map.addLayer(trigpoints);

}

</script>
</head>
<body onload="init()">
<h1 id="title">BBOX Strategy - flickr</h1>
<p id="shortdesc">
Uses a BBOX strategy to request features within a bounding box.
</p>
<div id="map" class="smallmap"></div>
<div id="docs">
<p>
The BBOX strategy requests data within a bounding box. When the<br />
previously requested data bounds are invalidated (by browsing to<br />
some area not covered by those bounds), another request for data<br />
is issued.
</p>
</div>
</body>
</html>

/usr/cgi-bin/proxy.cgi に api.flickr.com を追加します。

# Designed to prevent Open Proxy type stuff.

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', 'api.flickr.com']


画像をクリックしてもポップアップは表示されませんでした。

2009年10月31日土曜日

OpenLayers 21l FeatureServer で地図の表示 Flickr

flickrlayers は何も表示されませんでした。
Firebug には空の WFS ツリーが表示されました。
Firebug に表示される URL をブラウザのアドレス欄に入力しても空の WFS ツリーが表示されました。

http://localhost/openlayersTokyoproj/featureserver-1.12/featureserver.cgi/flickr?format=WFS&maxfeatures=10&SERVICE=WFS&VERSION=1.0.0&REQUEST=GetFeature&SRS=EPSG%3A4326&BBOX=138.31229577194503,35.227550723802125,140.54908672504484,36.17489902852169

BBOX の部分を削除すると自分のデータが表示されました。
featureserver.cfg の flickr の user_id をコメントアウトして BBOX を元に戻すと内容があるWFS ツリーが表示されました。

http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=[your_api_key]4750b8cf0a0683b86dba5b084b0cb061&bbox=139.233,35.421,139.234,35.422&tags=nishi-tachikawa

検索で自分の画像が検索できないので調べてみたら、次のような文章が見つかりました。

Why aren't my photos appearing in searches or groups?

そこにある条件を要約すると、

1 新しいアカウントでは、5枚以上アップロードする。
2 2、3日後正確なタグで検索する。

この条件に合っていても検索されないときは、

1 画像個別のウィンドウの Additional Infomation の2項目めが
Only you...
Only Friends...
Only Family...
になっていたら、
Any one can...
にする。

2 You -> Your Account の Privacy & Permission タブの Hide your stuff from public searches の edit をクリックしてチェックを外す。

3 画像の中のいくつかが検索できないときは、画像個別のウィンドウの右下の Flag your photo で Hide this photo from public searches のチェックを外す。

4 Flag your photo の他の条件を、
Safe
Photo
にする。

Flickr の設定を変えて、数日後表示してみましたが、検索できませんでした。

http://localhost/openlayersTokyoproj/featureserver-1.12/featureserver.cgi/flickr?format=WFS&maxfeatures=10&SERVICE=WFS&VERSION=1.0.0&REQUEST=GetFeature&SRS=EPSG%3A4326&BBOX=138.31229577194503,35.227550723802125,140.54908672504484,36.17489902852169

では、都心の画像がヒットしたのですが、郊外の画像がヒットしません。
画像数が多いと何か制限があるのかもしれません。

2009年10月26日月曜日

OpenLayers 21h FeatureServer Flickr の確認

flickr のコメントを外します。
user_id は、owner_id のことで、確認するところが分からなかったので Your photostream ページの下の RSS ボタンをクリックし、表示されたページのソース表示から探しました。
ブラウザに次のアドレスを入力して確認します。

http://localhost/featureserver112/featureserver.cgi/flickr/all.gml

自分のアップロードした画像の情報が表示されます。

最初、レイヤの名前(flickr)を間違えてエラーが表示されました。
もし原因が分からないときは、外部 API を試してみてください。
基本 URL (http://api.flickr.com/services/rest/?)にパラメータを続けます。
例えば、

http://api.flickr.com/services/rest/?method=flickr.test.echo&api_key=[your_api_key]

なら api_key が表示されます。
([your_api_key] には、取得した api_key を入力してください。)
他にも

http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=[your_api_key]&bbox=139.395,35.705,139.4,35.71&tags=flower

なら画像が検索されます。詳しくは、API の Documents をみてください。
また、取得した api_key と secret は、

featureserver-1.12/FeatureServer/DataSource/Flickr.py

の api_key と secret の値と交換できます。

---
FLICKR_API_KEY = "4750b***************************"
FLICKR_SECRET = "4b671***********"
---
def __init__(self, api_key = "4750b***************************", secret = "4b671***********", url_base = "http://api.flickr.com/services/rest/"):
---

2009年10月20日火曜日

OpenLayers 21c FeatureServer で、Shapefile PostGIS OpenStreetMap Flickr Twitter の準備

FeatureServer で、Shapefiles、PostGis layers、OpenStreetMap、Flickr、Twitter を使ってみます。

Paolo Corti さんのブログの

Thinking in GIS
A day with FeatureServer #2
http://www.paolocorti.net/2008/05/03/a-day-with-featureserver-2/

を参考にします。

1 シェープファイル Shapefile
以前、基盤地図情報の G-XML から作成した東京都のシェープファイルを使用します。

2 PostGIS
現在使用している東京都のデータを使用します。

3 オープンストリートマップ Open Street Map
OpenStreetMap(略称OSM)は道路地図などの地理情報データを誰でも利用できるよう、フリーの地理情報データを作成することを目的としたプロジェクトです。(OpenStreetMap Japan より引用)
ここでは西立川駅付近のデータを利用します。
FeatureServer で OSM サービスを設定します。
クエリは bbox か id がサポートされています。

アクセス例: New York の場合

http://localhost/featureserver112/featureserver.cgi/osm/all.gml?bbox=-124.1,47.2,-123.9,47.5
http://localhost/featureserver112/featureserver.cgi/osm/8551622.gml

詳しくは、

OpenStreetMap Japan ホームページ
http://www.openstreetmap.jp/

をみてください。

4 Flickr
今回のデモを試すため Flickr のアカウントを取得します。
Flickr は Web2.0 世代の画像管理アプリケーションです。
無料のアカウントで毎月数千枚アップロードできます。
画像には EXIF 形式の location フィールドにジオタグをつけますが、これには4つの方法があります。
1 GPS 機能のついたカメラ
2 ジオタグのついた画像を作成するソフトウェアのついた GPS
3 カメラに装着できるGPSデバイス
4 Flickr のウェブサイトを使う

アクセス例:このままではすべての画像にアクセスしてしまうので実際にはオプションをつけます。

http://localhost/featureserver112/featureserver.cgi/flickr/all.gml

Flickr の使い方が次のサイトにあります。

Flickrの使い方
http://www14.atwiki.jp/flickr_freak/pages/4.html

このサイトは日本語ですが、Flickr のホームページは英語です。

Flickr で位置情報のついた画像を認識させるには、

Flickr の API key を取得するには、
(質問に答える必要があるので、よく分からないときは flickr の設定はしないようにしてください。
既に、featureserver-1.12/featureServer/DataSource/Flickr.py に API Key が設定されています。)

1 Flickr Services ページ
http://www.flickr.com/services/
または、Help -> FAQ -> The Flickr API ページの services page リンクをクリック。

内の、Developing on the Flickr API の 4.Apply for an API Key をクリック。
2 テストで自分自身の画像を使うので、Apply for a Non-Commercial API Key ボタンをクリック。
3 「Step 2 of 3: Tell us about your Non-Commercial API project」に戻るので、必要事項を入力して「Submit Application」をクリック。
4 「Step 3 of 3: Done! Here is your brand new Non-Commercial API key」に key が表示。
key:4750b8**************************
secret:4b671f***********

画像のジオタグを有効にするには、

1 You(タブ)-> Your Account をクリック
2 Privacy & Permissions(タブ)をクリックして「Import EXIF location data [?] No」となっていたら「edit」をクリック。
3 「Automagically import GPS information as geo data」ページ内の「Yes please, that would be lovely.」にチェックをつけて「SAVE」ボタンをクリック。

Map に追加します。

4 You(タブ)-> Your Photostream をクリック。
5 画像をクリック。
6 ページ右中段の「Add to your map」をクリック。
7 「SAVE TO MAP」ボタンをクリック。
(住所と地図が表示されますが、地図が表示されないときはスケールや「Map, Hybrid, Satellite」を操作してみてください。)


5 Twitter(Map)
Twitter は、最近ユーザが増えているミニブログです。
IT関係者も実際ユーザになっています。

アクセス例:複数の twitter ユーザは設定できませんでした。

http://localhost/featureserver112/featureserver.cgi/twitter/all.gml

Twitter に位置情報を追加するには、プロフィールの現在地に、緯度経度、地名、駅名などを入れます。
また、
http://twittermap.com/maps/faq.html
に位置情報を追加する方法が記載されています。
ここの方法で実際に twittermap に表示されたものはありませんでした。
L:35.70359,139.39368 L:spark=35.70359,139.39368 をテキスト中に挿入する方法で、twitter の検索「near:西立川駅 within:1mi」("西立川駅" を中心に半径1マイル(1.6km)内のつぶやき)を検索すると表示されました。
他にも twitter 用のソフトウェアが色々あるので、興味のある方はみてください。

curl を使った更新の方法は次の通りです。

curl -X PUT -u username:password -d location="Via Berto, Rome, Italy" http://twitter.com/account/update_location.json