「15a24/ジオタグ地図」の編集履歴(バックアップ)一覧はこちら
15a24/ジオタグ地図 - (2009/12/30 (水) 07:22:28) の1つ前との変更点
追加された行は緑色になります。
削除された行は赤色になります。
#javascript(){{
<meta name="viewport" content="device-width,initial-scale=1,user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=ABQIAAAAYcnMuEZ9aVvC2_asbHKXuRRnaTBbG-tmmWKb-1Nfcxygo7GqNhQvW8gRUfZFDuDXbWYHCA8N3keWWw&hl=ja"></script>
<script type="text/javascript" src="http://www21.atwiki.jp/15x24/?cmd=upload&act=open&page=15a24%2F%E3%82%B8%E3%82%AA%E3%82%BF%E3%82%B0%E5%9C%B0%E5%9B%B3&file=twitterapi.js"></script>
<script type="text/javascript">
function callbackSearchGeoToMap(res)
{
var str = '';
var baseIcon = new GIcon();
baseIcon.iconSize = new GSize(16, 16);
baseIcon.iconAnchor = new GPoint(8, 8);
baseIcon.infoWindowAnchor = new GPoint(8, 2);
function createMarker(point, infoText, profileImageURL) {
var profileIcon = new GIcon(baseIcon);
profileIcon.image = profileImageURL;
var markerOptions = {
icon: profileIcon
};
var marker = new GMarker(point, markerOptions);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(infoText);
});
return marker;
}
function getDateTime(str) {
var date = new Date(str);
if (date == null) { return str; }
return date.toLocaleString();
}
function getInfoText(obj) {
var dateTime = getDateTime(obj.created_at);
return '<img src="' + obj.profile_image_url + '" width=16 height=16 alt="icon" />'
+ obj.from_user + ':'
+ obj.text
+ ', geo:' + obj.geo.coordinates
+ ' (' + dateTime + ')';
}
function getMarkerText(obj) {
var dateTime = getDateTime(obj.created_at);
return '<img src="' + obj.profile_image_url + '" width=32 height=32 alt="icon" style="vertical-align: text-bottom" />'
+ ' ' + obj.from_user + '<br />'
+ '<div style="clear: both">' + obj.text + '</div>'
+ '<div style="text-align: right">(' + dateTime + ')</div>';
}
for (var i = 0; i < res.results.length; i++) {
var obj = res.results[i];
if (obj.geo != null) {
var infoText = getInfoText(obj);
str += infoText + '<br />';
var lat = obj.geo.coordinates[0];
var lng = obj.geo.coordinates[1];
var point = new GLatLng(lat, lng);
var markerText = getMarkerText(obj);
var profileImageURL = obj.profile_image_url;
var marker = createMarker(point, markerText, profileImageURL);
map.addOverlay(marker);
}
}
document.getElementById('info_text').innerHTML = str;
}
function searchGeoToMap() {
map.clearOverlays()
var q = document.getElementById('q').value;
var param = 'q=' + escape(q) + "&rpp=100&geocode=35.69%2C139.70%2C100km";
TwitterAPI.search(callbackSearchGeoToMap, '', param);
}
var map;
var geocoder;
function firstSearch() {
initialize();
searchGeoToMap();
}
function initialize() {
if (GBrowserIsCompatible()) {
document.getElementById('r_side').style["display"] = "none";
document.getElementById('header').style["display"] = "none";
if(navigator.userAgent.indexOf("iPhone") != -1 || navigator.userAgent.indexOf("iPod") != -1){
ua="iphone";
document.getElementById('headBarWrapper').style["width"] = "320px";
document.getElementById('atwiki-jp-bg1').style["width"] = "320px";
document.getElementById('atwiki-jp-bg1').style["clear"] = "both";
document.getElementById('wrapper').style["width"] = "310px";
document.getElementById('l_side').style["width"] = "310px";
document.getElementById('mainpage').style["width"] = "310px";
document.getElementById('map_canvas').style["width"] = "300px";
document.getElementById('map_canvas').style["height"] = "300px";
document.getElementById('info_text').style["width"] = "300px";
document.getElementById('info_text').style["height"] = "100px";
}else{
document.getElementById('wrapper').style["width"] = (window.innerWidth - 20) + "px";
document.getElementById('map_canvas').style["width"] = (window.innerWidth - 100) + "px";
document.getElementById('map_canvas').style["height"] = (window.innerHeight - 300) + "px";
document.getElementById('info_text').style["width"] = (window.innerWidth - 100) + "px";
}
var point = new GLatLng(35.69, 139.70);
map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(point, 13);
map.setZoom(12)
map.addControl(new GLargeMapControl());
geocoder = new GClientGeocoder()
}
}
window.onunload = GUnload;
window.onload = firstSearch;
</script>
<div id="map_canvas" style="width: 800px; height: 800px"></div>
<form onsubmit="searchGeoToMap(); return false;">
<input type="text" id="q" value="#15a24" />
<input type="submit" value="twitter 検索→ジオタグ表示" />
</form>
<div id="info_text" style="height: 200px; width: 800px; overflow: scroll; background: #f8ffff;"></div>
}}
* ジオタグ地図
twitter を検索して、最新100件のジオタグの位置を表示します。
注:
- 都心から半径100km以内のジオタグのみ反応します。
- twitter API の仕様により、1時間に100回程度しか検索できません。
謝辞:
http://m-ono.info/tech/geotag-viewer/ をたいへん参考にさせていただきつつ、 http://www.otchy.net/javascript/twitter-api/ を利用して作成しました。
----
#javascript(){{
<meta name="viewport" content="device-width,initial-scale=1,user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=ABQIAAAAYcnMuEZ9aVvC2_asbHKXuRRnaTBbG-tmmWKb-1Nfcxygo7GqNhQvW8gRUfZFDuDXbWYHCA8N3keWWw&hl=ja"></script>
<script type="text/javascript" src="http://www21.atwiki.jp/15x24/?cmd=upload&act=open&page=15a24%2F%E3%82%B8%E3%82%AA%E3%82%BF%E3%82%B0%E5%9C%B0%E5%9B%B3&file=twitterapi.js"></script>
<script type="text/javascript">
function callbackSearchGeoToMap(res)
{
var str = '';
var baseIcon = new GIcon();
baseIcon.iconSize = new GSize(16, 16);
baseIcon.iconAnchor = new GPoint(8, 8);
baseIcon.infoWindowAnchor = new GPoint(8, 2);
function createMarker(point, infoText, profileImageURL) {
var profileIcon = new GIcon(baseIcon);
profileIcon.image = profileImageURL;
var markerOptions = {
icon: profileIcon
};
var marker = new GMarker(point, markerOptions);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(infoText);
});
return marker;
}
function getDateTime(str) {
var date = new Date(str);
if (date == null) { return str; }
return date.toLocaleString();
}
function getInfoText(obj) {
var dateTime = getDateTime(obj.created_at);
return '<img src="' + obj.profile_image_url + '" width=16 height=16 alt="icon" />'
+ obj.from_user + ':'
+ obj.text
+ ', geo:' + obj.geo.coordinates
+ ' (' + dateTime + ')';
}
function getMarkerText(obj) {
var dateTime = getDateTime(obj.created_at);
return '<img src="' + obj.profile_image_url + '" width=32 height=32 alt="icon" style="vertical-align: text-bottom" />'
+ ' ' + obj.from_user + '<br />'
+ '<div style="clear: both">' + obj.text + '</div>'
+ '<div style="text-align: right">(' + dateTime + ')</div>';
}
for (var i = 0; i < res.results.length; i++) {
var obj = res.results[i];
if (obj.geo != null) {
var infoText = getInfoText(obj);
str += infoText + '<br />';
var lat = obj.geo.coordinates[0];
var lng = obj.geo.coordinates[1];
var point = new GLatLng(lat, lng);
var markerText = getMarkerText(obj);
var profileImageURL = obj.profile_image_url;
var marker = createMarker(point, markerText, profileImageURL);
map.addOverlay(marker);
}
}
document.getElementById('info_text').innerHTML = str;
}
function searchGeoToMap() {
map.clearOverlays()
var q = document.getElementById('q').value;
var param = 'q=' + escape(q) + "&rpp=100&geocode=35.69%2C139.70%2C100km";
TwitterAPI.search(callbackSearchGeoToMap, '', param);
}
var map;
var geocoder;
function firstSearch() {
initialize();
searchGeoToMap();
}
function initialize() {
if (GBrowserIsCompatible()) {
document.getElementById('r_side').style["display"] = "none";
document.getElementById('header').style["display"] = "none";
if(navigator.userAgent.indexOf("iPhone") != -1 || navigator.userAgent.indexOf("iPod") != -1){
ua="iphone";
document.getElementById('headBarWrapper').style["width"] = "320px";
document.getElementById('atwiki-jp-bg1').style["width"] = "320px";
document.getElementById('atwiki-jp-bg1').style["clear"] = "both";
document.getElementById('wrapper').style["width"] = "310px";
document.getElementById('l_side').style["width"] = "310px";
document.getElementById('mainpage').style["width"] = "310px";
document.getElementById('editmenu').style["width"] = "310px";
document.getElementById('map_canvas').style["width"] = "300px";
document.getElementById('map_canvas').style["height"] = "300px";
document.getElementById('info_text').style["width"] = "300px";
document.getElementById('info_text').style["height"] = "100px";
}else{
document.getElementById('wrapper').style["width"] = (window.innerWidth - 20) + "px";
document.getElementById('map_canvas').style["width"] = (window.innerWidth - 100) + "px";
document.getElementById('map_canvas').style["height"] = (window.innerHeight - 300) + "px";
document.getElementById('info_text').style["width"] = (window.innerWidth - 100) + "px";
}
var point = new GLatLng(35.69, 139.70);
map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(point, 13);
map.setZoom(12)
map.addControl(new GLargeMapControl());
geocoder = new GClientGeocoder()
}
}
window.onunload = GUnload;
window.onload = firstSearch;
</script>
<div id="map_canvas" style="width: 800px; height: 800px"></div>
<form onsubmit="searchGeoToMap(); return false;">
<input type="text" id="q" value="#15a24" />
<input type="submit" value="twitter 検索→ジオタグ表示" />
</form>
<div id="info_text" style="height: 200px; width: 800px; overflow: scroll; background: #f8ffff;"></div>
}}
* ジオタグ地図
twitter を検索して、最新100件のジオタグの位置を表示します。
注:
- 都心から半径100km以内のジオタグのみ反応します。
- twitter API の仕様により、1時間に100回程度しか検索できません。
謝辞:
http://m-ono.info/tech/geotag-viewer/ をたいへん参考にさせていただきつつ、 http://www.otchy.net/javascript/twitter-api/ を利用して作成しました。
----