Jawaban Tugas UTS Gis Kecamatan Lombok Tengah

Jawaban Tugas UTS Gis
Nama : kiki haerani
Nim : SI17200053
Prodi Sistem Informasi
Matkul: Sistem Informasi Geografis
File index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>MINIMAP KECAMATAN</title>

<link rel="stylesheet" href="src/leaflet.css">

<script src="src/leaflet.js"></script>
<script src="geojson/Kecamatan.js" type="text/javascript"></script>
<style>
body,html{
padding: 0px;
margin: 0px;
height: 100%;
width: 100%;
#minimap{
height: 100%;
width: 100%;
.leaflet-popup-content {
width:auto !important;
</style>
</head>
<body>
<div id="minimap"></div>
<script>
var mbAttr = 'Map data © <a

href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
' © <a href="https://www.jihadul4kbar.github.io/">Jihadul

Akbar</a>',
mbUrl =
'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1Ijoiaml
oYWR1bDRrYmFyIiwiYSI6ImNqZ3lzOXpmaDA0bGQzMnJveGh5eW5lZjgifQ.IrF
oCdc8VtGPQEzUFPqG_A';
var streets = L.tileLayer(mbUrl, {id: 'mapbox.streets', attribution: mbAttr}),
grayscale = L.tileLayer(mbUrl, {id: 'mapbox.light', attribution: mbAttr});
traffic = L.tileLayer(mbUrl, {id:'mapbox.mapbox-terrain-v2',

attribution:mbAttr});
jalanv8 = L.tileLayer(mbUrl, {id:'mapbox.mapbox-streets-v8',

attribution:mbAttr});
satellite = L.tileLayer(mbUrl, {id:'mapbox.satellite', attribution:mbAttr});
var map = L.map('minimap', {
center: [-8.6873968, 116.2817962],
zoom: 14,
layers: [ streets]
});
var mapIcon = L.Icon.extend({
options: {
iconSize: [33, 38],
iconAnchor: [22, 94],
popupAnchor: [-5, -90]
});
var kantorIcon = new mapIcon({iconUrl: 'icon/embassy.png'}),

kesehatanIcon = new mapIcon({iconUrl: 'icon/hospital-building.png'}),
tamanbermainIcon = new mapIcon({iconUrl: 'icon/playground.png'}),
pemerintahIcon = new mapIcon({iconUrl: 'icon/temple-2.png'}),
keamananIcon = new mapIcon({iconUrl: 'icon/police.png'}),
wadukIcon = new mapIcon({iconUrl: 'icon/river-2.png'});
var camat1 = L.marker([-

8.6128812,116.3103311],{icon:kantorIcon}).addTo(map).bindPopup("Kantor Camat
Batukliang <img src='img/batkel.png' alt='Kantor Camat Batukliang'
width='350px'/>");

Batukliang Utara <img src='img/batkelut.png' alt='Kantor Camat Batukliang Utara'
width='350px'/>");

Janapria <img src='img/janapria.png' alt='Kantor Camat Janapria' width='350px'/> ");

Jonggat <img src='img/jonggat.png' alt='Kantor Camat Jonggat' width='350px'/> ");

Kopang <img src='img/kopang.png' alt='Kantor Camat Kopang' width='350px'/>");

Praya <img src='img/praya.png' alt='Kantor Camat Praya' width='350px'/>");

Praya Barat <img src='img/prabar.png' alt='Kantor Camat Praya Barat'
width='350px'/>");

Praya Barat Daya <img src='img/prabarda.png' alt='Kantor Camat Praya Barat Daya'
width='350px'/>");

Praya Tengah <img src='img/prateng.png' alt='Kantor Camat Praya Tengah'
width='350px'/>");

Praya Timur <img src='img/pratim.png' alt='Kantor Camat Praya Timur'
width='350px'/>");

Pringgarata <img src='img/pringgarata.png' alt='Kantor Camat Pringgarata'
width='350px'/>");

Pujut <img src='img/pujut.png' alt='Kantor Camat Pujut' width='350px'/> ");
var kesehatan1 = L.marker([-

8.7019832,116.2958626],{icon:kesehatanIcon}).addTo(map).bindPopup("RSUD
Praya <img src='img/rsud.png' alt='RSUD Praya' width='350px'/>");
var kesehatan2 = L.marker([-

8.7060444,116.2726082],{icon:kesehatanIcon}).addTo(map).bindPopup("Puskesmas
Praya <img src='img/puskesmas.png' alt='Puskesmas Praya' width='350px'/>");
var pemerintahan = L.marker([-

8.7061917,116.2691035],{icon:pemerintahIcon}).addTo(map).bindPopup("Kantor
Bupati Lombok Tengah <img src='img/bupati.png' alt='Kantor Bupati Lombok
Tengah' width='350px'/>");
var keamanan = L.marker([-
8.7093713,116.2793799],{icon:keamananIcon}).addTo(map).bindPopup("Polres
Lombok Tengah <img src='img/polres.png' alt='Polres Lombok Tengah'
width='350px'/>");
var waduk1 = L.marker([-

8.7320897,116.2726254],{icon:wadukIcon}).addTo(map).bindPopup("Bendungan
Batujai <img src='img/batujai.png' alt='Bendungan Batujai' width='350px'/>");
var waduk2 = L.marker([-

8.7575494,116.1880415],{icon:wadukIcon}).addTo(map).bindPopup("Bendungan
Pengge <img src='img/pengge.png' alt='Bendungan Pengge' width='350px'/>");
var taman1 = L.marker([-

8.71399106,116.2869397],{icon:tamanbermainIcon}).addTo(map).bindPopup("Tama
n Biao <img src='img/biao.png' alt='Taman Biao' width='350px'/>");

8.7141343,116.2639882],{icon:tamanbermainIcon}).addTo(map).bindPopup("Tonje
ng Beru Semart Garden <img src='img/tonjeng.png' alt='Tonjeng Beru Semart
Garden' width='350px'/>");

8.7045539,116.2712998],{icon:tamanbermainIcon}).addTo(map).bindPopup("Alun-
Alun Tastura <img src='img/alunalun.png' alt='Alun-Alun Tastura'
width='350px'/>");
var camat = L.layerGroup([camat1, camat2, camat3, camat4, camat5, camat6,

camat7, camat8, camat9, camat10, camat11, camat12]);
var taman = L.layerGroup([taman3, taman2,taman1]);
var waduk = L.layerGroup([waduk1, waduk2]);
var kesehatan = L.layerGroup([kesehatan1, kesehatan2]);
var keamanan = L.layerGroup(keamanan);

var pemerintahan = L.layerGroup(pemerintahan);
var baseLayers = {
"Jalan": streets,
"Hitam Putih": grayscale,
"Trapik": traffic,
"Jalanv8": jalanv8,
"Satellite": satellite,
};
var overlays = {
"Kantor Camat": camat,
"taman " : taman,
"waduk ": waduk,
"Rumah Sakit" : kesehatan,
"Kantor Keamanan": keamanan,
};
L.control.layers(baseLayers, overlays).addTo(map);
L.geoJSON([peraya, jonggat, Batkelut, Batkel,Janapria, Kopang, Narmada, Prabar,

Prabarda, Prateng, Pratim, pringgarata, Pujut ], {
style: function (feature) {
return feature.properties && feature.properties.style;

}
}).addTo(map);
</script>
</body>
</html>
Hasil
Link github : https://github.com/kikihaerani/Minimap_UTS.git

Jawaban Tugas UTS Gis Kecamatan Lombok Tengah

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Jawaban Tugas UTS Gis Kecamatan Lombok Tengah

Uploaded by

Copyright:

Available Formats

Jawaban Tugas UTS Gis

Nama : kiki haerani

Prodi Sistem Informasi

Matkul: Sistem Informasi Geografis

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<link rel="stylesheet" href="src/leaflet.css">

<script src="geojson/Kecamatan.js" type="text/javascript"></script>

var mbAttr = 'Map data &copy; <a

' &copy; <a href="https://www.jihadul4kbar.github.io/">Jihadul

var streets = L.tileLayer(mbUrl, {id: 'mapbox.streets', attribution: mbAttr}),

grayscale = L.tileLayer(mbUrl, {id: 'mapbox.light', attribution: mbAttr});

traffic = L.tileLayer(mbUrl, {id:'mapbox.mapbox-terrain-v2',

jalanv8 = L.tileLayer(mbUrl, {id:'mapbox.mapbox-streets-v8',

satellite = L.tileLayer(mbUrl, {id:'mapbox.satellite', attribution:mbAttr});

var map = L.map('minimap', {

center: [-8.6873968, 116.2817962],

var mapIcon = L.Icon.extend({

iconSize: [33, 38],

iconAnchor: [22, 94],

popupAnchor: [-5, -90]

var kantorIcon = new mapIcon({iconUrl: 'icon/embassy.png'}),

tamanbermainIcon = new mapIcon({iconUrl: 'icon/playground.png'}),

pemerintahIcon = new mapIcon({iconUrl: 'icon/temple-2.png'}),

keamananIcon = new mapIcon({iconUrl: 'icon/police.png'}),

wadukIcon = new mapIcon({iconUrl: 'icon/river-2.png'});

var camat1 = L.marker([-

var camat2 = L.marker([-

var camat3 = L.marker([-

var camat4 = L.marker([-

var camat5 = L.marker([-

var camat6 = L.marker([-

var camat7 = L.marker([-

var camat8 = L.marker([-

var camat9 = L.marker([-

var camat10 = L.marker([-

var camat11 = L.marker([-

var camat12 = L.marker([-

var kesehatan1 = L.marker([-

var kesehatan2 = L.marker([-

var pemerintahan = L.marker([-

var waduk1 = L.marker([-

var waduk2 = L.marker([-

var taman1 = L.marker([-

var taman2 = L.marker([-

var taman3 = L.marker([-

var camat = L.layerGroup([camat1, camat2, camat3, camat4, camat5, camat6,

var taman = L.layerGroup([taman3, taman2,taman1]);

var waduk = L.layerGroup([waduk1, waduk2]);

var kesehatan = L.layerGroup([kesehatan1, kesehatan2]);

var keamanan = L.layerGroup(keamanan);

"Hitam Putih": grayscale,

"Kantor Camat": camat,

"taman " : taman,

"waduk ": waduk,

"Rumah Sakit" : kesehatan,

"Kantor Keamanan": keamanan,

L.geoJSON([peraya, jonggat, Batkelut, Batkel,Janapria, Kopang, Narmada, Prabar,

style: function (feature) {

return feature.properties && feature.properties.style;

var mbAttr = 'Map data © <a

' © <a href="https://www.jihadul4kbar.github.io/">Jihadul