Changes between Initial Version and Version 1 of oid/WorkLog/GoogleMPL

Timestamp:

Jan 21, 2009, 5:54:01 PM (15 years ago)

Author:

waue

Comment:

--

oid/WorkLog/GoogleMPL

@@ +1 @@
+
+
+透過Google API可以自行定義客製化地圖資料，為了實現海洋資料庫，可以參考做的不錯的 赤壁地圖：
+
+http://maps.google.com.tw/maps/mpl?moduleurl=http://redcliff.googlecode.com/svn/trunk/mapplet/redcliff_tc.xml&t=p&utm_campaign=zh_TW&utm_medium=mapshpp&utm_source=zh_TW-mapshpp-apac-tw-gns-mp&utm_term=redc
+
+屏除美工部份，技術部份除了用到jquery, json, javascript 等，在google map裡有個mpl的module url轉址功能，可以直接讓你要的程式掛在預設的google map中， '''''mpl?moduleurl=網址''''' 網址的部份可以轉到我們的網站，就可以直接套用了
+
+一個比較簡單的範例如下：
+
+[http://maps.google.com/maps/mpl?moduleurl=http://earthquake.usgs.gov/eqcenter/mapplets/earthquakes.xml http://maps.google.com/maps/mpl?moduleurl=http://earthquake.usgs.gov/eqcenter/mapplets/earthquakes.xml]
+
+{{{
+#!javascript
+<?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>
+}}}