Changeset 113 for oceandb


Ignore:
Timestamp:
Nov 27, 2009, 5:23:15 PM (15 years ago)
Author:
rider
Message:
  • rider update zoomin plugin and timeline
Location:
oceandb/jQuery_Prototype
Files:
2 added
4 edited

Legend:

Unmodified
Added
Removed

  • oceandb/jQuery_Prototype/css/index.css

    r74 r113  
    1313#map-menu h3  { color: #03004D; font-size: 12px; }
    1414#map-menu ul  { background-color: #E6E6FF; }
    15 #loading      { color: #ff0000; font-szie: 14px; width: 100%; text-align: center; margin-top: 50px; }
    16 #map        { background-color: #03004D; width: 80%; height: 100%; float: right; }
     15#loading      { color: #ff0000; font-size: 14px; width: 100%; text-align: center; margin-top: 50px; }
     16#map        { background-color: #03004D; width: 80%; height: 81%; float: right; }
     17
     18/* timeline */
     19/* #timemap      { padding: lem; } */
     20#timelinecontainer      { width: 100%; height: 150px }
     21#timeline     { width: 100%; height: 100%; font-size: 12px; background: #CCCCCC; }
     22#mapcontainer { width: 100%; height: 100% }
    1723
    1824/* footer */

  • oceandb/jQuery_Prototype/css/theme/ui.all.css

    r57 r113  
    168168  z-index: 1;
    169169  opacity:.7;
    170   filter:Alpha(Opacity=70);
    171170}
    172171
    … …  
    449448  position: absolute;
    450449  z-index: -1;
    451   filter: mask();
    452450  top: -4px;
    453451  left: -4px;

  • oceandb/jQuery_Prototype/index.html

    r74 r113  
    99    <link rel="stylesheet" type="text/css" href="css/index.css" />
    1010    <link rel="stylesheet" type="text/css" href="css/theme/ui.all.css" />
    11     <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAREq2HXjZzIdAyVORbKBYMhTfzQKfMm5eNRoty1ZKt0XEeQdtXxTxlSH6lZOV7UEfIym3ft5_EnXXDw" type="text/javascript"></script>
     11    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAATvnRv2oQAxn-YPOHmliCIBQnbLOIweY0OrZ98ac3uTCYqV26WxQx_Or8GoXY6RMKDJOKObfAHorwcA" type="text/javascript"></script>
     12    <script type="text/javascript" src="http://static.simile.mit.edu/timeline/api/timeline-api.js"></script>
     13    <script src="script/timemap.js" type="text/javascript"></script>
     14    <script src="script/gzoom.js" type="text/javascript"></script>
    1215    <script src="script/jquery.js"  language="javascript"></script>
    1316    <script src="script/jquery-ui.js"  language="javascript"></script>
    1417    <script src="script/oceandb.js" language="javascript"></script>
    15   </head>
    16   <body onUnload="GUnload()">
     18
     19  <body onLoad="onLoad();" onUnload="GUnload();">
    1720    <div id="header">
    1821      <div id="main-menu">
    … …  
    2528    </div>
    2629    <div id="main">
    27       <div id="map-menu"><div id="loading"><img src="image/loading.gif"><br/><br/>正在讀取...</div></div>
    28       <div id="map"></div>
     30      <div id="map-menu"><div id="loading"><img src="image/loading.gif"></br></br>正在讀取...</div></div>
     31      <!-- <div id="map"></div> -->
     32        <div id="timemap">
     33      <div id="timelinecontainer">
     34    <div id="timeline"></div>
     35      </div>
     36      <div id="mapcontainer">
     37    <div id="map"></div>
     38      </div>
     39  </div>
    2940    </div>
    3041    <div id="footer">
    31       <div id="copyright">Copyright 2008 <a href="http://www.tori.narl.org.tw/" target="_top">TORI</a> & <a href="http://www.nchc.org.tw/" target="_top">NCHC</a>, <a href="http://www.narl.org.tw/" target="_top">NARL</a>, Taiwan</div>
     42      <div id="copyright">Copyright 2009 <a href="http://www.tori.narl.org.tw/" target="_top">TORI</a> & <a href="http://www.nchc.org.tw/" target="_top">NCHC</a>, <a href="http://www.narl.org.tw/" target="_top">NARL</a>, Taiwan</div>
    3243      <div id="logos">
    3344  <a href="http://www.tori.narl.org.tw/" target="_top"><img src="image/tori_logo.png"></a>

  • oceandb/jQuery_Prototype/script/oceandb.js

    r94 r113  
    22var ge;   // Google Earth Plugin 物件
    33var icon;
     4var tm;   // Google Map2 Timeline
    45
    56// 註冊 onReady Event
    … …  
    89
    910  // 呼叫 Google Map API 載入地圖
    10   load();
     11  onLoad();
     12  GUnload();
    1113
    1214  var PARENT_ID = [];   // 產生一個空的陣列
    … …  
    102104  // 設定地圖高度
    103105  var map_height=document.documentElement.clientHeight - 68;
     106  $('#mapcontainer').css( { height: map_height } );
    104107  $('#main').css( { height: map_height } );
    105108
    … …  
    123126  // 當改變瀏覽器大小時，重新設定地圖高度
    124127  var map_height=document.documentElement.clientHeight - 68;
     128  $('#mapcontainer').css( { height: map_height } );
    125129  $('#main').css( { height: map_height } );
    126 });
    127 
    128 function load()
    129 {
    130   if (GBrowserIsCompatible()) {
    131     // 取得 DOM 中,名稱為 map 的元件
    132     map = new GMap2(document.getElementById("map")); 
    133     // 加入左上角比例尺規控制列
    134     map.addControl(new GLargeMapControl());               
    135     // 加入左下角比例尺狀態列
    136     map.addControl(new GScaleControl());
    137     // 加入右上角"地圖","衛星","混合地圖"按鈕
    138     map.addControl(new GMapTypeControl());
    139     // 加入右上角 Google Earth 的"地球"按鈕
    140     map.addMapType(G_SATELLITE_3D_MAP);
    141     // 設定預設經緯度北緯 23.8, 東經 121, 預設比例尺 100 公里(7)
    142     map.setCenter(new GLatLng(23.8,121), 7);
    143     // 設定預設底圖為"衛星"
    144     map.setMapType(G_SATELLITE_MAP);
    145     // 產生預設 icon 圖示
    146     icon = new GIcon();
    147     icon.image  = "image/icon.png";
    148     icon.shadow = "image/icon.png";
    149     icon.iconSize = new GSize(12, 12);
    150     icon.shadowSize = new GSize(12, 12);
    151     icon.iconAnchor = new GPoint(12, 12);
    152     icon.infoWindowAnchor = new GPoint(12, 12);
    153   }
     130});         
     131             
     132function onLoad() {
     133
     134        tm = TimeMap.init({
     135  mapId: "map",               // Id of map div element (required)
     136  timelineId: "timeline",     // Id of timeline div element (required)
     137  datasets: [
     138      {
     139                id: "artists",
     140    title: "Artists",
     141    theme: TimeMapDataset.orangeTheme({eventIconPath: "./image"}),
     142    // note that the lines below are now the preferred syntax
     143    type: "basic",
     144    options: {
     145        items: [
     146      {
     147        "start" : "1981",
     148                          "end" : "2009-01-11",
     149        "point" : {
     150            "lat" : 23.8123,
     151                  "lon" : 121.123
     152         },
     153        "title" : "中央氣象局",
     154        "options" : {
     155          // set the full HTML for the info window
     156          "infoHtml": "<div class='custominfostyle'><b>中央氣象局.</div>"
     157        }
     158      },
     159      {
     160        "start" : "1991",
     161        "end" : "2010",
     162        "point" : {
     163            "lat" : 22.5234,
     164            "lon" : 120.534
     165         },
     166       "title" : "海洋科技研究中心",
     167       "options" : {
     168         // load HTML from another file via AJAX
     169         // Note that this may break in IE if you're running it with
     170         // a local file, due to cross-site scripting restrictions
     171         "infoUrl": "http://www.nchc.org.tw",
     172         "theme": TimeMapDataset.redTheme({eventIconPath: "./image"})
     173        }
     174            }, 
     175                        {
     176       "start" : "2001",
     177       "end" : "2020",
     178       "point" : {
     179           "lat" : 24.8345,
     180           "lon" : 122.845
     181        },
     182       "title" : "經濟部水利署",
     183       "options" : {
     184         // use the default title/description info window
     185         "description": "Renaissance Man",
     186         "theme": TimeMapDataset.yellowTheme({eventIconPath: "image/"})
     187        }
     188      }
     189                      ]
     190        }
     191    }   
     192      ],
     193      bandIntervals: [     
     194    Timeline.DateTime.DECADE,
     195    Timeline.DateTime.CENTURY
     196      ] 
     197  });
     198        // manipulate the timemap further here if you like
     199 
     200      if (GBrowserIsCompatible()) {
     201
     202  // 宣告 TimelineMap 的 MapID 對應到原本的 map
     203  map = tm.map; 
     204  // 取得 DOM 中,名稱為 map 的元件
     205  map = new GMap2(document.getElementById("map"));
     206  // 加入左上角比例尺規控制列
     207  map.addControl(new GLargeMapControl3D());
     208  // 鳥瞰圖
     209  map.addControl(new GOverviewMapControl());
     210  // Mouse Zoom In/Out
     211  map.enableScrollWheelZoom();
     212  // 加入左下角比例尺狀態列
     213  map.addControl(new GScaleControl());
     214  // 加入右上角"地圖","衛星","混合地圖"按鈕
     215  map.addControl(new GMapTypeControl());
     216  // Google Earth
     217  map.addMapType(G_SATELLITE_3D_MAP);
     218  // GZoom Control
     219  map.addControl(new GZoomControl(
     220        {
     221          sButtonHTML:"<img src='image/zooming.gif' />",
     222          sButtonZoomingHTML:"<img src='image/zoom.jpg' />",
     223          oButtonStartingStyle:{width:'24px',height:'24px'},
     224          sColor:'#000',
     225          nOpacity:.2,
     226          sBorder:"2px solid red",
     227          nOverlayRemoveMS:'10000',
     228          bForceCheckResize:'true'
     229        }
     230  ),new GControlPosition(G_ANCHOR_BOTTOM_LEFT,new GSize(3,3)));
     231  // 設定預設經緯度北緯 23.8, 東經 121, 預設比例尺 100 公里(7)
     232  map.setCenter(new GLatLng(23.8,121), 7);
     233  // 設定預設底圖為"衛星"
     234  map.setMapType(G_SATELLITE_MAP);
     235  // 產生預設 icon 圖示
     236  icon = new GIcon();   
     237  icon.image  = "image/icon.png";
     238  icon.shadow = "image/icon.png";
     239  icon.iconSize = new GSize(12, 12);
     240  icon.shadowSize = new GSize(12, 12);
     241  icon.iconAnchor = new GPoint(12, 12);
     242  icon.infoWindowAnchor = new GPoint(12, 12);
     243      }
    154244}
     245
Note: See TracChangeset for help on using the changeset viewer.