/
index.html
133 lines (132 loc) · 6.37 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
<!DOCTYPE html>
<html>
<head>
<title>台南1999地圖</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<meta property="og:title" content="台南1999地圖">
<meta property="og:description" content="台南1999地圖 以台南 OPEN 1999 所開放的資料為基礎進行繪製，用來呈現當週回報資訊">
<meta property="og:type" content="website">
<meta property="og:image" content="http://kiang.github.io/tainan_1999_map/og_image.png">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" />
<link rel="stylesheet" href="css/map-icons.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;
}
.chartBlock {
height: 400px;
border: 2px solid gray;
margin-top: 15px;
padding: 2px;
}
</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">
<div class="btn-group btn-group-justified">
<a class="btn btn-primary btn-lg" id="btnPrevious" href="#" title="前一天">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="btn btn-primary btn-lg" id="btnNext" href="#" title="後一天">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
<a class="btn btn-primary btn-lg bounds-reset" href="#">
顯示全部
</a>
</div>
<h3 id="title">點選地圖圖示檢視資料</h3>
<div id="content"></div>
</div>
<div class="col-md-4 col-sm-12 col-xs-12">
過濾：
<select id="requestFilter" class="col-md-8 pull-right">
<option value="">全部顯示</option>
<option value="違規停車">違規停車</option>
<option value="路燈故障">路燈故障</option>
<option value="噪音舉發">噪音舉發</option>
<option value="騎樓舉發">騎樓舉發</option>
<option value="道路維修">道路維修</option>
<option value="交通運輸">交通運輸</option>
<option value="髒亂及汙染">髒亂及汙染</option>
<option value="民生管線">民生管線</option>
<option value="動物救援">動物救援</option>
</select>
<hr />
<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> </p>
</div>
<div style="text-align: center;">
<a href="https://github.com/kiang/tainan_1999_map" target="_blank">網站原始碼</a> |
<a href="http://1999.tainan.gov.tw/" target="_blank">資料來源</a>
</div>
</div>
<div id="dialog"></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="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-csv/0.71/jquery.csv-0.71.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script>
<script src="//maps.googleapis.com/maps/api/js?v=3"></script>
<script src="//rawgit.com/flatiron/director/master/build/director.min.js"></script>
<script src="js/map-icons.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>