-
Notifications
You must be signed in to change notification settings - Fork 0
/
UASSIG.html
296 lines (254 loc) · 12.5 KB
/
UASSIG.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
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Membantu browser dalam mengidentifikasi aplikasi support dengan mobile device -->
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,width=device-width">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- Judul pada tab browser -->
<title>WebGIS</title>
<!-- Leaflet CSS Library -->
<link rel="stylesheet" href="http://unpkg.com/leaflet@1.0.2/dist/leaflet.css"/>
<!-- Leaflet JavaScript Library -->
<script src="http://unpkg.com/leaflet@1.0.2/dist/leaflet.js"></script>
<!-- Leaflet CSS Library -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css">
<style>
html, body, #map {
height: 100%;
width: 100%;
margin: 0px;
}
</style>
<style>
table { /*style untuk tabel*/
font-family: arial, sans-serif;
border-collapse: collapse;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #B6DBEE; //warna tabel
}
</style>
<style> /*untuk Title*/
.info {
padding: 6px 8px;
font: 14px/16px Arial, Helvetica, sans-serif;
background: white;
background: rgba(255,255,255,0.8);
box-shadow: 0 0 15px rgba(0,0,0,0.2);
border-radius: 5px;
}
.info h2 {
margin: 0 0 5px;
color: #777;
}
</style>
</head>
<body>
<!-- Leaflet Jquery, menarik data jquery GeoJSON-->
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<!-- Leaflet JavaScript Library -->
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"></script>
<!-- unpkg itu adalah librarynya secara online -->
<!-- HTML Block untuk menampilkan peta -->
<div id="map"></div>
<script>
/* Initial Map */
//lat, long, zoom (tampilan awal dapat dicari dari google earth)
var map = L.map('map').setView([-7.150975,110.140259],8);
/* Tile Basemap */
var openstreetmap = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
});
var OpenTopoMap = L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {
maxZoom: 17, attribution: 'Map data: © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, <a href="http://viewfinderpanoramas.org">SRTM</a> | Map style: © <a href="https://opentopomap.org">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)'
});
var Esri_WorldStreetMap = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}', {
attribution: 'Tiles © Esri — Source: Esri, DeLorme, NAVTEQ, USGS, Intermap, iPC, NRCAN, Esri Japan, METI, Esri China (Hong Kong), Esri (Thailand), TomTom, 2012'
});
var CyclOSM = L.tileLayer('https://{s}.tile-cyclosm.openstreetmap.fr/cyclosm/{z}/{x}/{y}.png', {
maxZoom: 20,
attribution: '<a href="https://github.com/cyclosm/cyclosm-cartocss-style/releases" title="CyclOSM - Open Bicycle render">CyclOSM</a> | Map data: © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
});
var Esri_NatGeoWorldMap = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer/tile/{z}/{y}/{x}', {
attribution: 'Tiles © Esri — National Geographic, Esri, DeLorme, NAVTEQ, UNEP-WCMC, USGS, NASA, ESA, METI, NRCAN, GEBCO, NOAA, iPC', maxZoom: 16
});
var Esri_WorldImagery = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
attribution: 'Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
});
var Stadia_AlidadeSmooth = L.tileLayer('https://tiles.stadiamaps.com/tiles/alidade_smooth/{z}/{x}/{y}{r}.png', {
maxZoom: 20,
attribution: '© <a href="https://stadiamaps.com/">Stadia Maps</a>, © <a href="https://openmaptiles.org/">OpenMapTiles</a> © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
});
var Esri_WorldTopoMap = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}', {
attribution: 'Tiles © Esri — Esri, DeLorme, NAVTEQ, TomTom, Intermap, iPC, USGS, FAO, NPS, NRCAN, GeoBase, Kadaster NL, Ordnance Survey, Esri Japan, METI, Esri China (Hong Kong), and the GIS User Community'
});
openstreetmap.addTo(map); //Memanggil basemap untuk ditampilkan ketika halaman dipanggil
/* GeoJSON Polygon */
var adminkabupaten = L.geoJson(null, {
style: function (feature) {
if (feature.properties.AngkaPartisipasiSekolah >=51.610 && feature.properties.AngkaPartisipasiSekolah <= 64.716 ) {
return {
opacity: 1,
color: 'black', //warna garis tepi
weight: 1.0,
fillOpacity: 0.7,
fillColor: '#2c7bb6'
}
}
if (feature.properties.AngkaPartisipasiSekolah > 64.716 && feature.properties.AngkaPartisipasiSekolah <= 68.970 ) {
return {
opacity: 1,
color: 'black', //warna garis tepi
weight: 1.0,
fillOpacity: 0.7,
fillColor: '#abd9e9'
}
}
if (feature.properties.AngkaPartisipasiSekolah > 68.970 && feature.properties.AngkaPartisipasiSekolah <= 74.692 ) {
return {
opacity: 1,
color: 'black', //warna garis tepi
weight: 1.0,
fillOpacity: 0.7,
fillColor: '#ffffbf'
}
}
if (feature.properties.AngkaPartisipasiSekolah > 74.692 && feature.properties.AngkaPartisipasiSekolah <= 80.340 ) {
return {
opacity: 1,
color: 'black', //warna garis tepi
weight: 1.0,
fillOpacity: 0.7,
fillColor: '#fdae61'
}
}
if (feature.properties.AngkaPartisipasiSekolah > 80.340 && feature.properties.AngkaPartisipasiSekolah <= 90.790 ) {
return {
opacity: 1,
color: 'black', //warna garis tepi
weight: 1.0,
fillOpacity: 0.7,
fillColor: '#d7191c'
}
}
},
/* Highlight & Popup */
onEachFeature: function (feature, layer) {
var content = "<table>" +
"<tr><th><b>Kabupaten</b> </th><td>"+feature.properties.Kabupaten+"</td> </tr>"+
"<tr><th><b>Nama Bupati</b> </th><td>"+feature.properties.Bupati+"</td> </tr>"+
"<tr><th><b>Luas Wilayah</b></th><td>"+feature.properties.luas+" hektar"+"</td> </tr>"+
"<tr><th><b>url</b></th><td>"+"<a href='"+feature.properties.url+"' target='_blank'> kunjungi website </a>"+"</td> </tr>"+
"<tr><th><b>Logo</b></th><td>"+"<img src='assets/"+feature.properties.logo+"' width='50'>"+"</td> </tr>"+
"<tr><td colspan='2'>"+feature.properties.video+"</td> </tr>"+ //jika videonya mau 2 kolom
// "<tr><th>Video</th><td>"+feature.properties.video+"</td> </tr>"+ //jika videonya mau 1 kolom
"</table>"
var tooltipcontent = "Kabupaten/Kota : " + feature.properties.Kabupaten + " <br> " + "Luas Wilayah : " + feature.properties.luas+" hektar";
layer.on({
mouseover: function (e) { //Fungsi mouse berada di atas obyek
var layer = e.target; //variabel layer
layer.setStyle({ //Highlight style
weight: 2, //Tebal garis tepi polygon
color: "#00FFFF", //Warna garis tepi polygon
opacity: 1, //Transparansi garis tepi polygon
fillColor: "yellow", //Warna tengah polygon
fillOpacity: 1, //Transparansi tengah polygon
});
adminkabupaten.bindTooltip(tooltipcontent);
},
mouseout: function (e) { //Fungsi mouse keluar dari area di atas obyek
adminkabupaten.resetStyle(e.target); //Mengembalikan style garis ke style awalnya
// map.closePopup(); //Menutup popup
},
click: function (e) { //Fungsi ketika obyek di-klik
adminkabupaten.bindPopup(content); //Popup
}
});
}
});
/* memanggil data geojson polyline */
$.getJSON("data/jawa tengah1.geojson", function (data) {
adminkabupaten.addData(data);
// map.addLayer(adminkabupaten); //adminkabupaten2 ditampilkan ketika halaman dipanggil
});
var titikkabkota = L.geoJson(null, {
pointToLayer: function (feature, latlng) {
return L.marker(latlng, {
icon: L.icon({
iconUrl: "assets/map-icon.png", //icon simbol: peletakan gambar
iconSize: [21, 21], //ukuran icon simbol
iconAnchor: [12, 24], //penempatan icon simbol
popupAnchor: [0, -4], //penempatan popup terhadap icon simbol
})
});
},
/* Popup */
onEachFeature: function (feature, layer) {
if (feature.properties) {
var content = "<table>" +
"<tr><th><b>Nama Lokasi</b> </th><td>"+feature.properties.Kantor+"</td> </tr>"+
"<tr><th><b>Nama Bupati</b> </th><td>"+feature.properties.Bupati+"</td> </tr>"+
"<tr><th><b>Alamat</b></th><td>"+feature.properties.alamat+""+"</td> </tr>"+
"<tr><th><b>Longitude</b> </th><td>"+feature.properties.longitude+"</td> </tr>"+
"<tr><th><b>Latitude</b> </th><td>"+feature.properties.latitude+"</td> </tr>"+
"<tr><th><b>url</b></th><td>"+"<a href='"+feature.properties.url+"' target='_blank'> kunjungi website </a>"+"</td> </tr>"+
"<tr><th><b>Logo</b></th><td>"+"<img src='assets/"+feature.properties.logo+"' width='50'>"+"</td> </tr>"+
"<tr><td colspan='2'>"+feature.properties.video+"</td> </tr>"+ //jika videonya mau 2 kolom
// "<tr><th>Video</th><td>"+feature.properties.video+"</td> </tr>"+ //jika videonya mau 1 kolom
"</table>"
;
layer.on({
click: function (e) { //Fungsi ketika icon simbol di-klik
titikkabkota.bindPopup(content); //content disini menmanggil content diatasnya, bisa langsung
}
});
}
}
});
/* memanggil data geojson point */
$.getJSON("data/titik kantor kabupaten jateng.geojson", function (data) {
titikkabkota.addData(data);
//map.addLayer(titikkabkota); //titikkabkota ditampilkan ketika halaman dipanggil
});
/* TITLE/JUDUL */
var title = new L.Control({position:"topright"});
/*defaultnya adlaah kanan atas*/
title.onAdd = function (map) {
this._div = L.DomUtil.create('div', 'info'); /*penghubungnya adalah div dan info*/
this.update();
return this._div;
};
title.update = function () {
this._div.innerHTML = '<h2>Peta Angka Partisipasi Sekolah<br> Provinsi Jawa Tengah </h2> Danang Bagus Wibowo | 19611156' /*Banyaknya Penduduk (Title), D.I. Yogyakarta adlaah subtitle*/
};
title.addTo(map);
/*Control Layer*/
var baseMaps = {
/*yang kuning adalah nama yang muncul, yan putih adalah nama variabel*/
'Open Street Map':openstreetmap,
'Esri WorldStreetMap': Esri_WorldStreetMap,
'CyclOSM': CyclOSM,
'Esri NatGeoWorldMap': Esri_NatGeoWorldMap ,
'Open Topo Map': OpenTopoMap,
'Esri_WorldImagery': Esri_WorldImagery,
'Stadia AlidadeSmooth': Stadia_AlidadeSmooth,
'Esri WorldTopoMap': Esri_WorldTopoMap,
};
var Layers = {
// 'Batas Administrasi' :adminkabupaten,
'Angka Partisipasi Sekolah <br> <img src="assets/legends.PNG" height="100">' : adminkabupaten,
'Titik Kantor Kabupaten' : titikkabkota,
};
var layerControl = L.control.layers(baseMaps, Layers, {collapsed:false});
layerControl.addTo(map);
</script>
</body>
</html>