-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
179 lines (165 loc) · 11.1 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
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="WebGIS Cluster Diagram - Data Sebaran Sekolah di Indonesia">
<meta name="keywords" content="webgis, cluster, diagram, sebaran, sekolah, Indonesia">
<title>Cluster Diagram</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"
integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
crossorigin=""/>
<link href='https://unpkg.com/leaflet.markercluster@1.3.0/dist/MarkerCluster.css' rel='stylesheet' />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css"
integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp"
crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet.locatecontrol/dist/L.Control.Locate.min.css" />
<!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"> -->
<!-- <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css"> -->
<link rel="stylesheet" type="text/css" href="assets/css/L.Control.MousePosition.css"/>
<link rel="stylesheet" type="text/css" href="assets/css/L.Control.ZoomBar.css"/>
<link rel="stylesheet" type="text/css" href="assets/css/Control.MiniMap.css"/>
<link rel="stylesheet" type="text/css" href="assets/css/leaflet-sidebar.css"/>
<link rel="stylesheet" type="text/css" href="assets/css/ihover.css"/>
<link rel="shortcut icon" href="assets/images/logo.png"/>
<link rel="stylesheet" href="assets/css/style.css" />
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-TD4LH4X5WX"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-TD4LH4X5WX');
</script>
</head>
<body>
<div id="sidebar" class="sidebar collapsed">
<!-- Nav tabs -->
<div class="sidebar-tabs">
<ul role="tablist">
<li><a href="#home" role="tab"><i class="fa fa-bars"></i></a></li>
<li><a href="#profile" role="tab"><i class="fa fa-info"></i></a></li>
<li><a href="#legenda" role="tab"><i class="fa fa-map"></i></a></li>
<li><a href="https://www.youtube.com/channel/UCTiE-IYGCZehFW43Vo7r03A" target="_blank" role="tab"><i class="fab fa-youtube"></i></a></li>
<li><a href="https://github.com/rifkifau" role="tab" target="_blank"><i class="fab fa-github"></i></a></li>
</ul>
<ul role="tablist">
<li><a href="#settings" role="tab"><i class="fa fa-copyright"></i></a></li>
</ul>
</div>
<!-- Tab panes -->
<div class="sidebar-content">
<div class="sidebar-pane" id="home">
<h1 class="sidebar-header">
WebGIS Sebaran Sekolah
<span class="sidebar-close"><i class="fa fa-caret-left"></i></span>
</h1>
<p class="tekssidebar">WebGIS ini secara garis besar dibangun menggunakan library Leaflet JS. Adapun ide pembuatannya diperoleh dari project 'Markercluster pie charts' yang dibuat oleh <a href="http://bl.ocks.org/gisminister/10001728">Bård Romstad</a>. Secara sederhana, project tersebut dapat dimanfaatkan untuk memvisualisasikan data spasial berupa titik (point) yang kompleks dan jumlahnya banyak.</p>
<br>
<p class="tekssidebar">Pada projectnya, Romstad menggunakan data kecelakaan yang diklasifikasikan berdasarkan kendaraan dan tingkat luka/kerusakan yang diakibatkan. Sedangkan dalam WebGIS ini data yang coba dimainkan adalah sebaran sekolah tingkat SMA, SMK, dan MA yang dibedakan berdasarkan kepemilikannya, apakah swasta atau negeri.</p>
<br>
<p class="tekssidebar">Data sebaran sekolah diperoleh dari GIS Server milik Kementerian Dalam Negeri. Adapun penglasifikasian menjadi SMA, SMK, dan Madrasah serta negeri dan swasta dilakukan secara manual. Hasil klasifikasi yang kemudian ditampilkan dalam WebGIS ini tidak sepenuhnya akurat dan update. Hal ini selain karena klasifikasi dilakukan secara singkat juga karena atribut data sebaran sekolah dari Kementerian Dalam Negeri kurang lengkap dan detail.</p>
<br>
<p class="tekssidebar">Di lain sisi, tampilan dan tools dipermak ulang untuk keperluan estetika dan memperkaya fitur dari webgis itu sendiri.
</div>
<div class="sidebar-pane" id="profile">
<h1 class="sidebar-header">About<span class="sidebar-close"><i class="fa fa-caret-left"></i></span></h1>
<p class="tekssidebar"><img class="imgfloat" src="assets/images/logo-150.png" alt=">Anaglyph Imagery"><a href="https://spasialkan.com/" target="_blank">Spasialkan!com</a> adalah website yang fokus memberikan konten-konten seputar dunia pemetaan, mulai dari cara perolehan data spasial (spatial data mining, dll), jenis-jenis data spasial (vektor, raster, dll), tutorial visualisasinya, hingga publikasinya (dalam bentuk webgis atau peta digital).</p>
<br>
<!-- Menggunakan style dari ihover.css -->
<div class="row">
<div class="col-sm-6">
<!-- normal -->
<div class="ih-item circle effect1"><a href="https://spasialkan.com/anaglyph-imagery/" target="_blank">
<div class="spinner"></div>
<div class="img"><img src="assets/images/about/anaglyph-imagery.png" alt=">Anaglyph Imagery"></div>
<div class="info">
<div class="info-back">
<h3>Anaglyph Imagery</h3>
<!-- <p>Description goes here</p> -->
</div>
</div></a></div>
<!-- end normal -->
</div>
<div class="col-sm-6">
<!-- colored -->
<div class="ih-item circle colored effect1"><a href="https://spasialkan.com/other-online-maps-webgis-indonesia" target="_blank">
<div class="spinner"></div>
<div class="img"><img src="assets/images/about/webgis-interaktif.png" alt="WebGIS Interaktif"></div>
<div class="info">
<div class="info-back">
<h3>WebGIS Interaktif</h3>
<!-- <p>Description goes here</p> -->
</div>
</div></a>
</div>
<!-- end colored -->
</div>
</div>
<br>
<div class="row">
<div class="col-sm-6">
<!-- normal -->
<div class="ih-item circle effect1"><a href="https://spasialkan.com/spatial-data-mining/" target="_blank">
<div class="spinner"></div>
<div class="img"><img src="assets/images/about/data-mining.png" alt="Spatial Data Mining"></div>
<div class="info">
<div class="info-back">
<h3>Spatial Data Mining</h3>
<!-- <p>Description goes here</p> -->
</div>
</div></a></div>
<!-- end normal -->
</div>
<div class="col-sm-6">
<!-- colored -->
<div class="ih-item circle colored effect1"><a href="https://spasialkan.com/3d-animation-maps/" target="_blank">
<div class="spinner"></div>
<div class="img"><img src="assets/images/about/animasi-3d.png" alt="WebGIS Animasi 3D"></div>
<div class="info">
<div class="info-back">
<h3>WebGIS Animasi 3D</h3>
<!-- <p>Description goes here</p> -->
</div>
</div></a></div>
<!-- end colored -->
</div>
</div>
</div>
<div class="sidebar-pane" id="legenda">
<h1 class="sidebar-header">Legenda<span class="sidebar-close"><i class="fa fa-caret-left"></i></span></h1>
<p class="tekssidebar">Kepemilikan Sekolah</p>
<ul>
<li>
<img src="assets/images/negeri.png" alt="N">
<span class="tekssidebar"> --> Negeri</span>
</li>
<li>
<img src="assets/images/swasta.png" alt="S">
<span class="tekssidebar"> --> Swasta</span>
</li>
</ul>
</div>
<div class="sidebar-pane" id="settings">
<h1 class="sidebar-header">Copyright<span class="sidebar-close"><i class="fa fa-caret-left"></i></span></h1>
<p class="tekssidebar">© Copyright <a href="https://spasialkan.com/" target="_blank">Spasialkan!com</a> 2018 - Thanks to <a href="http://bl.ocks.org/gisminister/10001728">Bård Romstad</a></p>
<br>
</div>
</div>
</div>
<div id="map" class="sidebar-map"></div>
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"
integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
crossorigin=""></script>
<script src='https://unpkg.com/leaflet.markercluster@1.3.0/dist/leaflet.markercluster.js'></script>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="https://cdn.jsdelivr.net/npm/leaflet.locatecontrol/dist/L.Control.Locate.min.js" charset="utf-8"></script>
<script type="text/javascript" src="assets/js/L.Control.MousePosition.js"></script>
<script type="text/javascript" src="assets/js/L.Control.ZoomBar.js"></script>
<script type="text/javascript" src="assets/js/Control.MiniMap.js"></script>
<script type="text/javascript" src="assets/js/leaflet-sidebar.js"></script>
<!-- <div id="container"> -->
<!-- <div id="map" /> -->
<!-- </div> -->
<script type="text/javascript" src="assets/js/data.js"></script>
</body>
</html>