| Version 3 (modified by jazz, 15 years ago) (diff) |
|---|
2009-02-04
- 原本 waue 發表的Google Map的網址模組轉換，在官方的名稱為 Google Mapplets API。
- Google Mapplet API 跟 Google Map API 最主要的差別在於 Mapplet 是在官方 Google Map 上呈現，而 Google Map API 則可以用在自己的網站上。
The main difference is that Mapplets run on Google Maps, while the traditional Maps API is used to create maps on other websites.
- "赤壁"原始碼 - http://code.google.com/p/redcliff/source/checkout
svn checkout http://redcliff.googlecode.com/svn/trunk/ redcliff-read-only
- 赤壁的 Mapplet
- 在原始碼中，people.json 是用來顯示"主要人物"這個 Tag 的資料來源
- 在原始碼中，big_event.json 是用來顯示"歷史事件"這個 Tag 的資料來源
- 在原始碼中，event.json 是用來顯示點選"歷史事件"其中一個事件後，顯示各事件的關連資料來源
- 在原始碼中，location.json 是用來把歷史古城的位置用貼圖方式顯示的經緯度資料來源
- 在原始碼中，element.json 是用在點選特定古城位置時，顯示關聯事件的資料來源
- 赤壁 Mapplet 原始碼 XML 解析
<?xml version="1.0" encoding="UTF-8"?> <Module> <ModulePrefs title="赤壁之戰" description="赤壁之戰的歷史地圖" author="Google Redcliff Team" author_email="chibi.ditu@gmail.com"> # 參考 http://code.google.com/intl/zh-TW/apis/maps/documentation/mapplets/basics.html#Loading_the_Mapplets_API # 必須加入 sharedmap 的 feature 才能讓 mapplet 載入定義在 Content 中的 javascript 程式 <Require feature="sharedmap"/> <Require feature="dynamic-height" /> <Require feature="analytics" /> </ModulePrefs> <Content type="html"><
<div class="tab-content" id="tabContent">
<div class="tab-head">
<div class="tab-inactive"><div id="events_tab">歷史事件</div></div>
<div class="tab-active"><div id="characters_tab">主要人物</div></div>
<div class="tab-inactive"><div id="vote_tab">投票</div></div>
</div>
<div id="events_cnt" style="display:none;">
<div id="unused_bar"><!-- TODO may need to add some text in this bar --></div>
<div id="big_event_list" ></div>
</div>
<div id="characters_cnt">
<div id="kingdom_checkbox">
<label for="checkbox_wei">曹操軍</label><input id="checkbox_wei" type="checkbox" checked>
<label for="checkbox_wu">孫權軍</label><input id="checkbox_wu" type="checkbox" checked>
<label for="checkbox_shu">劉備軍</label><input id="checkbox_shu" type="checkbox" checked>
</div>
<div id="character_list"></div>
</div>
<div id="vote_cnt" style="display:none;">
<div id="unused_bar"></div>
<iframe frameborder=0 class="vote-ifr" src="http://redcliffvotetw.appspot.com/?locale=zh_tw"></iframe>
</div>
</div>
<div class="bottom-button-div">
<a href='#' id="clear_button">清除地圖上的標誌</a>
<span id="share_button"></span>
</div>
<div class="bottom-button-div2">
<a href="#" id="disclaimer_show">聲明</a>
<div id="disclaimer_box" style="display:none;"><div>
本地圖為Google Inc.製作。赤壁之戰地圖中所使用的各種數據，為參考《後漢書》、《三國志》、《資治通鑑》、《三國郡縣表》等書籍資料，以及<a target="_blank" href= "http://zh.wikipedia.org/w/index.php?title=%E9%A6%96%E9%A1%B5&variant=zh-tw/">維基百科</a>等網站，整理獲得。
人物肖像，事件相片等，為<a target="_blank" href="http://www.foxmovies.com.tw/">美商二十世紀福斯影片公司</a>及<a target="_blank" href="http://www.meiah.com/">美亞娛樂資訊集團有限公司</a>授權使用之電影《赤壁》劇照。
<br><br>
聯繫我們: <a href="mailto:chibi.ditu@gmail.com">chibi.ditu@gmail.com</a>
<br>
<span id="disclaimer_close">關閉</span>
</div></div>
</div>
</div>
<div style="height:2em;"></div>
### 載入 jQuery API
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load("jquery", "1.2.6");
</script>
<script type="text/javascript">window.serverBase="http://www.google.com";window.apiKey="";window.locale="zh_TW";window.js_messages={'Email':'\u96fb\u5b50\u90f5\u4ef6','Please add your email address to the From: field':'\u8acb\u5c07\u60a8\u7684\u96fb\u5b50\u90f5\u4ef6\u4f4d\u5740\u65b0\u589e\u81f3\u5bc4\u4ef6\u8005\u6b04\u4f4d','Oops! A popup blocker is preventing the bookmarklet from opening. Try holding the Shift key and clicking on the bookmarklet again.':'\u5f88\u62b1\u6b49\uff01\u5feb\u986f\u5c01\u9396\u7a0b\u5f0f\u6b63\u5728\u963b\u6b62\u958b\u555f\u66f8\u7c64\u3002\u5617\u8a66\u6309\u4f4f Shift \u9375\u4e26\u518d\u6b21\u6309\u4e0b\u66f8\u7c64\u3002','Google - Email / Share':'Google - \u5bc4\u9001\u96fb\u5b50\u90f5\u4ef6 / \u5206\u4eab','Edit this shared item':'\u7de8\u8f2f\u6b64\u5206\u4eab\u9805\u76ee','Please enter valid email addresses in the To: field':'\u8acb\u5728\u6536\u4ef6\u8005\u6b04\u4f4d\u4e2d\u8f38\u5165\u6709\u6548\u7684\u96fb\u5b50\u90f5\u4ef6\u4f4d\u5740','Are you sure you want to remove this shared item?':'\u60a8\u78ba\u5b9a\u8981\u79fb\u9664\u9019\u500b\u5206\u4eab\u7684\u9805\u76ee\uff1f','Please enter a valid email address in the From: field':'\u8acb\u5728\u5bc4\u4ef6\u8005\u6b04\u4f4d\u4e2d\u8f38\u5165\u6709\u6548\u7684\u96fb\u5b50\u90f5\u4ef6\u4f4d\u5740','Share':'\u5171\u7528','Oops! We seem to be experiencing network problems. Please check your connection and try again.':'\u5f88\u62b1\u6b49\uff01\u53ef\u80fd\u767c\u751f\u4e86\u7db2\u8def\u554f\u984c\u3002\u8acb\u6aa2\u67e5\u60a8\u7684\u9023\u7dda\u4e26\u518d\u8a66\u4e00\u6b21\u3002','%1 does not exist!':'%1 \u4e0d\u5b58\u5728\uff01','Add a comment...':'\u65b0\u589e\u610f\u898b...','Please add recipients to the To: field':'\u8acb\u5c07\u6536\u4ef6\u8005\u65b0\u589e\u81f3\u6536\u4ef6\u8005\u6b04\u4f4d'};(function() {
var GLOBAL_document=document,$$PROP_appendChild="appendChild",$$PROP_prototype="prototype",$$PROP_createTextNode="createTextNode",$$PROP_createElement="createElement";function replaceAll(a,b,c){if(b.length==0)return a;var d=a.indexOf(b);while(d>-1){a=a.replace(b,c);d=a.indexOf(b)}return a}var messages=window.js_messages;function formatMessage(a,b){a=getMsg(a);if(b&&b.length)for(var c=0;c<b.length;c++)a=replaceAll(a,"%"+(c+1),b[c]);return a}
function getMsg(a){if(messages&&messages[a])return messages[a];return a};var win=window,getElid;getElid=GLOBAL_document.getElementById?function(a){return GLOBAL_document.getElementById(a)}:GLOBAL_document.all?function(a){return GLOBAL_document.all[a]}:function(){return undefined};elid=function(a){return typeof a=="string"?getElid(a):a};if(!win.google)win.google={};var google=win.google;if(!google.share)google.share={};share=google.share;google.sharing=share;var serverBase=win.serverBase,key=win.apiKey,locale=win.locale;
share.SharingWidget=function(a,b){this.m=GLOBAL_document.location.href;this.o=1;this.l=this.d=null;this.a={};this.b=this.h=0;if(b){this.a=b;if(this.a.googleinternal==true)this.h=1;if(this.a.specifiedPageViewed==true&&this.a.url){var c=new Image;c.src=serverBase+"/s2/sharing/share?pub_action=vi&url ="+encodeURIComponent(this.a.url)+"&key="+key}if(this.a.defaultTab=="email")this.b=1}this.a.isEmbedded=true;var d=elid(a);if(d==null){var e=formatMessage("%1 does not exist!",[a]);alert(e)}else this.k(d)};
var fullBase=serverBase+"/s2/sharing/resources/",BRANDED_WIDGET_HTML='<img src="'+fullBase+'static/images/email_share_button.png"/>',UNBRANDED_WIDGET_HTML=BRANDED_WIDGET_HTML.replace(".png","_unbranded.png"),LINK_ONLY_TEXT=[getMsg("Share"),getMsg("Email")],LINK_TITLE=[getMsg("Share"),getMsg("Email")],LINK_STYLE_CLASS=["google-share-l","google-email-l"],BUTTON_STYLE_CLASS=["google-share-b","google-email-b"],SHARE_BUTTON_STYLE_SUFFIX=";width:16px;height:16px;margin:-1px 0 0 1px;//margin:-2px 3px -1px -18px;//position:absolute;background:url("+
fullBase+"static/images/icon_share.gif) no-repeat left center;} html>body span.google-share-b-icon{background-image:url("+fullBase+"static/images/icon_share.png);margin:-1px 3px 0px -19px;position:absolute;}",EMAIL_BUTTON_STYLE="a.google-email-b{font-family:arial,sans-serif;display:-moz-inline-box;display:inline-block;position:relative;padding:1px 5px 1px 18px;margin:2px 0 0;font-size:10px;text-decoration:none;color:#03c;background:#fff url("+fullBase+"static/images/icon_email.gif) no-repeat 1px center;border:1px solid #999;} a.google-email-b:hover{border:1px solid #666;background-color:#eee;text-decoration:none;}",
SHARE_LINK_AND_ICON_STYLE="a.google-share-l{height:16px;padding:2px 4px 0 18px;background:url("+fullBase+"static/images/icon_share.gif) no-repeat left center;} html>body a.google-share-l{background-image:url("+fullBase+"static/images/icon_share.png);}",EMAIL_LINK_AND_ICON_STYLE="a.google-email-l{height:16px;padding:2px 4px 0 18px;background:url("+fullBase+"static/images/icon_email.gif) no-repeat left center;}",LINK_AND_ICON_STYLE=[SHARE_LINK_AND_ICON_STYLE,EMAIL_LINK_AND_ICON_STYLE];
share.SharingWidget[$$PROP_prototype].j=function(a){if(a==0){var b="";b=typeof opera=="undefined"&&navigator.userAgent.indexOf("WebKit")==-1&&navigator.product=="Gecko"?"float:none":"float:left";return"a.google-share-b{font-family:arial,sans-serif;display:-moz-inline-box;display:inline-block;position:relative;padding:1px 3px 0 0;margin:0;font-size:10px;text-decoration:none;//padding:1px 3px 0 10px;//margin:0 0 0 10px;color:#03c;background:#fff;border:1px solid #999;} html>body a.google-share-b{margin:0 0 0 7px;padding:0 3px 0 10px;} a.google-share-b:hover{border:1px solid #666;background:#eee;text-decoration:none;} span.google-share-b-icon{"+
b+SHARE_BUTTON_STYLE_SUFFIX}else return EMAIL_BUTTON_STYLE};
share.SharingWidget[$$PROP_prototype].i=function(){if(this.d)return true;if(share.EmailWidget){this.d=new share.EmailWidget(this.a);return true}if(!this.l){var a=GLOBAL_document[$$PROP_createElement]("link");a.rel="stylesheet";a.href=fullBase+"static/html/ShareWidgetStyle.css";GLOBAL_document.getElementsByTagName("head")[0][$$PROP_appendChild](a);var b=GLOBAL_document[$$PROP_createElement]("script");b.src=serverBase+"/s2/sharing/js?script=socialsharing&key="+key+"&hl="+locale;GLOBAL_document.body[$$PROP_appendChild](b);
this.l=b}return false};
share.SharingWidget[$$PROP_prototype].c=function(a){a||(a=0);if(this.a.popup){if(this.d&&this.d.isVisible()){win.focus&&this.a.altWindow.focus();return}var b=0,c=0;if(win.outerWidth){b=win.screenX+(win.outerWidth-762)/2;c=win.screenY+(win.outerHeight-402)/2}else{b=win.screenLeft+(GLOBAL_document.body.clientWidth-742)/2;c=win.screenTop+(GLOBAL_document.body.clientHeight-402)/2}this.a.altWindow=win.open("","_blank","height=390px,width=740px,toolbar=no,directories=no,left="+b+",top="+c+",status=no,menubar=no,scrollbars=no,resizable=1");
this.a.popup=false}if(this.i())this.d.display();else if(a>20){var d=getMsg("Oops! We seem to be experiencing network problems.\nPlease check your connection and try again.");win.alert(d)}else{var e=this,f=Math.min(1<<a,1000);win.setTimeout(function(){e.c(a+1)},f)}};
share.SharingWidget[$$PROP_prototype].k=function(a){this.n=a;if(a!=null)if(this.a.retain_div_contents){var b=this;a.onclick=function(){b.c()}}else{var c=GLOBAL_document[$$PROP_createElement]("style"),d=GLOBAL_document[$$PROP_createElement]("a");d.title=LINK_TITLE[this.b];d.href=this.a.link_href=="void"?"javascript:void(0);":"#";var b=this;share.display_now=function(){b.c()};d.onclick=function(){share.display_now();return false};var e=this.a.linkText?this.a.linkText:LINK_ONLY_TEXT[this.b];if(this.h==
1){a.innerHTML=UNBRANDED_WIDGET_HTML;a.style.cursor="pointer";a.onclick=function(){b.c()}}else if(this.a.buttonStyle)if(this.a.buttonStyle=="link"){d[$$PROP_appendChild](GLOBAL_document[$$PROP_createTextNode](e));a[$$PROP_appendChild](d)}else if(this.a.buttonStyle=="linkAndIcon"){d[$$PROP_appendChild](GLOBAL_document[$$PROP_createTextNode](e));d.className=LINK_STYLE_CLASS[this.b];this.g(c,LINK_AND_ICON_STYLE[this.b]);this.e(a,c);a[$$PROP_appendChild](d)}else this.f(a,c,d);else this.f(a,c,d)}};
share.SharingWidget[$$PROP_prototype].f=function(a,b,c){if(this.b==0){var d=GLOBAL_document[$$PROP_createElement]("span");d.className="google-share-b-icon";c[$$PROP_appendChild](d);c[$$PROP_appendChild](GLOBAL_document[$$PROP_createTextNode](LINK_ONLY_TEXT[0]))}else c[$$PROP_appendChild](GLOBAL_document[$$PROP_createTextNode](LINK_ONLY_TEXT[1]));c.className=BUTTON_STYLE_CLASS[this.b];this.g(b,this.j(this.b));this.e(a,b);a[$$PROP_appendChild](c)};
share.SharingWidget[$$PROP_prototype].g=function(a,b){a.setAttribute("type","text/css");if(a.styleSheet)a.styleSheet.cssText=b;else{var c=GLOBAL_document[$$PROP_createTextNode](b);a[$$PROP_appendChild](c)}};share.SharingWidget[$$PROP_prototype].e=function(a,b){var c=GLOBAL_document.getElementsByTagName("head")[0];c?c[$$PROP_appendChild](b):a[$$PROP_appendChild](b)};share.ShareWidget=share.SharingWidget;share.SharingButton=share.SharingWidget;
})();
</script>
<script type="text/javascript">(function(){
function Hash(){
this.length = 0;
this.items = new Array();
for (var i = 0; i < arguments.length; i += 2) {
if (typeof(arguments[i + 1]) != 'undefined') {
this.items[arguments[i]] = arguments[i + 1];
this.length++;
}
}
};
Hash.prototype = {
removeItem: function(in_key) {
var tmp_value;
if (typeof(this.items[in_key]) != 'undefined') {
this.length--;
tmp_value = this.items[in_key];
delete this.items[in_key];
}
return tmp_value;
},
getItem: function(in_key) {
return this.items[in_key];
},
setItem: function(in_key, in_value) {
if (typeof(in_value) != 'undefined') {
if (typeof(this.items[in_key]) == 'undefined') {
this.length++;
}
this.items[in_key] = in_value;
}
return in_value;
},
hasItem: function(in_key) {
return typeof(this.items[in_key]) != 'undefined';
},
getLength: function(){
return this.length;
}
};
var LOCATION = new Hash();
var ELEMENT = new Hash();
var EVENT = new Hash();
var BIG_EVENT = new Hash();
var PEOPLE = new Hash();
var PEOPLE_ARRAY = new Array();
var CURRENT_EVENT_HASH = new Hash();
var CURRENT_ELEMENT_HASH = new Hash();
var CURRENT_EVENT = Array();
var CURRENT_ELEMENT = new Array();
var HIGH_LIGHT_ELEMENT = new Array();
var CURRENT_OVERLAY_ID = "";
var BASE = 'http://redcliff.googlecode.com/svn/trunk/';
var CN_BASE = 'http://www.google.cn/staticcn/chibi/';
var LAIBA_BASE = '';
var NULL_PIC = 'http://laiba.tianya.cn/laiba/images/274/12295005600705035805/A/1/o.png';
var CURRENT_BIG_EVENT = null;
var CURRENT_PEOPLE = null;
var CURRENT_TAB = null;
var URL = {
location_url: BASE + 'data_tc/location.json?bpc=12191314',
element_url: BASE + 'data_tc/element.json?bpc=12191328',
event_url: BASE + 'data_tc/event.json?bpc=12191540',
big_event_url: BASE + 'data_tc/big_event.json?bpc=12191303',
people_url: BASE +'data_tc/people.json?bpc=12191540',
tile_url: 'http://mt.google.cn/mt?v=cnsg1.2&hl=zh-CN&x={X}&y={Y}&z={Z}'
};
var FLAGS = {
'蜀': 'G',
'魏': 'B',
'吳': 'R'
};
var INFOWIN_TAB_LABELS = ['事件一', '事件二', '事件三', '事件四', '事件五', '事件六']; // add more if there are more overlap...
var G_MAP;
// Google Analytics Account
var UAACCT = "UA-6735343-1";
var C_POLYLINE_WEIGHT = 10
function Location(raw_location) {
var me = this;
this.location = raw_location;
this.name = location.name;
this.point = new GLatLng(raw_location.lat, raw_location.lng);
};
function Element(raw_element) {
var me = this;
this.id = raw_element.id
this.element = raw_element;
this.type = raw_element.type;
var getHiddenPolylineOverlay = function(points, weigth, id) {
var latlngs = new Array();
$.each(points, function(index, point){
latlngs.push(new GLatLng(point.lat, point.lng));
});
var polyline = new GPolygon(latlngs, "#000000", 10, 0.0);
GEvent.addListener(polyline, 'click', function(latlng) {
G_MAP.openInfoWindow("ELEMENT", id, latlng);
});
return polyline;
};
var getArrowGroundOverlay = function(arrow_url, sw, ne) {
var bound = new GLatLngBounds(new GLatLng(ne.lat, ne.lng), new GLatLng(sw.lat, sw.lng));
var arrow = new GGroundOverlay(CN_BASE + 'arrow/' + arrow_url + '.png', bound);
return arrow;
}
var getMarker = function(icon_url, point, id) {
var image = CN_BASE + 'icon/' + icon_url + '.png';
var icon = new GIcon(G_DEFAULT_ICON, image);
if (icon_url.length == 2)
icon.iconSize = new GSize(45,32);
else
icon.iconSize = new GSize(25,32);
var marker = new GMarker(point, {icon:icon});
GEvent.addListener(marker, 'click', function() {
G_MAP.openInfoWindow("ELEMENT", id, point);
});
return marker;
}
if (this.type == 'point') {
this.point = new GLatLng(raw_element.lat, raw_element.lng);
this.marker = getMarker(raw_element.pic, this.point, this.id);
} else {
this.hidden_polyline = getHiddenPolylineOverlay(raw_element.hot_points, C_POLYLINE_WEIGHT, this.id);
this.arrow = getArrowGroundOverlay(raw_element.arrow, raw_element.arrow_points[0], raw_element.arrow_points[1]);
}
this.events = raw_element.event_ids;
};
Element.prototype = {
drawOnMap: function() {
if (this.type == 'line') {
G_MAP.addOverlay(this.hidden_polyline);
G_MAP.addOverlay(this.arrow);
} else {
G_MAP.addOverlay(this.marker);
}
},
removeFromMap: function() {
if (this.type == 'line') {
G_MAP.removeOverlay(this.hidden_polyline);
G_MAP.removeOverlay(this.arrow);
} else {
G_MAP.removeOverlay(this.marker);
}
}
/*
highLight: function() {
G_MAP.removeOverlay(this.current_overlay);
G_MAP.addOverlay(this.highlight_overlay);
this.current_overlay = this.highlight_overlay;
},
deHighLight: function() {
G_MAP.removeOverlay(this.current_overlay);
G_MAP.addOverlay(this.overlay);
this.current_overlay = this.overlay;
},
adjustZoomLevel: function() {
}
*/
};
var encapsulateActiveEventOrPeople = function(people_id) {
if (CURRENT_BIG_EVENT != null) {
var big_event = BIG_EVENT.getItem(CURRENT_BIG_EVENT);
big_event.hideDetails();
CURRENT_BIG_EVENT = null;
}
if (CURRENT_PEOPLE != null && people_id && CURRENT_PEOPLE == people_id)
return;
if (CURRENT_PEOPLE != null) {
var people = PEOPLE.getItem(CURRENT_PEOPLE);
people.node.encapsulate();
CURRENT_PEOPLE = null;
}
}
function Event(raw_event) {
this.id = raw_event.id;
this.name = raw_event.name;
this.element_ids = raw_event.element_ids;
this.people = raw_event.people;
this.search = raw_event.search;
this.time = raw_event.time;
this.time_ad = raw_event.ad;
this.desc = raw_event.desc;
this.point = new GLatLng(raw_event.popup.lat, raw_event.popup.lng);
};
function BigEvent(raw_event) {
var me = this;
this.id = raw_event.id
this.name = raw_event.name;
this.element_ids = raw_event.element_ids;
this.event_ids = raw_event.event_ids;
this.time = raw_event.time;
this.time_ad = raw_event.ad;
this.desc = raw_event.desc;
this.pic = raw_event.pic;
this.is_details_shown = false;
this.details = null;
this.images = raw_event.images;
this.center = new GLatLng(raw_event.center.lat, raw_event.center.lng);
var genNode = function() {
var node = $('<div class="big-event-item"></div>');
var table = $('<table><tbody><tr></tr></tbody></table>');
var row = table.children().children();
var time_cell = $('<td class="big-event-item-time" title="' + me.time_ad + '">' + me.time + '</div>');
var link_cell = $('<td class="big-event-item-link"></td>');
row.append(time_cell);
row.append(link_cell);
row.append('<td class="big-event-item-pic"><img src="' + CN_BASE + 'icon/' + me.pic + '.gif"></td>');
node.append(table);
var event_link = $('<a href=#>' + me.name + '</a>');
event_link.click(function(){
if (me.is_details_shown) {
me.hideDetails();
} else {
me.showDetails();
}
G_MAP.updateOverlay('E', me.id);
G_MAP.setCenter(me.center, 8);
_IG_Analytics(UAACCT, '/click/eventLink/' + me.name);
return false;
});
link_cell.append(event_link);
me.details = $('<div class="big-event-detail" style="display:none;"></div>');
me.details.append($('<p>' + me.desc + '</p>'));
var imgs = $('<div class="big-event-imgs"></div>');
$.each(me.images, function(index, img_url) {
var img = $('<img src="' + img_url + '">');
imgs.append(img);
});
me.details.append(imgs);
var event_list = $('<table class="events-div"></table>');
genEventList(event_list, me.event_ids);
me.details.append(event_list);
node.append(me.details);
$('#big_event_list').append(node);
return node;
};
this.node = genNode();
this.is_shown = true;
};
BigEvent.prototype = {
showDetails: function() {
encapsulateActiveEventOrPeople(null);
this.details.show();
_IG_AdjustIFrameHeight();
this.is_details_shown = true;
CURRENT_BIG_EVENT = this.id;
},
hideDetails: function() {
this.details.hide();
_IG_AdjustIFrameHeight();
this.is_details_shown = false;
}
};
var genEventList = function(table, event_ids) {
var tbody = table.append('<tbody></tbody>').children();
$.each(event_ids, function(index, event_id){
var event = EVENT.getItem(event_id);
var row = $('<tr></tr>');
genEventItem(row, event);
tbody.append(row);
});
};
var genEventItem = function(row, event) {
var time_cell = $('<td class="events-item-time" title="' + event.time_ad + '">' + event.time + '</div>');
var link_cell = $('<td class="events-item-link"></td>');
var event_link = $('<a href=#>' + event.name + '</a>');
event_link.click(function(){
G_MAP.openInfoWindow("EVENT", event.id, event.point);
_IG_Analytics(UAACCT, '/click/eventItemLink/' + event.name);
return false;
});
link_cell.append(event_link);
row.append(time_cell);
row.append(link_cell);
};
function PeopleDigestNode(parent_node, desc, people_id) {
this.people_id = people_id;
var me = this;
var node = $('<div class="character-digest-div"></div>');
this.digest = $('<div class="character-digest-div-short">' + desc.substring(0,65) + '...</div>');
this.detail = $('<div class="character-digest-div-long" style="display:none;">' + desc + '</div>');
var show_detail = $('<a href=#>[詳細]</a>');
var hide_detail = $('<a href=#>[隱藏]</a>');
this.digest.append(show_detail);
this.detail.append(hide_detail);
show_detail.click(function(){
me.showDetail();
_IG_Analytics(UAACCT, '/click/peopleShowDetailLink/' + me.people_id);
return false;
});
hide_detail.click(function(){
me.hideDetail();
_IG_Analytics(UAACCT, '/click/peopleHideDetailLink/' + me.people_id);
return false;
});
node.append(this.digest);
node.append(this.detail);
parent_node.append(node);
};
PeopleDigestNode.prototype = {
showDetail: function() {
encapsulateActiveEventOrPeople(this.people_id);
this.detail.slideDown('fast', _IG_AdjustIFrameHeight);
this.digest.fadeOut('fast');
CURRENT_PEOPLE = this.people_id;
},
hideDetail: function() {
this.detail.slideUp('fast', _IG_AdjustIFrameHeight);
this.digest.fadeIn('fast');
}
};
function PeopleEventListNode(parent_node, event_ids, people_id, center) {
this.people_id = people_id;
var me = this;
var node = $('<div class="events-div"></div>');
this.show_events = $('<a class="events-div-show" href=#>歷史事件</a>');
this.hide_events = $('<a class="events-div-hide" style="display:none;" href=#>隱藏歷史事件</a>');
this.event_list = $('<table class="events-list" style="display:none;"></table>');
genEventList(this.event_list, event_ids);
this.show_events.click(function(){
me.showEvents();
G_MAP.updateOverlay('P', people_id);
G_MAP.setCenter(center, 7);
_IG_Analytics(UAACCT, '/click/peopleShowEventsLink/' + me.people_id);
return false;
});
this.hide_events.click(function(){
me.hideEvents();
_IG_Analytics(UAACCT, '/click/peopleHideEventsLink/' + me.people_id);
return false;
});
node.append(this.show_events);
node.append(this.hide_events);
node.append(this.event_list);
parent_node.append(node);
};
PeopleEventListNode.prototype = {
showEvents: function() {
encapsulateActiveEventOrPeople(this.people_id);
this.event_list.slideDown('fast', _IG_AdjustIFrameHeight);
this.hide_events.show();
this.show_events.hide();
CURRENT_PEOPLE = this.people_id;
},
hideEvents: function() {
this.event_list.slideUp('fast', _IG_AdjustIFrameHeight);
this.show_events.show();
this.hide_events.hide();
}
};
function PeopleNode(parent_node, people) {
this.people_id = people.id;
var me = this;
this.digest = null;
this.event = null;
this.table = $('<table class="character-item"><tbody><tr></tr></tbody></table>');
var img_node = $('<td class="character-img-div"></td>');
img_node.append('<img width=60 height=75 src="' + (people.pic == 'null' ? NULL_PIC : people.pic) + '">');
var intro_node = $('<td class="character-intro-div"></td>');
var title_node = $('<div class="character-title"></div>');
var link_node = $('<a href="#">' + people.name + '</a>' + (people.nick ? '<span>字' + people.nick + '</span>' : ''));
var gicon_node = $('<a title="搜尋" target="_blank" href="http://www.google.com.tw/search?ie=utf8&source=redcliff&q=' + encodeURIComponent(people.name) + '"><img border=0 src="' + CN_BASE + 'search_icon.gif"></a>');
var flag_node = $('<div class="character-title-img" style="background-image:url(\'' + CN_BASE + 'icon/' + FLAGS[people.kingdom] + '.gif\')"></div>');
gicon_node.click(function(){
_IG_Analytics(UAACCT, '/click/searchIcon');
return true;
});
title_node.append(flag_node);
title_node.append(link_node);
title_node.append(gicon_node);
intro_node.append(title_node);
this.digest = new PeopleDigestNode(intro_node, people.desc, people.id);
var row = this.table.children().children();
row.append(img_node);
row.append(intro_node);
var event_node = row.after('<tr><td></td><td></td></tr>').next().children(':last');
this.event = new PeopleEventListNode(event_node, people.event_ids, people.id, people.center);
link_node.click(function(){
if (!me.is_shown) {
me.extend();
G_MAP.updateOverlay('P', people.id);
G_MAP.setCenter(people.center, 7);
me.is_shown = true;
} else {
me.encapsulate();
me.is_shown = false;
}
_IG_Analytics(UAACCT, '/click/peopleLink/' + people.id);
return false;
});
parent_node.append(this.table);
this.is_shown = false;
};
PeopleNode.prototype = {
extend: function() {
encapsulateActiveEventOrPeople(this.people_id);
this.event.showEvents();
this.digest.showDetail();
CURRENT_PEOPLE = this.people_id;
},
encapsulate: function() {
this.event.hideEvents();
this.digest.hideDetail();
},
hide: function() {
this.encapsulate();
this.table.hide();
},
show: function() {
this.table.show();
}
};
function People(raw_people) {
var me = this;
this.id = raw_people.name;
this.name = raw_people.name;
this.nick = raw_people.zi;
this.birth = raw_people.birth;
this.death = raw_people.death;
this.birthplace = raw_people.birthplace;
this.desc = raw_people.desc;
this.kingdom = raw_people.kindom;
this.event_ids = raw_people.event_ids;
this.element_ids = raw_people.element_ids;
this.pic = raw_people.pic;
this.digest = null;
this.event = null;
this.center = new GLatLng(raw_people.center.lat, raw_people.center.lng);
this.node = new PeopleNode($('#character_list'), this);
this.is_shown = true;
};
People.prototype = {
showNode: function() {
if (this.is_shown)
return;
this.node.show();
this.is_shown = true;
},
hideNode: function() {
if (!this.is_shown)
return;
this.node.hide();
this.is_shown = false;
}
};
function LoadElement() {
_IG_FetchContent(URL.element_url, function(data) {
var json = eval(data);
$.each(json, function(index, element) {
ELEMENT.setItem(element.id, new Element(element));
});
LoadDone();
})
};
function LoadEvent() {
_IG_FetchContent(URL.event_url, function(data) {
var json = eval(data);
$.each(json, function(index, event) {
EVENT.setItem(event.id, new Event(event));
});
LoadBigEvent();
LoadPeople();
});
};
function LoadPeople() {
_IG_FetchContent(URL.people_url, function(data) {
var json = eval(data);
$.each(json, function(index, raw_people) {
var people = new People(raw_people)
PEOPLE.setItem(people.name, people);
PEOPLE_ARRAY.push(people);
});
LoadDone();
});
};
function LoadBigEvent() {
_IG_FetchContent(URL.big_event_url, function(data) {
var json = eval(data);
$.each(json, function(index, big_event) {
BIG_EVENT.setItem(big_event.id, new BigEvent(big_event));
});
LoadDone();
});
};
function LoadLocation() {
_IG_FetchContent(URL.location_url, function(data) {
var json = eval(data);
$.each(json, function(index, location) {
LOCATION.setItem(location.name, new Location(location));
});
LoadElement();
LoadEvent();
});
};
var LOAD_STATES = 0;
function LoadDone() {
LOAD_STATES++;
if (LOAD_STATES == 3) { // shan zhai!
makeShareButton();
$('#loading').hide();
$('#main').show();
_IG_AdjustIFrameHeight();
}
};
function _un(str) {return str.replace(/&([^;]+);/g, function(s,entity) {switch (entity) {case 'amp':return '&';case 'lt':return '<'; case 'gt':return '>';case 'quot':return '"';default:if (entity.charAt(0) == '#') {var n=Number('0' + entity.substr(1));if (!isNaN(n)){return String.fromCharCode(n);}}return s;}});};
function makeShareButton() {
if (!google || !google.share || !google.share.SharingWidget) return;
// TODO: refine the text here !!!!
var g = {
'linkText': '將此地圖分享給朋友',
'url': 'http://maps.google.com.tw/chibi/',
'title': 'Google 『赤壁之戰』 地圖',
'image': CN_BASE + 'email_logo.png',
'subject_template': _un('{FROM}邀請您來看看 Google『赤壁之戰』地圖'),
'comments_template': _un('您的朋友（{FROM}）覺得您可能對這篇文章感興趣，來看看吧：'),
'description': '赤壁之戰地圖，Google團隊再現一千八百年前的三足鼎立時代！',
'buttonStyle': 'link', 'tabs': 'email,email', 'popup': true, 'nopreview': true, 'noaddto': true
};
new google.share.SharingWidget("share_button", g);
};
var Utils = {
constructEventHtml : function(event, i) {
var html = [];
html.push('<div style="' + (i != 0 ? 'border-top:1px dashed #CCC; margin-top:5px;' : '') + '">');
html.push('<div style="font-size:14px; font-weight:bold; padding-top:10px;">' + event.name + '</div>');
html.push('<div style="color:#AAAAAA;">' + event.time + ' (' + event.time_ad + ')</div>');
html.push('<div style="color:#666666; padding:5px 0px;">' + event.desc + '</div>');
html.push('<div style="text-align:right; color:#AAA;">相關搜尋: ');
$.each(event.search, function(j, keyword) {
html.push('<a style="color:#915E00;margin-left:3px;" target=_blank href="http://www.google.com.tw/search?ie=utf8&source=redcliff&q=' + encodeURIComponent(keyword) + '">' + keyword + '</a>');
});
html.push('</div>');
html.push('</div>');
return html.join('');
},
constructInfoWindowHtml : function(events) {
var html = ['<div style="width:320px; font-size:12px; padding-right:5px;">'];
$.each(events, function(i, event){
html.push(Utils.constructEventHtml(event, i));
});
html.push('</div>');
return html.join('');
},
constructInfoWindowTabsHtml : function(events) {
var tabs = [];
$.each(events, function(i, event){
var html = ['<div style="width:320px; font-size:12px; padding-right:5px;">'];
html.push(Utils.constructEventHtml(event, 0));
html.push('</div>');
tabs.push(new GInfoWindowTab(INFOWIN_TAB_LABELS[i], html.join('')));
});
return tabs;
}
};
function RedcliffMap(node) {
var me = this;
this.gmap = new GMap2();
this.gmap.setCenter(new GLatLng(29.833, 113.618), 7, G_PHYSICAL_MAP);
this.tileLayerOverlay = new GTileLayerOverlay(
new GTileLayer(null, null, null, {
tileUrlTemplate: URL.tile_url,
isPng:true,
opacity:1.0
})
);
this.gmap.addOverlay(this.tileLayerOverlay);
};
RedcliffMap.prototype = {
changeTiles: function(opacity_val) {
// IE6 does not support opacity, so we remove the layer if opacity is 0
if (this.tileLayerOverlay != null) {
this.gmap.removeOverlay(this.tileLayerOverlay);
}
if (opacity_val < 0.01) {
this.tileLayerOverlay = null;
} else {
this.tileLayerOverlay = new GTileLayerOverlay(
new GTileLayer(null, null, null, {
tileUrlTemplate: URL.tile_url,
isPng:true,
opacity:opacity_val
})
);
this.gmap.addOverlay(this.tileLayerOverlay);
}
},
addOverlay: function(overlay) {
this.gmap.addOverlay(overlay);
},
removeOverlay: function(overlay) {
this.gmap.removeOverlay(overlay);
},
openInfoWindow: function(type, id, latlng) {
if (type == "EVENT") {
var event = EVENT.getItem(id);
var info_div = Utils.constructInfoWindowHtml([event]);
this.gmap.openInfoWindowHtml(latlng, info_div);
//this.highLightOverlay(event.element_ids);
}
if (type == "ELEMENT") {
var element = ELEMENT.getItem(id);
var events = new Array();
$.each(element.events, function(index, event_id) {
if (CURRENT_EVENT_HASH.hasItem(event_id)) {
var event = EVENT.getItem(event_id);
events.push(event);
}
});
if (events.length > 1) {
var info_tabs = Utils.constructInfoWindowTabsHtml(events);
this.gmap.openInfoWindowTabsHtml(latlng, info_tabs);
} else {
var info_div = Utils.constructInfoWindowHtml(events);
this.gmap.openInfoWindowHtml(latlng, info_div);
}
//this.highLightOverlay(id);
}
},
highLightOverlay: function(element_ids) {
$.each(element_ids, function(index, element_id) {
if (CURRENT_ELEMENT_HASH.hasItem(element_id)) {
var element = ELEMENT.getItem(element_id);
element.highLight();
HIGH_LIGHT_ELEMENT.push(element_id);
}
});
},
deHighLightOverlay: function() {
while (HIGH_LIGHT_ELEMENT.length > 0) {
var element_id = HIGH_LIGHT_ELEMENT.pop();
var element = ELEMENT.getItem(element_id);
//element.deHighLight();
}
},
setCenter: function(center, level) {
this.gmap.panTo(center);
},
clearOverlays: function() {
this.gmap.closeInfoWindow();
while (CURRENT_ELEMENT.length > 0) {
var element_id = CURRENT_ELEMENT.pop();
var elem = ELEMENT.getItem(element_id);
CURRENT_ELEMENT_HASH.removeItem(element_id);
elem.removeFromMap();
}
while (CURRENT_EVENT.length > 0) {
var event_id = CURRENT_EVENT.pop();
CURRENT_EVENT_HASH.removeItem(element_id);
}
CURRENT_OVERLAY_ID = "";
},
updateOverlay: function(type, id) {
if (type + '_' + id == CURRENT_OVERLAY_ID)
return;
CURRENT_OVERLAY_ID = type + '_' + id;
this.clearOverlays();
var element_ids;
var event_ids;
if (type == 'E') {
var big_event = BIG_EVENT.getItem(id);
element_ids = big_event.element_ids;
event_ids = big_event.event_ids;
} else {
var people = PEOPLE.getItem(id);
element_ids = people.element_ids;
event_ids = people.event_ids;
}
$.each(element_ids, function(index, element_id) {
var elem = ELEMENT.getItem(element_id);
elem.drawOnMap();
CURRENT_ELEMENT.push(element_id);
CURRENT_ELEMENT_HASH.setItem(element_id, "");
});
$.each(event_ids, function(index, event_id) {
CURRENT_EVENT.push(event_id);
CURRENT_EVENT_HASH.setItem(event_id, "");
});
}
};
function CharacterFilter() {
var filter = function() {
var shu_selected = false;
var wei_selected = false;
var wu_selected = false;
if ($('#checkbox_shu').attr('checked')) shu_selected = true;
if ($('#checkbox_wei').attr('checked')) wei_selected = true;
if ($('#checkbox_wu').attr('checked')) wu_selected = true;
$.each(PEOPLE_ARRAY, function(index, character){
if (character.kingdom == '蜀') {
if (shu_selected) character.showNode();
else character.hideNode();
}
if (character.kingdom == '魏') {
if (wei_selected) character.showNode();
else character.hideNode();
}
if (character.kingdom == '吳') {
if (wu_selected) character.showNode();
else character.hideNode();
}
});
_IG_AdjustIFrameHeight();
_IG_Analytics(UAACCT, '/click/characterFilter');
};
$('#checkbox_shu').click(filter);
$('#checkbox_wei').click(filter);
$('#checkbox_wu').click(filter);
};
// Add the handler for changing the tile option using the drop down.
function TilesSelect() {
// remove half transparent version for IE6
if (navigator.appName == 'Microsoft Internet Explorer' &&
(navigator.appVersion.indexOf('MSIE 6') > 0)) {
var sel = $('#select_tiles').get(0);
for (var i = sel.length - 1; i >= 0; i--) {
if (sel.options[i].value > 0.01 && sel.options[i].value < 0.99) {
sel.remove(i);
}
}
}
var change_tiles = function() {
var selVal = $('#select_tiles').attr('options')[$('#select_tiles').attr('options').selectedIndex].value;
G_MAP.changeTiles(selVal);
_IG_Analytics(UAACCT, '/click/tilesSelect/' + selVal);
};
$('#select_tiles').change(change_tiles);
};
function TabManager(in_tabs, active_tab) {
var tabs = new Array();
var current_tab = '';
var shiftTab = function(active_tab) {
if (active_tab == current_tab) return;
$.each([active_tab, current_tab], function(index, tab){
var tab_container = $('#' + tab + '_cnt');
var tab_item = $('#' + tab + '_tab');
var tab_parent = tab_item.parent();
if (tab == active_tab) {
tab_container.show();
tab_parent.removeClass('tab-inactive');
tab_parent.addClass('tab-active');
} else {
tab_container.hide();
tab_parent.removeClass('tab-active');
tab_parent.addClass('tab-inactive');
}
});
current_tab = active_tab;
};
$.each(in_tabs, function(index, tab){
$('#' + tab + '_tab').click(function(){
shiftTab(tab);
_IG_AdjustIFrameHeight();
_IG_Analytics(UAACCT, '/view/tab/' + tab);
return false;
});
tabs.push(tab);
});
shiftTab(active_tab);
};
function Disclaimer() {
var is_show = false;
var box = $('#disclaimer_box');
$('#disclaimer_show').click(function(){
if (is_show) {
box.hide();
is_show = false;
} else {
box.show();
is_show = true;
}
return false;
});
$('#disclaimer_close').click(function(){
box.hide();
is_show = false;
return false;
});
}
$(function(){
G_MAP = new RedcliffMap();
LoadLocation();
new TilesSelect();
new TabManager(['events', 'characters', 'vote'], 'characters');
new Disclaimer();
$('#clear_button').click(function(){
G_MAP.clearOverlays();
});
new CharacterFilter();
_IG_Analytics(UAACCT, "/view/load");
});
})();
</script>
<!-- NOTE: Add "?bpc=<radnom>" to by pass the cache for the js file. -->
]]></Content>
</Module>
- 國外的地震中心google maps 原始碼解析
<?xml version="1.0" encoding="UTF-8"?> <Module> <ModulePrefs title="Real-time Earthquakes" description="USGS Earthquakes for the past 7 days" author="Scott Haefner" author_email="shaefner@usgs.gov" author_affiliation="U.S. Geological Survey" screenshot="http://earthquake.usgs.gov/eqcenter/mapplets/ss-earthquakes.png" thumbnail="http://earthquake.usgs.gov/eqcenter/mapplets/tn-earthquakes.png" height="300"> <Require feature="sharedmap"/> <Require feature="analytics"/> </ModulePrefs> <Content type="html"> <![CDATA[ <style type="text/css"> h1 { font-size: 18px; color: #333; padding: 0; margin: 0 5px; } h2 { font-size: 14px; color: #633; padding: 0; margin: 1em 5px; } p { font-family: Georgia, serif; font-size: 12px; line-height: 18px; color: #666; padding: 0; margin: 2px 0 6px 8px; } ol { font-size: 12px; margin: 1em 1em 1em 2.5em; padding: 0; } li { margin: .4em 0; padding: 0; } img { padding-left: 10px; } </style> <h1>M 4+ Earthquakes, past 7 days</h1> <div id="content"> </div> <script type="text/javascript"> // Global variables var map = null; var eqs = []; var icons = []; var markers = []; var points = { color: { // Marker: icon color 'pasthour': 'red', 'pastday': 'orange', 'pastweek': 'yellow' }, size: { // Marker: icon size in pixels 'M1': 11, 'M2': 15, 'M3': 17, 'M4': 21, 'M5': 25, 'M6': 31, 'M7': 37, 'M8': 45, 'M9': 55 } }; function initMap() { createMap(); readMarkers(); } function createMap() { var map_center = new GLatLng(20, 170); var map_zoom = 2; var map_type = G_SATELLITE_MAP; //G_NORMAL_MAP map = new GMap2({ logoPassive:true }); map.setCenter(map_center, map_zoom, map_type); } function readMarkers() { // Fetch RSS feed var feed = "http://earthquake.usgs.gov/eqcenter/catalogs/eqs7day-M4.xml"; _IG_FetchXmlContent(feed, function(response) { if (response == null || typeof(response) != "object" || response.firstChild == null) { _gel("content").innerHTML = "<i>Invalid data.</i>"; return; } var pubDate = response.getElementsByTagName("pubDate"); var feed_pubDate = pubDate.item(0).firstChild.nodeValue; eqs = response.getElementsByTagName("item"); var html = "<p>" + eqs.length + " earthquakes on this map<br />Updated " + feed_pubDate + "</p>"; html += '<img src="http://earthquake.usgs.gov/eqcenter/mapplets/legend.png" alt="legend" />'; html += "<h2>10 Most Recent Earthquakes</h2>"; html += "<ol>"; // Loop through eq list (<item> nodes) for (var i = 0; i < eqs.length; i++) { // For each eq, get child nodes var item_nodes = eqs.item(i).childNodes; dcsubject_count = 1; // Loop through child nodes for (var j = 0; j < item_nodes.length; j++) { node = item_nodes.item(j); switch (node.nodeName) { case 'title': title = node.firstChild.nodeValue; break; case 'description': description = node.firstChild.nodeValue; break; case 'link': link = node.firstChild.nodeValue; break; case 'geo:lat': lat = parseFloat(node.firstChild.nodeValue); break; case 'geo:long': long = parseFloat(node.firstChild.nodeValue); break; case 'dc:subject': switch (dcsubject_count) { case 3: //third dc:subject tag var depth = node.firstChild.nodeValue; break; case 2: //second dc:subject tag var age = node.firstChild.nodeValue; dcsubject_count ++; break; case 1: //first dc:subject tag var mag = node.firstChild.nodeValue; dcsubject_count ++; break; } break; } } if (i < 10) { // Show first 10 earthquakes in sidebar html += '<li><a href="javascript:showBubble(' + i + ')" title="View earthquake on map">' + title + "</a></li>"; } var bubble = '<div style=\"width:250px;\"><p><strong>' + title + '</strong><br />' + description + '</p><p><a href="' + link + '" target="_new">Earthquake Details</a> »</p></div>'; var titletip = title; var icon = getIcon(age, parseInt(mag)); createMarker(lat, long, icon, titletip, bubble, i); } html += "</ol>"; // Display HTML string in <div> _gel('content').innerHTML = html; }, { refreshInterval: (60 * 5) }); // Allow Google to cache feed for only 5-minutes } // Create marker object for earthquake overlay function createMarker(lat, long, icon, titletip, bubble, count) { var marker = new GMarker(new GLatLng(lat, long), {icon:icon, title:titletip}); GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(bubble, {disableGoogleLinks:true}); }); map.addOverlay(marker); markers[count] = marker; // Save for use in sidebar link } // Set icon properties based on age, magnitude function getIcon(age, mag) { var ref = 'M' + mag + '-' + points.color[age]; if (!icons[ref]) { var center_pt = parseInt(points.size['M'+mag]/2); var icon = new GIcon(); icon.image = 'http://earthquake.usgs.gov/eqcenter/maps/images/' + ref + '.png'; icon.iconSize = new GSize(points.size['M'+mag], points.size['M'+mag]); icon.iconAnchor = new GPoint(center_pt, center_pt); icon.infoWindowAnchor = new GPoint(center_pt, center_pt); icons[ref] = icon; } return icons[ref]; } // Show bubble window when eq clicked from sidebar function showBubble(i) { GEvent.trigger(markers[i], "click"); } _IG_RegisterOnloadHandler(initMap); _IG_Analytics("UA-2265247-1", "/eqcenter/mapplets/earthquakes.xml"); </script> ]]></Content> </Module>
Attachments (14)
- big_event.json.jpg (74.5 KB) - added by jazz 15 years ago.
- element.json.jpg (81.8 KB) - added by jazz 15 years ago.
- event.json.jpg (79.3 KB) - added by jazz 15 years ago.
- location.json.jpg (32.7 KB) - added by jazz 15 years ago.
- people.json.jpg (119.6 KB) - added by jazz 15 years ago.
- redcliff.jpg (553.8 KB) - added by jazz 15 years ago.
- tabContent-1.jpg (8.7 KB) - added by jazz 15 years ago.
- bottom-button-div1.jpg (13.5 KB) - added by jazz 15 years ago.
- bottom-button-div2.jpg (67.3 KB) - added by jazz 15 years ago.
- select_tiles.jpg (15.6 KB) - added by jazz 15 years ago.
- tabContent-2.jpg (38.3 KB) - added by jazz 15 years ago.
- tabContent-3.jpg (46.6 KB) - added by jazz 15 years ago.
- tabContent-4.jpg (39.1 KB) - added by jazz 15 years ago.
- RedcliffMap.png (15.9 KB) - added by jazz 15 years ago.
Download all attachments as: .zip
