-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
111 lines (102 loc) · 4.76 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
<!DOCTYPE html>
<html>
<head>
<title>Map of Pahawang Island</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" />
<style>
html, body, #map{
height: 500px;
width: 720px;
}
/* in production, you should display attribution! DO NOT TRY THIS: */
.leaflet-control-attribution { display:important}
.tg {border-collapse:collapse;border-spacing:0;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg .tg-yw4l{vertical-align:top}
@media screen and (max-width: 767px) {.tg {width: auto !important;}.tg col {width: auto !important;}.tg-wrap {overflow-x: auto;-webkit-overflow-scrolling: touch;}}</style>
</style>
</head>
<body>
<h2>Peta Pulau Pahawang divisualisasikan menggunakan HTML + <a href="http://leafletjs.com/">leaflet.js</a></h2>
<div class="tg-wrap">
<table class="tg">
<tr>
<th class="tg-yw4l" rowspan="3">
<div id="map"></div>
<script src="https://besutkode.github.io/uni-task-2-Lidilidian/map_of_pahawang.geojson" type="text/javascript"></script>
<script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script>
<script>
var pustaPahawang=[ -5.6751072, 105.2208300];
var map = L.map('map').setView(pustaPahawang, 14);
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>, <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>)'
});
OpenTopoMap.addTo(map);
L.geoJson(mapdata, {
style: function (feature) {
return {color: feature.properties.stroke};
},
onEachFeature: function (feature, layer) {
var detailPwg = 'Name : ' + feature.properties.name + '<br>' +
'Postcode : ' + feature.properties.postcode;
if (feature.geometry.type == "LineString"){
layer.bindPopup(feature.properties.Layer);
} else if (feature.properties.place){
layer.bindPopup(detailPwg)
} else {
layer.bindPopup(feature.properties.name);
}
}
}).addTo(map);
</script>
</th>
<th class="tg-yw4l">Legenda</th>
<th class="tg-yw4l">Detail</th>
<th class="tg-yw4l">Sumber data</th>
<th class="tg-yw4l">Lisensi</th>
</tr>
<tr>
<td class="tg-yw4l">
<hr style="height: 5px;
background-color: #989898;
border: none;
">
</td>
<td class="tg-yw4l">
Batas Administratif Desa Pahawang
</td>
<td class="tg-yw4l">
Data Batas Administratif Desa Pahawang didapat dari <a href="http://portal.ina-sdi.or.id/arcgis/rest/services/IGD/RupabumiIndonesia/MapServer">Indonesian Geospatial Portal</a>
</td>
<td class="tg-yw4l">
<a href="http://www.opendefinition.org/licenses/cc-by">Creative Commons Attribution Lisence (cc-by)</a> (berdasarkan yang disebutkan oleh <a href="http://data.go.id">Portal Data Indonesia</a>)
</td>
</tr>
<tr>
<td class="tg-yw4l">
<hr style="height: 5px;
background-color: #8ae0e3;
border: none;
">
</td>
<td class="tg-yw4l">
Daerah Aliran Sungai Pulau Pahawang
</td>
<td class="tg-yw4l">
Data Daerah Aliran Sungai didapat dari <a href="http://appgis.dephut.go.id/appgis/download.aspx">APPGIS Dephut Indonesia</a>
</td>
<td class="tg-yw4l">
<a href="http://www.opendefinition.org/licenses/cc-by">Creative Commons Attribution Lisence (cc-by)</a> (berdasarkan yang disebutkan oleh <a href="http://data.go.id">Portal Data Indonesia</a>)
</td>
</tr>
</table>
</div>
<pre>Catatan : Untuk informasi lebih lanjut silahkan kunjungi repositori peta ini di : <a href="https://github.com/BesutKode/uni-task-2-Lidilidian">BesutKode/uni-task-2-Lidilidian</a></pre>
</body>
</html>