-
Notifications
You must be signed in to change notification settings - Fork 10
/
index.html
160 lines (158 loc) · 8.77 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<!DOCTYPE html>
<html>
<head>
<title>台灣2019登革熱地圖</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<meta property="og:title" content="台灣2019登革熱地圖">
<meta property="og:description" content="台灣2019登革熱地圖以高雄登革熱地圖為基礎修改，以村里界圖呈現最新的登革熱疫情統計">
<meta property="og:type" content="website">
<meta property="og:image" content="http://kiang.github.io/TainanDengueMap/og_image_0821.png">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style>
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#map-canvas {
height: 100%;
width: 100%;
}
#histogram {
height: 40%;
width: 100%;
min-height: 300px;
}
#myTabContent {
height: 85%;
width: 100%;
min-height: 300px;
}
#title {
text-align: center;
padding: 10px;
}
.colorBox {
width: 1em;
height: 1em;
border: 1px solid #34495E;
display: inline-block;
margin: 0 3px;
}
</style>
</head>
<body>
<script>
(function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id))
return;
js = d.createElement(s);
js.id = id;
js.src = "//connect.facebook.net/zh_TW/sdk.js#xfbml=1&appId=1393405437614114&version=v2.3";
fjs.parentNode.insertBefore(js, fjs);
}(document, "script", "facebook-jssdk"));
</script>
<div class="container">
<div class="row">
<p class="hidden-sm hidden-xs"> </p>
<div id="map-canvas" class="col-md-12"></div>
<div id="detail" class="col-md-12">
<div class="col-md-8 col-sm-12 col-xs-12">
<h3 id="title"></h3>
<div>病例數
<span class="colorBox" style="background-color: white;"></span> 0
<span class="colorBox" style="background-color: green;"></span> 1~2
<span class="colorBox" style="background-color: yellow;"></span> 3~10
<br class="hidden-md hidden-lg">
<span class="colorBox" style="background-color: orange;"></span> 11~20
<span class="colorBox" style="background-color: red;"></span> 21~50
<span class="colorBox" style="background-color: purple;"></span> >51~100
<br class="hidden-md hidden-lg">
<span class="colorBox" style="background-color: darkblue;"></span> 101~200
<span class="colorBox" style="background-color: black;"></span> >200
</div>
<div style="float: right;">快速定位
<div class="btn-group">
<a href="#" class="btn btn-default" onclick="map.setCenter({lat: 25.053699, lng: 121.507837});
return false">台北</a>
<a href="#" class="btn btn-default" onclick="map.setCenter({lat: 24.752504, lng: 121.771097});
return false">宜蘭</a>
<a href="#" class="btn btn-default" onclick="map.setCenter({lat: 24.804498, lng: 120.988528});
return false">新竹</a>
<a href="#" class="btn btn-default" onclick="map.setCenter({lat: 24.167804, lng: 120.658214});
return false">台中</a>
<a href="#" class="btn btn-default" onclick="map.setCenter({lat: 23.477332, lng: 120.430085});
return false">嘉義</a><br />
<a href="#" class="btn btn-default" onclick="map.setCenter({lat: 22.996169, lng: 120.201330});
return false">台南</a>
<a href="#" class="btn btn-default" onclick="map.setCenter({lat: 22.643894, lng: 120.317828});
return false">高雄</a>
<a href="#" class="btn btn-default" onclick="map.setCenter({lat: 22.674185, lng: 120.501103});
return false">屏東</a>
<a href="#" class="btn btn-default" onclick="map.setCenter({lat: 23.999479, lng: 121.606658});
return false">花蓮</a>
<a href="#" class="btn btn-default" onclick="map.setCenter({lat: 22.793229, lng: 121.124322});
return false">台東</a>
</div>
</div>
<div class="clearfix"></div>
<hr>
<h2 id="content" class="text-muted">在地圖上滑動或點選以顯示數據</h2>
<div class="btn-group btn-group-justified">
<a class="btn btn-primary btn-lg" id="playButton1" href="#">
<span class="glyphicon glyphicon-play" style="display: none"></span> 累積病例變化
</a>
<a class="btn btn-primary btn-lg" id="playButton2" href="#">
<span class="glyphicon glyphicon-play" style="display: none"></span> 日病例變化
</a>
</div>
</div>
<div class="col-md-4 col-sm-12 col-xs-12">
<p> </p>
<div id="fb-root"></div>
<div class="fb-page" data-href="https://www.facebook.com/k.olc.tw" data-width="800" data-hide-cover="true" data-show-facepile="true" data-show-posts="false"></div>
</div>
</div>
<p class="hidden-md hidden-lg"> </p>
<div id="histogram" class="col-md-12">
<ul id="myTab" class="nav nav-tabs">
<li class="active">
<a href="#total" data-toggle="tab">台灣</a>
</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="text-muted pull-right">*點選下方長條圖示會在地圖上呈現當日病例分佈</div>
<div class="tab-pane fade in active" id="total"></div>
</div>
</div>
<p> </p>
</div>
<div id="listNoneCunli"></div>
<div style="text-align: center;">
<a href="https://github.com/kiang/TainanDengueMap">網站原始碼</a> |
<a href="http://data.gov.tw/node/21025">資料來源</a> |
<a href="https://github.com/lycheetw/KaohsiungDengueMap">程式參考</a> |
<a href="http://nidss.cdc.gov.tw/ch/NIDSS_DiseaseMap.aspx?dc=1&dt=4&disease=061">傳染病統計資料查詢系統</a>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="//maps.googleapis.com/maps/api/js?v=3&key=AIzaSyAHc3-HRqm9C4VnTyWz8ybzw7cY9GoGFRo"></script>
<script src="//code.highcharts.com/stock/highstock.js"></script>
<script src="//code.highcharts.com/stock/modules/exporting.js"></script>
<script src="./js/ColorBar.js"></script>
<script src="./js/topojson.js"></script>
<script src="main.js"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-80817009-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>