Changes between Initial Version and Version 1 of oid/WorkLog/09-02-04

Timestamp:

Feb 4, 2009, 2:17:08 PM (17 years ago)

Author:

jazz

Comment:

--

oid/WorkLog/09-02-04

@@ +1 @@
+= 2009-02-04 =
+
+ * 原本 waue 發表的[wiki:oid/WorkLog/GoogleMPL Google Map的網址模組轉換]，在官方的名稱為 [http://code.google.com/intl/zh-TW/apis/maps/documentation/mapplets/ Google Mapplets API]
+ * "赤壁"原始碼 - http://code.google.com/p/redcliff/source/checkout
+{{{
+svn checkout http://redcliff.googlecode.com/svn/trunk/ redcliff-read-only
+}}}
+   * [[Image(redcliff.jpg)]]
+   * [[Image(people.json.jpg)]]
+   * [[Image(big_event.json.jpg)]]
+   * [[Image(event.json.jpg)]]
+   * [[Image(location.json.jpg)]]
+   * [[Image(element.json.jpg)]]
+ * [http://maps.google.com/maps/mpl?moduleurl=http://earthquake.usgs.gov/eqcenter/mapplets/earthquakes.xml 國外的地震中心google maps] 原始碼解析
+{{{
+#!js
+<?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> &raquo;</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>
+}}}