{% load static %} {% for group in user.groups.all %}
<script>
swal({
title: 'SUKSES',
text: 'Anda Login Sebagai ' + "{{group}}",
type: "success",
icon: "success",
confirmButtonColor: "#00BCD4"
})
var group = "{{group}}"
</script>
{% if group.name == 'Dinas Pekerjaan Umum dan Penataan Ruang' %}
<style>
#btn_edit_kelurahan {
display: block;
}
#btn_edit_tuplah {
display: block;
}
#btn_edit_bangunan {
display: block;
}
#btn_delete_bangunan {
display: block;
}
#btn_jalan {
display: block;
}
#btn_edit_gl {
display: block;
}
#btn_edit_adm {
display: block;
}
#btn_delete_adm {
display: block;
}
.leaflet-popup {
display: block;
}
#btn_detail_per_bang {
display: block;
}
#btn_perbaikan_bangunan {
display: block;
}
#btn_upload_tampak {
display: block;
}
</style>
{% elif group.name == 'Dinas Kependudukan dan Pencatatan Sipil' %}
<style>
#btn_edit_kelurahan {
display: block;
}
</style>
{% elif group.name == 'Dinas Kesehatan' %}
<style>
#btn_edit_rs {
display: block;
}
#btn_edit_puskes {
display: block;
}
#btn_edit_lk {
display: block;
}
</style>
{% elif group.name == 'Dinas Ketahanan Pangan' %}
<style>
#btn_edit_tuplah {
display: block;
}
</style>
{% elif group.name == 'Dinas Lingkungan Hidup' %}
<style>
#btn_edit_tuplah {
display: block;
}
#btn_edit_bangunan {
display: block;
}
#btn_delete_bangunan {
display: block;
}
#btn_jalan {
display: block;
}
#btn_edit_cb {
display: block;
}
#btn_upload_tampak {
display: block;
}
.leaflet-popup {
display: block;
}
</style>
{% elif group.name == 'Dinas Pariwisata dan Kebudayaan' %}
<style>
#btn_edit_cb {
display: block;
}
</style>
{% elif group.name == 'Dinas Pemberdayaan Masyarakat Desa' %}
<style>
#btn_edit_kelurahan {
display: block;
}
</style>
{% elif group.name == 'Dinas Pemberdayaan Perempuan dan PA' %}
<style>
#btn_edit_kelurahan {
display: block;
}
</style>
{% elif group.name == 'Dinas Kearsipan dan Perpustakaan' %}
<style>
#btn_edit_adm {
display: block;
}
</style>
{% elif group.name == 'Dinas Pendidikan' %}
<style>
#btn_edit_sp {
display: block;
}
</style>
{% elif group.name == 'Dinas Perdagangan dan Perindustrian' %}
<style>
#btn_edit_spbu {
display: block;
}
</style>
{% elif group.name == 'Dinas Perhubungan' %}
<style>
#btn_edit_st {
display: block;
}
#btn_edit_tr {
display: block;
}
</style>
{% elif group.name == 'Dinas Perikanan dan Peternakan' %}
<style>
#btn_edit_tuplah {
display: block;
}
</style>
{% elif group.name == 'Dinas Pertanian' %}
<style>
#btn_edit_tuplah {
display: block;
}
</style>
{% elif group.name == 'Dinas Perumahan dan Kawasan Permukiman' %}
<style>
#btn_edit_tuplah {
display: block;
}
#btn_edit_bangunan {
display: block;
}
#btn_delete_bangunan {
display: block;
}
#btn_upload_tampak {
display: block;
}
.leaflet-popup {
display: block;
}
</style>
{% elif group.name == 'Dinas Sosial' %}
<style>
#btn_edit_si {
display: none;
}
</style>
{% endif %}{% endfor %}
<script>
function panel_samp() {
if ($('#panel-samping').css('display') == 'block') {
// $("#panel-samping").toggleClass("move");
// $("#button_unhide_panel").toggleClass("move-btn");
// $("#thisFooter").css('left', '380px');
// $("#thisFooter").css('max-width', '900px');
// $('#button_unhide').css('right', '85px');
// $('#legenda').css('left', '380px');
// $("#legenda").css('max-width', '900px');
} else {
// $("#panel-samping").toggleClass("move");
// $("#button_unhide_panel").toggleClass("move-btn");
// $("#thisFooter").css('left', '0px');
// $("#thisFooter").css('max-width', '900px');
// $('#button_unhide').css('right', '365px');
// $('#legenda').css('left', '0px');
}
}
var toggler = document.getElementsByClassName("ceret");
var i;
for (i = 0; i < toggler.length; i++) {
toggler[i].addEventListener("click", function() {
this.parentElement.querySelector(".nasted").classList.toggle("active");
this.classList.toggle("ceret-down");
});
}
var kecamatan = "{{ kecamatan }}".replace(/'/g, '"');
var result_kec = JSON.parse("" + kecamatan + "");
var kelurahan = "{{ kelurahan }}".replace(/'/g, '"');
var result_kel = JSON.parse("" + kelurahan + "")
var geo_batas_kel = batas_desa_desa();
function batas_desa_desa() {
return L.geoJson(null, {
style: function(feature) {
return {
color: "#8E0B0B",
weight: 0.5,
opacity: 2,
fillcolor: "#F79997",
fillOpacity: 0.1
};
},
onEachFeature: function(feature, layer) {
layer.on({
click: function(e) {
if (feature.administrasi.f9 == 'NONE') {
var path_img = "static/img/image_null.jpg"
} else {
var path_img = `"static/image/kelurahan/` + feature.administrasi.f9 + `"`
}
content = `
<table class="table tasks-list">
<thead style="text-align: center;">
<tr>
<th style="padding: 0 0 0 0px;">
<img src=` + path_img + ` alt="Image" style="width: 100%;max-height: 368px;height:368"> </th>
</tr>
</thead>
<tbody>
<tr style="height: 100px;">
<th>
<div>
<h1 style="font-family: Google Sans,Roboto,Arial,sans-serif;
letter-spacing: 0;
font-weight: 400;">
<span style="font-size: x-large;
font-family: ui-serif;">
` + feature.administrasi.f2 + ` , ` + feature.administrasi.f3 + `, ` + feature.administrasi.f4 + `
</span>
</h1>
</div>
</th>
</tr>
<tr>
<th>
<label class="text-semibold" style="margin-left:10px">Informasi Umum</label>
<div>
<table>
<tr>
<th>Kode Desa</th>
<td>: ` + feature.administrasi.f1 + `</td>
</tr>
<tr>
<th>Luas Wilayah</th>
<td>: ` + feature.administrasi.f8 + `</td>
</tr>
<tr>
<th>Jumlah Penduduk</th>
<td>: ` + feature.administrasi.f6 + `</td>
</tr>
<tr>
<th>Jumlah KK</th>
<td>: ` + feature.administrasi.f7 + `</td>
</tr>
</table>
<p class="text-center" style="margin-top: 25px;">
<input class="hidden" id="kode_desa_dagri" value="` + feature.administrasi.f1 + `"></input>
<a href="/editkelurahan?kode_dagri=` + encodeURIComponent(feature.administrasi.f1) + `" class='btn
btn-default' id="btn_edit_kelurahan" style="margin-left:128px;">Edit</a>
</p>
</div>
</th>
</tr>
<tr>
<th>
<label class="text-semibold" style="margin-left:10px">Informasi Penduduk
</label>
<div>
<table>
<tr>
<th>Jumlah Laki-laki</th>
<td>: ` + feature.penduduk.f1 + `</td>
</tr>
<tr>
<th>Jumlah Perempuan</th>
<td>: ` + feature.penduduk.f2 + `</td>
</tr>
<tr>
<th>Belum Kawin</th>
<td>: ` + feature.penduduk.f3 + `</td>
</tr>
<tr>
<th>Kawin</th>
<td>: ` + feature.penduduk.f4 + `</td>
</tr>
<tr>
<th>cerai hidup</th>
<td>: ` + feature.penduduk.f5 + `</td>
</tr>
<tr>
<th>cerai mati</th>
<td>: ` + feature.penduduk.f6 + `</td>
</tr>
<tr>
<th>wajib KTP</th>
<td>: ` + feature.penduduk.f7 + `</td>
</tr>
<tr>
<th>Islam</th>
<td>: ` + feature.penduduk.f8 + `</td>
</tr>
<tr>
<th>Kristen</th>
<td>: ` + feature.penduduk.f9 + `</td>
</tr>
<tr>
<th>Katolik</th>
<td>: ` + feature.penduduk.f10 + `</td>
</tr>
<tr>
<th>Hindu</th>
<td>: ` + feature.penduduk.f11 + `</td>
</tr>
<tr>
<th>Budha</th>
<td>: ` + feature.penduduk.f12 + `</td>
</tr>
<tr>
<th>Konghucu</th>
<td>: ` + feature.penduduk.f13 + `</td>
</tr>
<tr>
<th>Kepercayaan Lain</th>
<td>: ` + feature.penduduk.f14 + `</td>
</tr>
</table>
</div>
</th>
</tr>
<tr>
<th>
<label class="text-semibold" style="margin-left:10px">Informasi Pendidikan</label>
<div>
<table>
<tr>
<th>Tidak Sekolah</th>
<td>: ` + feature.pekerjaan_pendidikan.f1 + `</td>
</tr>
<tr>
<th>Belum Tamat</th>
<td>: ` + feature.pekerjaan_pendidikan.f2 + `</td>
</tr>
<tr>
<th>Tamat SD</th>
<td>: ` + feature.pekerjaan_pendidikan.f3 + `</td>
</tr>
<tr>
<th>SLTP</th>
<td>: ` + feature.pekerjaan_pendidikan.f4 + `</td>
</tr>
<tr>
<th>SLTA</th>
<td>: ` + feature.pekerjaan_pendidikan.f5 + `</td>
</tr>
<tr>
<th>Diploma I</th>
<td>: ` + feature.pekerjaan_pendidikan.f6 + `</td>
</tr>
<tr>
<th>Diploma II</th>
<td>: ` + feature.pekerjaan_pendidikan.f7 + `</td>
</tr>
<tr>
<th>Diploma IV/Strata I</th>
<td>: ` + feature.pekerjaan_pendidikan.f8 + `</td>
</tr>
<tr>
<th>Strata II</th>
<td>: ` + feature.pekerjaan_pendidikan.f9 + `</td>
</tr>
<tr>
<th>Strata III</th>
<td>: ` + feature.pekerjaan_pendidikan.f10 + `</td>
</tr>
</table>
</div>
</th>
</tr>
<tr>
<th>
<label class="text-semibold" style="margin-left:10px">Informasi Pekerjaan</label>
<div>
<table>
<tr>
<th>Tidak Bekerja</th>
<td>: ` + feature.pekerjaan_pendidikan.f11 + `</td>
</tr>
<tr>
<th>Aparatur Pemerintah</th>
<td>: ` + feature.pekerjaan_pendidikan.f12 + `</td>
</tr>
<tr>
<th>Tenaga Pendidik</th>
<td>: ` + feature.pekerjaan_pendidikan.f13 + `</td>
</tr>
<tr>
<th>Wiraswasta</th>
<td>: ` + feature.pekerjaan_pendidikan.f14 + `</td>
</tr>
<tr>
<th>Pertanian</th>
<td>: ` + feature.pekerjaan_pendidikan.f15 + `</td>
</tr>
<tr>
<th>Tenaga Kesehatan</th>
<td>: ` + feature.pekerjaan_pendidikan.f16 + `</td>
</tr>
<tr>
<th>Pensiunan</th>
<td>: ` + feature.pekerjaan_pendidikan.f17 + `</td>
</tr>
<tr>
<th>Pegawai</th>
<td>: ` + feature.pekerjaan_pendidikan.f18 + `</td>
</tr>
<tr>
<th>Tentara</th>
<td>: ` + feature.pekerjaan_pendidikan.f19 + `</td>
</tr>
<tr>
<th>Kepolisian</th>
<td>: ` + feature.pekerjaan_pendidikan.f20 + `</td>
</tr>
<tr>
<th>Pedagang</th>
<td>: ` + feature.pekerjaan_pendidikan.f21 + `</td>
</tr>
<tr>
<th>Petani</th>
<td>: ` + feature.pekerjaan_pendidikan.f22 + `</td>
</tr>
<tr>
<th>Peternak</th>
<td>: ` + feature.pekerjaan_pendidikan.f23 + `</td>
</tr>
<tr>
<th>Nelayan</th>
<td>: ` + feature.pekerjaan_pendidikan.f24 + `</td>
</tr>
<tr>
<th>Karyawan</th>
<td>: ` + feature.pekerjaan_pendidikan.f25 + `</td>
</tr>
<tr>
<th>Buruh</th>
<td>: ` + feature.pekerjaan_pendidikan.f26 + `</td>
</tr>
<tr>
<th>Pembantu</th>
<td>: ` + feature.pekerjaan_pendidikan.f27 + `</td>
</tr>
<tr>
<th>Tukang</th>
<td>: ` + feature.pekerjaan_pendidikan.f28 + `</td>
</tr>
<tr>
<th>Pendeta</th>
<td>: ` + feature.pekerjaan_pendidikan.f29 + `</td>
</tr>
<tr>
<th>Pastor</th>
<td>: ` + feature.pekerjaan_pendidikan.f30 + `</td>
</tr>
<tr>
<th>Ustadz</th>
<td>: ` + feature.pekerjaan_pendidikan.f31 + `</td>
</tr>
<tr>
<th>Dosen</th>
<td>: ` + feature.pekerjaan_pendidikan.f32 + `</td>
</tr>
<tr>
<th>Guru</th>
<td>: ` + feature.pekerjaan_pendidikan.f33 + `</td>
</tr>
<tr>
<th>Pilot</th>
<td>: ` + feature.pekerjaan_pendidikan.f34 + `</td>
</tr>
<tr>
<th>Pengacara</th>
<td>: ` + feature.pekerjaan_pendidikan.f35 + `</td>
</tr>
<tr>
<th>Notaris</th>
<td>: ` + feature.pekerjaan_pendidikan.f36 + `</td>
</tr>
<tr>
<th>Arsitek</th>
<td>: ` + feature.pekerjaan_pendidikan.f37 + `</td>
</tr>
<tr>
<th>Akuntan</th>
<td>: ` + feature.pekerjaan_pendidikan.f38 + `</td>
</tr>
<tr>
<th>Konsultan</th>
<td>: ` + feature.pekerjaan_pendidikan.f39 + `</td>
</tr>
<tr>
<th>Dokter</th>
<td>: ` + feature.pekerjaan_pendidikan.f40 + `</td>
</tr>
<tr>
<th>Bidan</th>
<td>: ` + feature.pekerjaan_pendidikan.f41 + `</td>
</tr>
<tr>
<th>Perawat</th>
<td>: ` + feature.pekerjaan_pendidikan.f42 + `</td>
</tr>
<tr>
<th>Psikiater</th>
<td>: ` + feature.pekerjaan_pendidikan.f43 + `</td>
</tr>
<tr>
<th>Sopir</th>
<td>: ` + feature.pekerjaan_pendidikan.f44 + `</td>
</tr>
<tr>
<th>Lainnya</th>
<td>: ` + feature.pekerjaan_pendidikan.f45 + `</td>
</tr>
</table>
</div>
</th>
</tr>
</tbody>
</table>`;
$("#panel-samping").css("display", "block");
$("#button_hide_panel").css("display", "block")
// $("#thisFooter").css('left', '380px');
// $("#thisFooter").css('width', '930px');
$("#thisFooter").css('display', 'none');
$("#button_unhide").css('display', 'block')
$("#isi_panel").html(content)
panel_samp()
},
mouseover: function(e) {
var info_foot = `
<div class="col-xs-12">
<div class="row">
<div class="col-md-5" style="min-width: 300px;">
<div class="form-group">
<div>
<table>
<tr>
<th>Kode Desa</th>
<td>: ` + feature.administrasi.f1 + `</td>
</tr>
<tr>
<th>Desa/Kelurahan</th>
<td>: ` + feature.administrasi.f2 + `</td>
</tr>
<tr>
<th>Kecamatan</th>
<td>: ` + feature.administrasi.f3 + `</td>
</tr>
<tr>
<th>Kabupaten/Kota</th>
<td>: ` + feature.administrasi.f4 + `</td>
</tr>
<tr>
<th>Provinsi</th>
<td>: ` + feature.administrasi.f5 + `</td>
</tr>
<tr>
<th>Luas Wilayah</th>
<td>: ` + feature.administrasi.f10 + `</td>
</tr>
</table>
</div>
</div>
</div>
<div class="col-md-4" style="min-width: 150px;">
<div class="form-group">
<table>
<tr>
<th>Jumlah Penduduk</th>
<td>: ` + feature.administrasi.f6 + `</td>
</tr>
<tr>
<th>Jumlah KK</th>
<td>: ` + feature.administrasi.f7 + `</td>
</tr>
<tr>
<th>Jumlah Laki-laki</th>
<td>: ` + feature.penduduk.f1 + `</td>
</tr>
<tr>
<th>Jumlah Perempuan</th>
<td>: ` + feature.penduduk.f2 + `</td>
</tr>
<tr>
<tr>
<th>Jumlah Puskesmas</th>
<td>: ` + feature.poi.f1 + `</td>
</tr>
<tr>
<th>Jumlah Sekolah</th>
<td>: ` + feature.poi.f2 + `</td>
</tr>
<tr>
<th>Jumlah Sarana Ibadah</th>
<td>: ` + feature.poi.f3 + `</td>
</tr>
<tr>
</table>
</div>
</div>
<div class="" style="min-width: 150px;padding-left:50px;bottom:-128px">
<i><b>
Sumber : DUKCAPIL, 2019
</b></i>
</div>
</div>
</div>
`;
$('#info-footer').html(info_foot)
var layer = e.target;
layer.setStyle({
weight: 0.5,
Color: "#067800",
fillColor: "#067800",
});
if (!L.Browser.ie && !L.Browser.opera) {
layer.bringToFront();
}
},
mouseout: function(e) {
geo_batas_kel.resetStyle(e.target);
}
});
}
});
};
$(document).on("click", "#btn_edit_kelurahan", function() {
var map_kel = L.map('map-kelurahan', {
editable: true,
zoomControl: false,
drawControl: true
}).setView([-4.125826277307029, 104.1881561279297], 10);
mapxxx = L.tileLayer('https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}&s=Gal&apistyle=s.t:0|s.e:l|p.v:off', {
maxZoom: 22,
minZoom: 4,
}).addTo(map_kel);
$("#edit_kelurahan").css("display", "block")
var id = $("#kode_desa_dagri").val()
setTimeout(function() {
map_kel.invalidateSize();
}, 1000);
$.ajax({
url: "{% url 'apps:editkelurahan'%}",
data: {
'kode_dagri': id
},
dataType: 'json',
success: function(data) {
var ket_kel = ['kodekelurahan', 'kelurahan', 'kecamatan', 'kabupaten', 'provinsi', 'jumlahpenduduk', 'jumlahkk', 'luasdesa']
var ket_penduduk = ['jumlahlakilaki', 'jumlahperempuan', 'belumkawin', 'kawin', 'ceraihidup', 'ceraimati', 'wajibktp', 'islam', 'kristen', 'katolik', 'hindu', 'budha', 'konghucu', 'kepercayaanlain', 'u0', 'u5', 'u10', 'u15', 'u20', 'u25', 'u30', 'u35', 'u40', 'u45', 'u50', 'u55', 'u60', 'u65', 'u70', 'u75']
var ket_pendidik = ['tidaksekolah', 'belumtamat', 'tamatsd', 'tamatsltp', 'tamatslta', 'diplomai', 'diplomaiii', 'diplomaiv', 'strataii', 'strataiii', 'tidakbekerja', 'aparaturpemerintah', 'tenagapendidik', 'wiraswasta', 'pertanian', 'tenagakesehatan', 'pensiunan', 'pegawai', 'tentara', 'kepolisian', 'dosen', 'guru', 'pilot', 'pedagang', 'petani', 'peternak', 'nelayan', 'karyawan', 'buruh', 'pembantu', 'tukang', 'pendeta', 'pastor', 'ustadz', 'pengacara', 'notaris', 'arsitek', 'akuntan', 'dokter', 'bidan', 'perawat', 'psikiater', 'sopir', 'lainnya']
var result_kelurahan = data.result_poly.administrasi;
var result_penduduk = data.result_poly.penduduk;
var result_pend_pekerja = data.result_poly.pekerjaan_pendidikan;
var result_poi = data.result_poly.poi;
for (var i = 0; i < result_kelurahan.length; i++) {
$("#" + ket_kel[i] + "").val(result_kelurahan[i])
}
for (var i = 0; i < result_penduduk.length; i++) {
$("#" + ket_penduduk[i] + "").val(result_penduduk[i])
}
for (var i = 0; i < result_pend_pekerja.length; i++) {
$("#" + ket_pendidik[i] + "").val(result_pend_pekerja[i])
}
var poldit = data.result_poly;
map_kel.setView([data.avg_lo, data.avg_la], 12);
//
let lop_poly_edit = poldit['geometry']['coordinates'][0][0];
let list_poly_edit = [];
for (var i = 0; i < lop_poly_edit.length; i++) {
geoj = lop_poly_edit[i][0];
polygigi = [lop_poly_edit[i][1], lop_poly_edit[i][0]]
list_poly_edit.push(polygigi);
};
var polygon_kel = L.polygon(list_poly_edit).addTo(map_kel)
polygon_kel.enableEdit();
// var hasil = (JSON.stringify(polygon_kel.toGeoJSON()))
// $("#coordinatekel").val(hasil)
$('#btnsavevalidasi').click(function() {
var hasil = (JSON.stringify(polygon_kel.toGeoJSON()))
$("#coordinatekel").val(hasil)
})
}
})
});
$('#btnsavevalidasi').click(function() {
var ketket = ['kodekelurahan', 'kelurahan', 'kecamatan', 'kabupaten', 'provinsi', 'luasdesa', 'jumlahpenduduk', 'jumlahkk', 'jumlahlakilaki', 'jumlahperempuan', 'belumkawin', 'kawin', 'ceraihidup', 'ceraimati', 'wajibktp', 'islam', 'kristen', 'katolik', 'hindu', 'budha', 'konghucu', 'kepercayaanlain', 'u0', 'u5', 'u10', 'u15', 'u20', 'u25', 'u30', 'u35', 'u40', 'u45', 'u50', 'u55', 'u60', 'u65', 'u70', 'u75', 'tidaksekolah', 'belumtamat', 'tamatsd', 'tamatsltp', 'tamatslta', 'diplomai', 'diplomaiii', 'diplomaiv', 'strataii', 'strataiii', 'tidakbekerja', 'aparaturpemerintah', 'tenagapendidik', 'wiraswasta', 'pertanian', 'tenagakesehatan', 'pensiunan', 'pegawai', 'tentara', 'kepolisian', 'dosen', 'guru', 'pilot', 'pedagang', 'petani', 'peternak', 'nelayan', 'karyawan', 'buruh', 'pembantu', 'tukang', 'pendeta', 'pastor', 'ustadz', 'pengacara', 'notaris', 'arsitek', 'akuntan', 'dokter', 'bidan', 'perawat', 'psikiater', 'sopir', 'lainnya', 'coordinatekel']
for (var i = 0; i < ketket.length; i++) {
window[ketket[i]] = $('#' + ketket[i]).val()
}
var ketek = [kodekelurahan, kelurahan, kecamatan, kabupaten, provinsi, luasdesa, jumlahpenduduk, jumlahkk, jumlahlakilaki, jumlahperempuan, belumkawin, kawin, ceraihidup, ceraimati, wajibktp, islam, kristen, katolik, hindu, budha, konghucu, kepercayaanlain, u0, u5, u10, u15, u20, u25, u30, u35, u40, u45, u50, u55, u60, u65, u70, u75, tidaksekolah, belumtamat, tamatsd, tamatsltp, tamatslta, diplomai, diplomaiii, diplomaiv, strataii, strataiii, tidakbekerja, aparaturpemerintah, tenagapendidik, wiraswasta, pertanian, tenagakesehatan, pensiunan, pegawai, tentara, kepolisian, dosen, guru, pilot, pedagang, petani, peternak, nelayan, karyawan, buruh, pembantu, tukang, pendeta, pastor, ustadz, pengacara, notaris, arsitek, akuntan, dokter, bidan, perawat, psikiater, sopir, lainnya, coordinatekel]
var ketek_json = {}
for (var i = 0; i < ketket.length; i++) {
ketek_json[ketket[i]] = ketek[i];
}
var data = new FormData();
data.append("file", $("input[id^='file']")[0].files[0]);
data.append("csrfmiddlewaretoken", "{{ csrf_token }}");
$.each(ketek_json, function(key, value) {
data.append(key, value);
})
data.append('coordinate', hasil)
$.ajax({
url: "{% url 'api:kependudukan' %}",
data: data,
dataType: 'json',
type: 'POST',
processData: false,
contentType: false,
mimeType: "multipart/form-data",
success: function(data) {
let response = data
if (response.code == 0) {
swal({
title: response.info,
text: response.data,
type: "success",
icon: "success",
confirmButtonColor: "#00BCD4"
}).then((isok) => {
$("#modal_theme_info").css('display', 'none');
})
} else {
swal({
title: response.info,
text: response.data,
type: "warning",
icon: "error",
confirmButtonColor: "#00BCD4"
})
}
for (var i = 0; i < data['penduduk'].length; i++) {
$('#' + ketket[i]).val(data['penduduk'][i])
}
}
});
});
$('#savedatakelurahankel').click(function() {
var data = new FormData();
data.append("file", $("input[id^='file']")[0].files[0]);
data.append("csrfmiddlewaretoken", "{{ csrf_token }}");
var ket_kel = ['kodekelurahan', 'kelurahan', 'kecamatan', 'kabupaten', 'provinsi', 'luasdesa']
var ket_penduduk = ['jumlahpenduduk', 'jumlahkk', 'jumlahlakilaki', 'jumlahperempuan', 'belumkawin', 'kawin', 'ceraihidup', 'ceraimati', 'wajibktp', 'islam', 'kristen', 'katolik', 'hindu', 'budha', 'konghucu', 'kepercayaanlain', 'u0', 'u5', 'u10', 'u15', 'u20', 'u25', 'u30', 'u35', 'u40', 'u45', 'u50', 'u55', 'u60', 'u65', 'u70', 'u75']
var ket_pendidik = ['tidaksekolah', 'belumtamat', 'tamatsd', 'tamatsltp', 'tamatslta', 'diplomai', 'diplomaiii', 'diplomaiv', 'strataii', 'strataiii']
var ket_pekerja = ['tidakbekerja', 'aparaturpemerintah', 'tenagapendidik', 'wiraswasta', 'pertanian', 'tenagakesehatan', 'pensiunan', 'pegawai', 'tentara', 'kepolisian', 'dosen', 'guru', 'pilot', 'pedagang', 'petani', 'peternak', 'nelayan', 'karyawan', 'buruh', 'pembantu', 'tukang', 'pendeta', 'pastor', 'ustadz', 'pengacara', 'notaris', 'arsitek', 'akuntan', 'dokter', 'bidan', 'perawat', 'psikiater', 'sopir', 'lainnya']
var poi = []
var data_kel = []
var data_penduduk = []
var data_pendidik = []
var data_pekerjaan = []
var data_all = []
for (var i = 0; i < ket_kel.length; i++) {
data_kel.push(`
<tr>
<th>` + ket_kel[i] + `</th>
<td>` + $('#' + ket_kel[i]).val() + `</td>
</tr>`)
}
for (var i = 0; i < ket_penduduk.length; i++) {
data_penduduk.push(`
<tr>
<th>` + ket_penduduk[i] + `</th>
<td>` + $('#' + ket_penduduk[i]).val() + `</td>
</tr>`)
}
for (var i = 0; i < ket_pendidik.length; i++) {
data_pendidik.push(`
<tr>
<th>` + ket_pendidik[i] + `</th>
<td>` + $('#' + ket_pendidik[i]).val() + `</td>
</tr>`)
}
for (var i = 0; i < ket_pekerja.length; i++) {
data_pekerjaan.push(`
<tr>
<th>` + ket_pekerja[i] + `</th>
<td>` + $('#' + ket_pekerja[i]).val() + `</td>
</tr>`)
}
$("#valid-edit-kel").html(data_kel);
$("#valid-edit-penduduk").html(data_penduduk);
$("#valid-edit-pendidik").html(data_pendidik);
$("#valid-edit-pekerja").html(data_pekerjaan);
});
map.on('zoomend', function() {
var zoom = map.getZoom();
if (map.hasLayer(geo_batas_kel)) {
geo_batas_kel.eachLayer(function(layer) {
if (zoom >= 13 && (!layer.getTooltip())) {
layer.bindTooltip(layer.feature.administrasi.f2, {
sticky: true,
permanent: true,
interactive: false,
direction: 'center',
className: 'label-desa'
});
} else if (zoom < 13 && (layer.getTooltip())) {
//console.log('remove tooltip');
layer.unbindTooltip();
}
});
}
if (map.hasLayer(geo_batas_kec)) {
geo_batas_kec.eachLayer(function(layer) {
if (zoom >= 11 && (!layer.getTooltip())) {
layer.bindTooltip(`KEC. ` + layer.feature.administrasi.f2, {
sticky: true,
permanent: true,
interactive: false,
direction: 'center',
className: 'label-kec'
});
} else if (zoom < 11 && (layer.getTooltip())) {
layer.unbindTooltip();
}
});
}
});
var geo_batas_kec = L.geoJson(null, {
style: function(feature) {
return {
color: "#08c96b",
weight: 0.5,
opacity: 1,
fillcolor: "#98ff98",
fillOpacity: 0.2
};
},
onEachFeature: function(feature, layer) {
layer.on({
mouseover: function(e) {
var layer = e.target;
layer.setStyle({
weight: 0.5,
Color: "#067800",
fillColor: "#067800",
});
if (!L.Browser.ie && !L.Browser.opera) {
layer.bringToFront();
}
},
mouseout: function(e) {
geo_batas_kec.resetStyle(e.target);
}
});
}
});
function geo_json_kel(data) {
geo_batas_kel.addData(data)
}
function geo_json_kec(data) {
geo_batas_kec.addData(data)
}
geo_json_kel(result_kel);
//geo_json_jalan(result_jln)
geo_json_kec(result_kec);
function onEachFeature(feature, layer) {
if (feature.properties && feature.properties.popupContent) {
layer.bindPopup(feature.properties.popupContent);
}
}
function batasdesa() {
var checkBox = document.getElementById("batas_desa");
if (checkBox.checked == true) {
geo_batas_kel.addTo(map)
} else {
geo_batas_kel.remove()
}
}
function bataskota() {
var checkBox = document.getElementById("batas_kota");
if (checkBox.checked == true) {
geo_batas.addTo(map)
} else {
geo_batas.remove()
}
}
function bataskec() {
var checkBox = document.getElementById("batas_kec");
if (checkBox.checked == true) {
geo_batas_kec.addTo(map)
} else {
geo_batas_kec.remove()
}
}
function batasall() {
var checkBox = document.getElementById("batas_all");
if (checkBox.checked == true) {
document.getElementById("batas_kec").checked = true;
document.getElementById("batas_kota").checked = true;
document.getElementById("batas_desa").checked = true;
geo_batas_kec.addTo(map)
geo_batas.addTo(map)
geo_batas_kel.addTo(map)
} else {
document.getElementById("batas_kec").checked = false;
document.getElementById("batas_kota").checked = false;
document.getElementById("batas_desa").checked = false;
geo_batas_kec.remove()
geo_batas_kel.remove()
geo_batas.remove()
}
}
var search_desa = batas_desa_desa();
function geo_json_search(data) {
search_desa.addData(data)
}
$("#search_desa").keyup(function() {
var search = $(this).val();
$.ajax({
url: "{% url 'api:search'%}",
data: {
'namadesa': search
},
dataType: 'json',
success: function(response) {
var len = response['nama_des'].length;
var data_de = []
for (var i = 0; i < len; i++) {
var id = response['nama_des'][i][0];
var desa = response['nama_des'][i][1];
var kec = response['nama_des'][i][2];
var da = `<li value='` + desa + `,` + kec + `'>` + desa + `,` + kec + `</li>`;
data_de.push(da)
}
$("#searchResult").html(data_de);
// binding click event to li
$("#searchResult li").bind("click", function() {
setsearch(this);
});
}
})
});
//3d begin
function setsearch(element) {
var value = $(element).text();
var id = $(element).val();
$("#search_desa").val(value);
$("#searchResult").empty();
$.ajax({
url: "{% url 'api:ressearch' %}",
data: {
'id_desa_search': id
},
dataType: 'json',
success: function(response) {
console.log(response)
}
});
}
function overll() {
$("#offsid").css('display', 'none');
$("#sidebar").css('display', 'none');
$("#sid").css('display', 'block');
}
function normalse() {
$("#searchResult").css('display', 'none');
}
function resse() {
$("#searchResult").css('display', 'block');
}
// NEW
var legenda = ['Belukar',
'Belukar Rawa',
'Hutan Lahan Kering Primer',
'Hutan Lahan Kering Sekunder',
'Hutan Tanaman',
'Pemukiman',
'Perkebunan',
'Pertambangan',
'Pertanian Lahan Kering',
'Pertanian Lahan Kering Campur',
'Savana / Padang rumput',
'Sawah',
'Tanah Terbuka',
'Transmigrasi'
];
var color = ['#002400',
'#424200',
'#004200',
'#009e00',
'#00db00',
'#ffff00',
'#5cff5c',
'#caa677',
'#b9894b',
'#C0C0C0',
'#ffc65c',
'#ece0cf',
'#ff1fff',
'#c2a500'
]
var geo_tuplah = L.geoJson(null, {
style: function(feature) {
for (var i = 0; i < legenda.length; i++) {
var leg = legenda[i]
var warna = color[i]
if (feature.legend.f2 == legenda[i]) {
return {
color: color[i],
weight: 0.5,
opacity: 2,
fillcolor: color[i],
fillOpacity: 5
};
}
}
},
onEachFeature: function(feature, layer) {
layer.on({
click: function(e) {
if (feature.legend.f4 == 'NONE') {
var path_img = "static/img/image_null.jpg"
} else {
var path_img = `"static/image/tuplah/` + feature.legend.f4 + `"`
}
content = `
<table class="table tasks-list">
<thead style="text-align: center;">
<tr>
<th style="padding: 0 0 0 0px;">
<img src=` + path_img + ` alt="Image" style="width: 100%;max-height: 368px;height:368">
</th>
</tr>
</thead>
<tbody>
<div class= "container">
<tr style="height: 100px;">
<th>
<div>
<h1 style="font-family: Google Sans,Roboto,Arial,sans-serif;
letter-spacing: 0;
font-weight: 400;">
<span style="font-size: x-large;">
` + feature.legend.f2 + `
</span>
</h1>
</div>
</th>
</tr>
</div>
<div class= "container">
<tr>
<th>
<p>
<span>Luas Lahan : ` + feature.legend.f3 + `</span>
</p>
<p class="text-center" style="margin-top: 25px;">
<a href="#" class="btn btn-default" data-toggle="modal" data-target="#modal-edit-tuplah" id="btn_edit_tuplah" data-backdrop="static" data-keyboard="false"><i>Edit Informasi Tutupan Lahan</i></a>
</p>
</th>
</tr>
</div>
</tbody>
</table>`;
$("#isi_panel").html(content)
$('#idtuplah').val(feature.legend.f1);
$("#coordinatetuplah").val(feature.geometry);
$("#panel-samping").css("display", "block");
$("#button_hide_panel").css("display", "block");
panel_samp()
},
mouseover: function(e) {
var layer = e.target;
layer.setStyle({
weight: 0.5,
fillOpacity: 0.5
});
if (!L.Browser.ie && !L.Browser.opera) {
layer.bringToFront();
}
},
mouseout: function(e) {
geo_tuplah.resetStyle(e.target);
}
});
}
});
var geo_tuplah_edit = L.geoJson(null, {
style: function(feature) {
return {
weight: 0.5,
opacity: 2,
};
}
});
function geo_json_tuplah(data) {
geo_tuplah.addData(data)
}
function geotuplah() {
var checkBox = document.getElementById("geo_tuplah");
if (checkBox.checked == true) {
loaderPage(true);
$.ajax({
url: "{% url 'api:tuplah'%}",
dataType: 'json',
type: 'GET',
success: function(response) {
loaderPage(false);
map.setView([-4.125826277307029, 104.1881561279297], 13);
var len = response['tuplah'].length;
var data_de = []
for (var i = 0; i < response['tuplah'].length; i++) {
geoj = response['tuplah'][i][0];
data_de.push(geoj);
}
geo_json_tuplah(data_de);
}
});
$("#thisFooter").css('display', 'none');
$("#legenda").css('display', 'block');
geo_tuplah.addTo(map)
} else {
$("#button_unhide").css('display', 'block');
$("#legenda").css('display', 'none');
geo_tuplah.remove()
}
}
var map_edit_tuplah = L.map('map-edit-tuplah', {
editable: true,
zoomControl: false,
drawControl: true
}).setView([-2, 118], 5);
mapss = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
maxZoom: 22,
minZoom: 4,
}).addTo(map_edit_tuplah);
var polygon_edit_tuplah = L.polygon([
[-4.1283969, 104.1674575],
[-4.128396, 104.1674947],
[-4.1284664, 104.1674964],
[-4.1284674, 104.1674593],
[-4.1283969, 104.1674575]
]).addTo(map_edit_tuplah)
$(document).on("click", "#btn_edit_tuplah", function() {
if (map_edit_tuplah.hasLayer(polygon_edit_tuplah)) {
polygon_edit_tuplah.remove()
}
if (group == "Dinas Pekerjaan Umum dan Penataan Ruang") {
var id_poly = $('#idtuplah').val();
$.ajax({
url: "{% url 'api:edit-tuplah' %}",
data: {
'idtuplah': id_poly
},
dataType: 'json',
success: function(data) {
loaderPage(false);
let response = data
if (response.code == 0) {
setTimeout(function() {
map_edit_tuplah.invalidateSize();
}, 1000);
let lop_poly_edit = data['tuplah']['geometry']['coordinates'][0];
let list_poly_edit = [];
var latt = 0;
var longg = 0;
for (var i = 0; i < lop_poly_edit.length; i++) {
geoj = lop_poly_edit[i][0];
polygigi = [lop_poly_edit[i][1], lop_poly_edit[i][0]]
list_poly_edit.push(polygigi);
latt += lop_poly_edit[i][0]
longg += lop_poly_edit[i][1]
};
var lattt = latt / list_poly_edit.length
var longgg = longg / list_poly_edit.length
map_edit_tuplah.setView([longgg, lattt], 14);
polygon_edit_tuplah = L.polygon(list_poly_edit).addTo(map_edit_tuplah)
polygon_edit_tuplah.enableEdit();
$('#btnsavetuplah').click(function() {
var hasil = (JSON.stringify(polygon_edit_tuplah.toGeoJSON()))
$("#coordinatetuplah").val(hasil);
})
} else {
$("#modal-edit-tuplah").css('display', 'none');
swal({
title: response.info,
text: response.data,
type: "warning",
icon: "error",
confirmButtonColor: "#00BCD4"
})
}
},
})
} else {
swal({
title: "Sorry",
text: group + " Tidak memiliki akses",
type: "warning",
icon: "error",
confirmButtonColor: "#00BCD4"
})
$("#modal-edit-tuplah").css('display', 'none');
}
});
$(document).on("click", "#btnsavetuplah", function() {
var id_poly = $('#idtuplah').val();
var cord = $("#coordinatetuplah").val();
var data = new FormData();
data.append("file", $("input[id^='imgtuplah']")[0].files[0]);
data.append("csrfmiddlewaretoken", "{{ csrf_token }}");
data.append('idtuplah', id_poly)
data.append('cord', cord)
$.ajax({
url: "{% url 'api:edit-tuplah-valid' %}",
data: data,
dataType: 'json',
type: 'POST',
processData: false,
contentType: false,
success: function(data) {
loaderPage(false);
let response = data;
if (response.code == 0) {
swal({
title: response.info,
text: response.data,
type: "success",
icon: "success",
confirmButtonColor: "#00BCD4"
}, function() {
$("#modal-edit-tuplah").css('display', 'none');
})
} else {
swal({
title: response.info,
text: response.data,
type: "warning",
icon: "error",
confirmButtonColor: "#00BCD4"
})
}
}
})
});
// var geocodeService = L.esri.Geocoding.geocodeService();
// var geocoderNominatim = new L.Control.Geocoder.Nominatim();
// var geo_bangunan = L.geoJson(null, {
// style: function(feature) {
// return {
// color: "#ff0008",
// weight: 1,
// opacity: 2,
// zIndex: 1000
// };
// },
// onEachFeature: function(feature, layer) {
// if (feature.properties) {
// var lattitud, longitud;
// if (feature.geometry.type == 'MultiPolygon') {
// lattitud = feature.geometry.coordinates[0][0][0][1];
// longitud = feature.geometry.coordinates[0][0][0][0];
// } else {
// lattitud = feature.geometry.coordinates[0][0][1];
// longitud = feature.geometry.coordinates[0][0][0];
// };
// layer.on({
// click: function(e) {
// var geogeo = geocodeService.reverse().latlng(e.latlng).run(function(error, result) {
// if (result.address.Address != '') {
// var alamat = result.address.Address + `, `
// } else {
// var alamat = ''
// };
// if (feature.administrasi.f9 == 'None') {
// var path_img = "static/img/image_null.jpg"
// } else {
// var path_img = `"static/image/bangunan/` + feature.administrasi.f9 + `"`
// }
// // var list_history = feature.properties.f7
// // var list_history_panel = ``
// // for (var i = 0; i < list_history.length; i++) {
// // var dt_history = list_history[i].split(",");
// // var data_history = `<div class="form-group" style="margin-bottom:0px;">
// // <div class="row">
// // <label class="col-md-6">` + dt_history[1] + `</label>
// // <a class="col-md-3" onclick="getjalanper(` + dt_history[0] + `)"><i>View Ruas</i></a>
// // <a class="col-md-3" onclick="getdetailper(` + dt_history[0] + `)" data-toggle="modal" data-target="#modal_detail"><i>View Detail</i></a>
// // </div>
// // </div>`;
// // list_history_panel += data_history
// // };
// // history = `<p class="text-center">
// // History Perbaikan
// // </p>
// // <br>
// // ` + list_history_panel + `
// // <p class="text-center" style="margin-top: 10px;">
// // <a href="#" id='btn_perbaikan_jalan' class="btn btn-default"><i>Tambah History Perbaikan</i></a>
// // </p>`;
// content_edit = `
// <div class="modal-dialog" style="width: max-content;height: max-content;">
// <div class="modal-content">
// <div class="modal-header bg-info" style="background-color:#40777c;">
// <button type="button" class="close" data-dismiss="modal">×</button>
// <h6 class="modal-title">Edit Polygon Bangunan dan Informasinya</h6>
// </div>
// <div class="modal-body" style="max-height: 450px;overflow-y: auto;">
// <div class="row">
// <div class="col-md-5">
// <div id="map-edit" style="width:400px;height: 350px;">
// </div>
// </div>
// <div class="col-md-4">
// <input type="text" class="hidden" name="coordinatebangunan" id="coordinatebangunan" value="`+feature.geometry+`">
// <table>
// <tr>
// <th>
// Image
// </th>
// <td>
// <input type="file" id="imgbangunan" name="images[]" multiple accept="image/jpg,image/png,image/jpeg,image/gif">
// <input style="display:none;" id="gambar" type="text" class="form-control" value="`+feature.administrasi.f9+`"required>
// </td>
// </tr>
// <tr>
// <td>
// <input type="text" name="idbangunan" id="idbangunan" class="form-control hidden" value="`+feature.properties.f1+`" disable>
// <input style="display:none;" id="coordinateZoneeditbang" type="text" class="form-control" value=""required>
// </td>
// </tr>
// <tr>
// <th>Nama Bangunan</th>
// <td>
// <input type="text" name="namebangunan" id="namebangunan" class="form-control" value="`+feature.properties.f2+`">
// </td>
// </tr>
// <tr>
// <th>Informasi Bangunan</th>
// <td>
// <input type="text" name="infobangunan" id="infobangunan" class="form-control" value="`+feature.properties.f3+`">
// </td>
// </tr>
// <tr>
// <th>Kelurahan</th>
// <td>
// <input type=" text " name="nmkelurahan " id="nmkelurahan" class="form-control " value="`+feature.administrasi.f1+`">
// </td>
// </tr>
// <tr>
// <th>Kecamatan</th>
// <td>
// <input type="text " name="nmkecamatan " id="nmkecamatan" class="form-control " value="`+feature.administrasi.f2+`">
// </td>
// </tr>
// <tr>
// <th>Kab/Kota</th>
// <td>
// <input type="text " name="nmkabkota " id="nmkabkota" class="form-control " value="`+feature.administrasi.f3+`">
// </td>
// </tr>
// <tr>
// <th>Provinsi</th>
// <td>
// <input type="text " name="nmprovinsi " id="nmprovinsi" class="form-control " value="`+feature.administrasi.f4+`">
// </td>
// </tr>
// </table>
// </div>
// <div class="col-md-3 ">
// <table>
// <tr>
// <th>Luas Bangunan</th>
// <td>
// <input type="text " name="luasbangunan " id="luasbangunan" class="form-control " value="`+feature.administrasi.f6+`">
// </td>
// </tr>
// <tr>
// <th>Luas Tanah</th>
// <td>
// <input type="text " name="luastanah " id="luastanah" class="form-control " value="`+feature.administrasi.f7+`">
// </td>
// </tr>
// <tr>
// <th>Tinggi Bangunan</th>
// <td>
// <input type="text " name="tinggibangunan " id="tinggibangunan" class="form-control " value="`+feature.administrasi.f8+`">
// </td>
// </tr>
// <tr>
// <th>Pemilik</th>
// <td>
// <input type="text " name="pemilik " id="pemilik" class="form-control " value="`+feature.administrasi.f10+`">
// </td>
// </tr>
// </table>
// </div>
// </div>
// </div>
// <div class="modal-footer ">
// <button type="button " class="btn btn-link " data-dismiss="modal ">Close</button>
// <button type="button " id="btnsavebangunan" class="btn btn-info ">Save changes</button>
// </div>
// </div>
// </div>`;
// content_delete=`
// <div class="modal-dialog" style="width: max-content;height: max-content;">
// <div class="modal-content">
// <div class="modal-header bg-info" style="background-color:#40777c;">
// <table>
// <tr>
// <th><h6 class="modal-title">Delete Bangunan dan Informasinya</h6></th>
// <td><button type="button" class="close" data-dismiss="modal">×</button></td>
// </tr>
// </table>
// </div>
// <div class="form-group" style="margin-bottom:10px;">
// <div id="map-delete" style="width: 300px;height: 250px;position: relative;margin-left: 10px;margin-right: 10px;margin-top: 10px;"></div>
// <div class="form-group">
// <div class="col-lg-12" style="margin-top:10px;margin-bottom:10px;">
// <input type="text" class="hidden" name="coordinatebangunan" id="coordinatebangunanhps" value="">
// <input type="text" name="idbangunan" id="idbangunanhps" class="form-control hidden" value="`+feature.properties.f1+`" disable>
// <input type="text" name="namebangunan" id="namebangunanhps" class="form-control" value="`+feature.properties.f2+`">
// <input type="text" name="infobangunan" id="infobangunanhps" class="form-control" value="`+feature.properties.f3+`">
// </div>
// </div>
// </div>
// <div class="modal-footer">
// <button type="button" id="btnsavedeletebangunan" class="btn btn-info">Hapus</button>
// </div>
// </div>
// </div>`;
// content = `
// <table class="table tasks-list">
// <thead style="text-align: center;">
// <tr>
// <th style="padding: 0 0 0 0px;">
// <img src=` + path_img + ` alt="Image" style="width: 100%;max-height: 368px;height:368">
// </th>
// </tr>
// </thead>
// <tbody>
// <div class= "container">
// <tr style="height: 100px;">
// <th>
// <div>
// <h1 style="font-family: Google Sans,Roboto,Arial,sans-serif;
// letter-spacing: 0;
// font-weight: 400;">
// <span style="font-size: x-large;">
// ` + feature.properties.f2 + `
// </span>
// </h1>
// </div>
// </th>
// </tr>
// </div>
// <div class= "container">
// <tr style="height: 30px;">
// <th>
// <span>
// ` + feature.properties.f3 + `
// </span>
// </th>
// </tr>
// </div>
// <div class= "container">
// <tr style="height: 40px;">
// <th>
// <span>
// ` + alamat + feature.administrasi.f1 + `, ` + feature.administrasi.f2 + `, ` + feature.administrasi.f3 + `, ` + feature.administrasi.f4 + `
// </span>
// </th>
// </tr>
// </div>
// <div class= "container">
// <tr style="height: 40px;">
// <th>
// <p>
// <span>Luas Bangunan : ` + feature.administrasi.f6 + `</span>
// </p>
// <p>
// <span>Luas Tanah : ` + feature.administrasi.f7 + `</span>
// </p>
// <p>
// <span>Tinggi Bangunan : ` + feature.administrasi.f8 + `</span>
// </p>
// <p>
// <span>Pemilik : ` + feature.administrasi.f10 + `</span>
// </p>
// <p class="text-center" style="margin-top: 25px;">
// <a href="#" class="btn btn-default" data-toggle="modal" data-target="#modal_bangunan_edit" id="btn_edit_bangunan" data-backdrop="static" data-keyboard="false"><i>Edit Informasi Bangunan</i></a>
// <a href="#" id='btn_delete_bangunan' class='btn
// btn-default btn_edit_bangunan' data-toggle="modal" data-target="#modal_bangunan_delete" data-backdrop="static" data-keyboard="false"><i>Delete Bangunan</i></a>
// </p>
// </th>
// </tr>
// </div>
// <div class="container">
// <tr style="height: 40px;">
// <th id="history_panel">
// ` + history + `
// </th>
// </tr>
// </div>
// </tbody>
// </table>`;
// $("#isi_panel").html(content);
// $("#modal_bangunan_edit").html(content_edit);
// $("#modal_bangunan_delete").html(content_delete);
// });
// // $('#idbangunan').val(feature.properties.f1);
// // $('#namebangunan').val(feature.properties.f2);
// // $('#infobangunan').val(feature.properties.f3);
// // $('#nmkelurahan').val(feature.administrasi.f1);
// // $('#nmkecamatan').val(feature.administrasi.f2);
// // $('#nmkabkota').val(feature.administrasi.f3);
// // $('#nmprovinsi').val(feature.administrasi.f4);
// // $('#luasbangunan').val(feature.administrasi.f6);
// // $('#luastanah').val(feature.administrasi.f7);
// // $('#tinggibangunan').val(feature.administrasi.f8);
// // $('#pemilik').val(feature.administrasi.f10);
// // $('#gambar').val(feature.administrasi.f9);
// // $("#coordinatebangunan").val(feature.geometry);
// $("#panel-samping").css("display", "block");
// $("#button_hide_panel").css("display", "block");
// // $('#idbangunanhps').val(feature.properties.f1);
// // $('#namebangunanhps').val(feature.properties.f2);
// // $('#infobangunanhps').val(feature.properties.f3);
// panel_samp()
// }
// });
// pool.push({
// name: feature.properties.f2,
// id: L.stamp(layer),
// lat: lattitud,
// lng: longitud
// });
// }
// layer.on({
// mouseover: function(e) {
// var layer = e.target;
// layer.setStyle({
// weight: 1,
// Color: "#067800",
// fillColor: "#067800",
// });
// if (!L.Browser.ie && !L.Browser.opera) {
// layer.bringToFront();
// }
// },
// mouseout: function(e) {
// geo_bangunan.resetStyle(e.target);
// }
// });
// }
// });
// function geo_json_bangunan(data) {
// geo_bangunan.addData(data)
// }
// var checkBox_building = document.getElementById("geo_building");
// var checkBox_2d = document.getElementById("2d-maps");
// map.on("movestart", function() {
// geo_bangunan.clearLayers();
// });
// map.on("moveend", function() {
// var wetan = map.getBounds().getEast();
// var kulon = map.getBounds().getWest();
// var lor = map.getBounds().getNorth()
// var kidul = map.getBounds().getSouth();
// var center = map.getBounds().getCenter();
// var zoom = map.getZoom();
// if (checkBox_building.checked == true || checkBox_2d.checked == true) {
// if (zoom > 17) {
// if (map.hasLayer(geo_bangunan)) {
// geo_bangunan.clearLayers()
// geo_bangunan.remove()
// }
// $.ajax({
// url: "{% url 'api:building' %}",
// data: {
// 'wetan': wetan,
// 'kulon': kulon,
// 'lor': lor,
// 'kidul': kidul
// },
// dataType: 'json',
// success: function(data) {
// let list_poly = [];
// for (var i = 0; i < data['gen'].length; i++) {
// geoj = data['gen'][i][0];
// list_poly.push(geoj);
// };
// geo_json_bangunan(list_poly);
// }
// });
// }
// geo_bangunan.addTo(map)
// } else {
// geo_bangunan.clearLayers();
// geo_bangunan.remove()
// }
// });
// var map_edit = new L.map('map-edit', {
// editable: true,
// zoomControl: false,
// drawControl: true
// }).setView([-2, 118], 5);
// mapss = L.tileLayer('https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}', {
// maxZoom: 22,
// minZoom: 4,
// }).addTo(map_edit);
// var polylyly = L.polygon([
// [-4.1283969, 104.1674575],
// [-4.128396, 104.1674947],
// [-4.1284664, 104.1674964],
// [-4.1284674, 104.1674593],
// [-4.1283969, 104.1674575]
// ]).addTo(map_edit)
// $(document).on("click", "#btn_edit_bangunan", function() {
// if (map_edit.hasLayer(polylyly)) {
// polylyly.remove()
// }
// var id_poly = $('#idbangunan').val();
// loaderPage(true);
// $.ajax({
// url: "{% url 'api:edit' %}",
// data: {
// 'id_poly': id_poly
// },
// dataType: 'json',
// success: function(data) {
// setTimeout(function() {
// map_edit.invalidateSize();
// }, 1000);
// loaderPage(false);
// map_edit.setView([data['geometry']['coordinates'][0][0][0][1], data['geometry']['coordinates'][0][0][0][0]], 19);
// let lop_poly_edit = data['geometry']['coordinates'][0][0];
// let list_poly_edit = [];
// for (var i = 0; i < lop_poly_edit.length; i++) {
// geoj = lop_poly_edit[i][0];
// polygigi = [lop_poly_edit[i][1], lop_poly_edit[i][0]]
// list_poly_edit.push(polygigi);
// };
// polylyly = L.polygon(list_poly_edit).addTo(map_edit)
// polylyly.enableEdit();
// var hasil = (JSON.stringify(polyly.toGeoJSON()))
// $('#btnsavebangunan').click(function() {
// var hasil = (JSON.stringify(polylyly.toGeoJSON()))
// $("#coordinatebangunan").val(hasil);
// })
// }
// })
// });
// $(document).on("click", "#btnsavebangunan", function() {
// var data = new FormData();
// data.append("file", $("input[id^='imgbangunan']")[0].files[0]);
// data.append("csrfmiddlewaretoken", "{{ csrf_token }}");
// data.append('name_b', $('#namebangunan').val())
// data.append('polygon', $('#coordinatebangunan').val())
// data.append('info_b', $('#infobangunan').val())
// data.append('desa_b', $('#nmkelurahan').val())
// data.append('kec_b', $('#nmkecamatan').val())
// data.append('kab_b', $('#nmkabkota').val())
// data.append('pro_b', $('#nmprovinsi').val())
// data.append('id_poly', $('#idbangunan').val())
// data.append('gambar', $('#gambar').val())
// data.append('luasbangunan', $('#luasbangunan').val())
// data.append('luastanah', $('#luastanah').val())
// data.append('tinggibangunan', $('#tinggibangunan').val())
// data.append('pemilik', $('#pemilik').val())
// $.ajax({
// url: "{% url 'api:validatedit' %}",
// data: data,
// dataType: 'json',
// type: 'POST',
// processData: false,
// contentType: false,
// success: function(data) {
// let response = data
// if (response.code == 0) {
// swal({
// title: response.info,
// text: response.data,
// type: "success",
// icon: "success",
// confirmButtonColor: "#00BCD4"
// }, function() {
// $("#modal_bangunan_edit").css('display', 'none');
// })
// } else {
// swal({
// title: response.info,
// text: response.data,
// type: "warning",
// icon: "error",
// confirmButtonColor: "#00BCD4"
// })
// }
// }
// })
// });
// $(document).on("click", "#btn_delete_bangunan", function() {
// var map_delete = new L.map('map-delete', {
// editable: true,
// zoomControl: false,
// drawControl: true
// }).setView([-2, 118], 5);
// mapss = L.tileLayer('https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}', {
// maxZoom: 22,
// minZoom: 4,
// }).addTo(map_delete);
// var id_polyhps = $('#idbangunanhps').val();
// // console.log(id_polyhps)
// loaderPage(true);
// $.ajax({
// url: "{% url 'api:edit' %}",
// data: {
// 'id_poly': id_polyhps
// },
// dataType: 'json',
// success: function(data) {
// setTimeout(function() {
// map_delete.invalidateSize();
// }, 1000);
// loaderPage(false);
// map_delete.setView([data['geometry']['coordinates'][0][0][0][1], data['geometry']['coordinates'][0][0][0][0]], 19);
// let lop_poly_edit = data['geometry']['coordinates'][0][0];
// let list_poly_edit = [];
// for (var i = 0; i < lop_poly_edit.length; i++) {
// geoj = lop_poly_edit[i][0];
// polygigi = [lop_poly_edit[i][1], lop_poly_edit[i][0]]
// list_poly_edit.push(polygigi);
// };
// var polyly = L.polygon(list_poly_edit).addTo(map_delete)
// $('#btnsavedeletebangunan').click(function() {
// var hasil = (JSON.stringify(polyly.toGeoJSON()))
// $("#coordinatebangunan").val(hasil);
// })
// }
// })
// });
// $(document).on("click", "#btnsavedeletebangunan", function() {
// var data = new FormData();
// data.append('id_poly', $('#idbangunan').val())
// $.ajax({
// url: "{% url 'api:hapus' %}",
// data: data,
// dataType: 'json',
// type: 'POST',
// processData: false,
// contentType: false,
// success: function(data) {
// let response = data
// if (response.code == 0) {
// swal({
// title: response.info,
// text: response.data,
// type: "success",
// icon: "success",
// confirmButtonColor: "#00BCD4"
// }, function() {
// $("#modal_bangunan_delete").css('display', 'none');
// })
// } else {
// swal({
// title: 'Error',
// text: 'Hubungi Mereka',
// type: "warning",
// icon: "error",
// confirmButtonColor: "#00BCD4"
// })
// }
// }
// })
// });
var geo_jalan = L.geoJson(null, {
style: function(feature) {
var zoom = map.getZoom()
console.log(zoom)
if (zoom < 18) {
return {
color: "#808080",
weight: 8,
opacity: 2,
zIndex: 1000
};
} else if (zoom > 17 && zoom < 19) {
return {
color: "#808080",
weight: 10,
opacity: 2,
zIndex: 1000
};
} else if (zoom > 18 && zoom < 20) {
return {
color: "#808080",
weight: 20,
opacity: 2,
zIndex: 1000
};
} else if (zoom > 19 && zoom < 21) {
return {
color: "#808080",
weight: 30,
opacity: 2,
zIndex: 1000
};
} else if (zoom > 20 && zoom < 22) {
return {
color: "#808080",
weight: 50,
opacity: 2,
zIndex: 1000
};
} else if (zoom > 21 && zoom < 23) {
return {
color: "#808080",
weight: 60,
opacity: 2,
zIndex: 1000
};
}
},
onEachFeature: function(feature, layer) {
if (feature.properties) {
layer.on({
click: function(e) {
var geogeo = geocodeService.reverse().latlng(e.latlng).run(function(error, result) {
if (feature.properties.f6 == 'None') {
var path_img = "static/img/image_null.jpg"
} else {
var path_img = `"static/image/jalan/` + feature.properties.f6 + `"`
}
if (result.address.Address != '') {
var nmjalan = result.address.Address
} else {
var nmjalan = feature.properties.f2
};
var history
if (feature.properties.f7 != null) {
var list_history = feature.properties.f7
var list_history_panel = ``
for (var i = 0; i < list_history.length; i++) {
var dt_history = list_history[i].split(",");
var data_history = `<div class="form-group" style="margin-bottom:0px;">
<div class="row">
<label class="col-md-6">` + dt_history[1] + `</label>
<a class="col-md-3" onclick="getjalanper(` + dt_history[0] + `)"><i>View Ruas</i></a>
<a class="col-md-3" onclick="getdetailper(` + dt_history[0] + `)" data-toggle="modal" data-target="#modal_detail"><i>View Detail</i></a>
</div>
</div>`;
list_history_panel += data_history
};
history = `<p class="text-center">
History Perbaikan
</p>
<br>
` + list_history_panel + `
<p class="text-center" style="margin-top: 10px;">
<a href="#" id='btn_perbaikan_jalan' class="btn btn-default"><i>Tambah History Perbaikan</i></a>
</p>`;
} else {
history = `<p class="text-center">
History Perbaikan
</p>
<br>
<p class="text-center" style="margin-top: 10px;">
<a href="#" id='btn_perbaikan_jalan' class="btn btn-default"><i>Input History Perbaikan</i></a>
</p>`;
}
content = `
<table class="table tasks-list">
<thead style="text-align: center;">
<tr>
<th style="padding: 0 0 0 0px;">
<img src=` + path_img + ` alt="Image" style="width: 100%;max-height: 237px;height:237">
</th>
</tr>
</thead>
<tbody>
<div class= "container">
<tr style="height: 100px;">
<th>
<div>
<h1 style="font-family: Google Sans,Roboto,Arial,sans-serif;
letter-spacing: 0;
font-weight: 400;">
<span style="font-size: x-large;">
` + nmjalan + `
</span>
</h1>
</div>
</th>
</tr>
</div>
<div class= "container">
<tr style="height: 40px;">
<th>
<p>
<span>Panjang Jalan : ` + feature.properties.f3 + ` m</span>
</p>
<p>
<span>Panjang Jalan : ` + feature.properties.f3 + ` m</span>
</p>
<p>
<span>Lebar Jalan : ` + feature.properties.f4 + ` m</span>
</p>
<p>
<span>Tipe Jalan : ` + feature.properties.f5 + `</span>
</p>
<p class="text-center" style="margin-top: 25px;">
<a href="#" class="btn btn-default" data-toggle="modal" data-target="#modal-jalan" id="btn_jalan" data-backdrop="static" data-keyboard="false"><i>Edit Informasi Jalan</i></a>
</p>
</th>
</tr>
</div>
<div class="container">
<tr style="height: 40px;">
<th id="history_panel">
` + history + `
</th>
</tr>
</div>
</tbody>
</table>`;
$("#isi_panel").html(content);
$('#namajalan').val(nmjalan);
});
$('#idjalan').val(feature.properties.f1);
$('#panjangjalan').val(feature.properties.f3);
$('#lebarjalan').val(feature.properties.f4);
$('#tipejalan').val(feature.properties.f5);
$("#coordinatejalan").val(feature.geometry);
$("#panel-samping").css("display", "block");
$("#button_hide_panel").css("display", "block");
panel_samp()
}
});
pool.push({
name: feature.properties.f2,
id: L.stamp(layer),
});
}
layer.on({
mouseover: function(e) {
var layer = e.target;
layer.setStyle({
weight: 10,
Color: "#fffc00",
fillColor: "#fffc00",
fillOpacity: 2,
opacity: 2,
});
if (!L.Browser.ie && !L.Browser.opera) {
layer.bringToFront();
}
},
mouseout: function(e) {
geo_jalan.resetStyle(e.target);
}
});
var popupContent = feature.properties.f2;
layer.bindTooltip(popupContent);
}
});
function geo_json_jalan(data) {
geo_jalan.addData(data)
}
function geojalan() {
var checkBox = document.getElementById("geo_jalan");
if (checkBox.checked == true) {
map.on("movestart", function() {
if (map.hasLayer(geo_jalan)) {
geo_jalan.clearLayers()
geo_jalan.remove()
}
});
map.on("moveend", function(e) {
var wetan = map.getBounds().getEast();
var kulon = map.getBounds().getWest();
var lor = map.getBounds().getNorth()
var kidul = map.getBounds().getSouth();
var center = map.getBounds().getCenter();
var zoom = map.getZoom()
if (zoom > 16 && checkBox.checked == true) {
$.ajax({
url: "{% url 'api:jalan' %}",
data: {
'wetan': wetan,
'kulon': kulon,
'lor': lor,
'kidul': kidul
},
dataType: 'json',
success: function(data) {
let list_poly = [];
for (var i = 0; i < data['gen'].length; i++) {
geoj = data['gen'][i][0];
list_poly.push(geoj);
};
geo_json_jalan(list_poly);
}
});
}
geo_jalan.addTo(map);
});
} else {
geo_jalan.clearLayers();
geo_jalan.remove();
}
}
var map_edit_jalan = L.map('map-jalan', {
editable: true,
zoomControl: false,
drawControl: true
}).setView([-2, 118], 5);
mapss = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
maxZoom: 22,
minZoom: 4,
}).addTo(map_edit_jalan);
var polygon_edit_jalan = new L.Polyline([
[-4.11941282399997, 104.170558774],
[-4.11965812399992, 104.170414073]
], {
color: 'blue',
weight: 3,
opacity: 0.5,
smoothFactor: 1
});
$(document).on("click", "#btn_jalan", function() {
if (map_edit_jalan.hasLayer(polygon_edit_jalan)) {
polygon_edit_jalan.remove()
}
var id_poly = $('#idjalan').val();
$.ajax({
url: "{% url 'api:edit-jalan' %}",
data: {
'idjalan': id_poly
},
dataType: 'json',
success: function(data) {
loaderPage(false);
setTimeout(function() {
map_edit_jalan.invalidateSize();
}, 1000);
if (data['jalan']['geometry']['type'] == "MultiLineString") {
var alat = data['jalan']['geometry']['coordinates'][0][0][1];
var alng = data['jalan']['geometry']['coordinates'][0][0][0];
var lop_poly_edit = data['jalan']['geometry']['coordinates'][0];
} else {
var alat = data['jalan']['geometry']['coordinates'][0][1];
var alng = data['jalan']['geometry']['coordinates'][0][0];
var lop_poly_edit = data['jalan']['geometry']['coordinates'];
};
map_edit_jalan.setView([alat, alng], 18);
let list_poly_edit = [];
for (var i = 0; i < lop_poly_edit.length; i++) {
geoj = lop_poly_edit[i][0];
polygigi = [lop_poly_edit[i][1], lop_poly_edit[i][0]]
list_poly_edit.push(polygigi);
};
polygon_edit_jalan = new L.Polyline(list_poly_edit, {
color: 'blue',
weight: 3,
opacity: 0.5,
smoothFactor: 1
});
polygon_edit_jalan.addTo(map_edit_jalan);
polygon_edit_jalan.enableEdit();
$('#btnsavejalan').click(function() {
var hasil = (JSON.stringify(polygon_edit_jalan.toGeoJSON()))
$("#coordinatejalan").val(hasil);
})
}
})
});
$(document).on("click", "#btnsavejalan", function() {
var data = new FormData();
data.append("file", $("input[id^='imgjalan']")[0].files[0]);
data.append("csrfmiddlewaretoken", "{{ csrf_token }}");
data.append('idjalan', $("#idjalan").val())
data.append('namajalan', $("#namajalan").val())
data.append('panjangjalan', $("#panjangjalan").val())
data.append('lebarjalan', $("#lebarjalan").val())
data.append('tipejalan', $("#tipejalan").val())
data.append('cord', $("#coordinatejalan").val())
$.ajax({
url: "{% url 'api:edit-jalan-valid' %}",
data: data,
dataType: 'json',
type: 'POST',
processData: false,
contentType: false,
success: function(data) {
loaderPage(false);
let response = data;
if (response.code == 0) {
swal({
title: response.info,
text: response.data,
type: "success",
icon: "success",
confirmButtonColor: "#00BCD4"
}).then((isok) => {
$("#modal-jalan").css('display', 'none');
})
} else {
swal({
title: response.info,
text: response.data,
type: "warning",
icon: "error",
confirmButtonColor: "#00BCD4"
})
}
}
})
});
var geo_sungai = L.geoJson(null, {
style: function(feature) {
return {
color: "#00FFFF",
weight: 1,
opacity: 2,
zIndex: 1000
};
},
onEachFeature: function(feature, layer) {
if (feature.properties) {
var lattitud, longitud;
if (feature.geometry.type == 'MultiPolygon') {
lattitud = feature.geometry.coordinates[0][0][0][1];
longitud = feature.geometry.coordinates[0][0][0][0];
} else {
lattitud = feature.geometry.coordinates[0][0][1];
longitud = feature.geometry.coordinates[0][0][0];
};
layer.on({
click: function(e) {
console.log('cdcd')
}
});
pool.push({
name: feature.properties.f2,
id: L.stamp(layer),
lat: lattitud,
lng: longitud
});
}
layer.on({
mouseover: function(e) {
var layer = e.target;
layer.setStyle({
weight: 1,
Color: "#067800",
fillColor: "#067800",
});
if (!L.Browser.ie && !L.Browser.opera) {
layer.bringToFront();
}
},
mouseout: function(e) {
geo_sungai.resetStyle(e.target);
}
});
}
});
function geo_json_sungai(data) {
geo_sungai.addData(data)
}
function geosungai() {
var checkBox = document.getElementById("geo_sungai");
if (checkBox.checked == true) {
$.ajax({
url: "{% url 'api:sungai' %}",
dataType: 'json',
success: function(data) {
let list_poly = [];
for (var i = 0; i < data['gen'].length; i++) {
geoj = data['gen'][i][0];
list_poly.push(geoj);
};
geo_json_sungai(list_poly);
}
});
geo_sungai.addTo(map);
} else {
geo_sungai.remove();
}
}
$(document).on("click", "#delet-pol", function(e) {
$("#modal_delete_1").modal("show");
});
$(document).on("click", "#buttondelete", function(e) {
var id_poly = $('#id_poly_delete').val();
$("#modal_delete_1").modal("hide")
$.ajax({
url: "{% url 'api:hapus' %}",
data: {
'id_poly': id_poly
},
dataType: 'json',
type: 'POST',
success: function(data) {
alert("berhasil gaess")
}
});
});
//
// map_cesium.camera.moveEnd.addEventListener(function() {
// var cartographic = new Cesium.Cartographic();
// var windowPosition = new Cesium.Cartesian2(map_cesium.container.clientWidth / 2, map_cesium.container.clientHeight / 2);
// var pickRay = map_cesium.scene.camera.getPickRay(windowPosition);
// var pickPosition = map_cesium.scene.globe.pick(pickRay, map_cesium.scene);
// var pickPositionCartographic = map_cesium.scene.globe.ellipsoid.cartesianToCartographic(pickPosition);
// var longitudee = pickPositionCartographic.longitude * (180 / Math.PI);
// var lattitudee = pickPositionCartographic.latitude * (180 / Math.PI)
// var tinggi = (cartographic.height * 0.001).toFixed(1);
// console.log(lattitudee)
// console.log(longitudee)
//$.ajax({
// url: "{% url 'api:3d-maps' %}",
// data: {
// 'latt': lattitudee,
// 'loog': longitudee
// },
// dataType: 'json',
// type: 'POST',
// success: function(data) {
// alert('fgggg')
//
// }
//});
// });
// if (checkBox_3d.checked == true && checkBox_2d.checked == false) {
//
// $("#map").css("display", "none");
// $("#map-cesium").css("display", "block");
// } else if (checkBox_3d.checked == false && checkBox_2d.checked == true) {
// $("#map").css("display", "block");
// $("#map-cesium").css("display", "none");
//
// }
// function map3d() {
// var checkBox_3d = document.getElementById("3d-maps");
// if (checkBox_3d.checked == true) {
// $("#map").css('display', 'none');
// $("#map-cesium").css('display', 'block');
// Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJhOTc0NDkxMi02N2NkLTQwYjMtOTE1Yi1iMGNkZDU0Zjg3MGMiLCJpZCI6NDQ1ODgsImlhdCI6MTYxNDE0NjM5NH0.sRHzNNa7uV_huqGxERySWlL8J5UVx1VwU-pRwNd0GJk';
// var map_cesium = new Cesium.Viewer('map-cesium');
// map_cesium.camera.flyTo({
// destination: Cesium.Cartesian3.fromDegrees(104.171696, -4.120217, 10000)
// });
// map_cesium.camera.moveEnd.addEventListener(function() {
// var windowPosition = new Cesium.Cartesian2(map_cesium.container.clientWidth / 2, map_cesium.container.clientHeight / 2);
// var pickRay = map_cesium.scene.camera.getPickRay(windowPosition);
// var pickPosition = map_cesium.scene.globe.pick(pickRay, map_cesium.scene);
// var pickPositionCartographic = map_cesium.scene.globe.ellipsoid.cartesianToCartographic(pickPosition);
// var longitudee = pickPositionCartographic.longitude * (180 / Math.PI);
// var lattitudee = pickPositionCartographic.latitude * (180 / Math.PI)
// console.log(lattitudee)
// console.log(longitudee)
// $.ajax({
// url: "{% url 'api:3d-maps' %}",
// data: {
// 'latt': lattitudee,
// 'loog': longitudee
// },
// dataType: 'json',
// success: function(data) {
// for (var i = 0; i < data["polygon_o"].length; i++) {
// polygon_oo = data["polygon_o"][i][0].replace(/'/g, '');
// poll = JSON.parse("[" + polygon_oo + "]");
// var poly_osm = map_cesium.entities.add({
// polygon: {
// hierarchy: Cesium.Cartesian3.fromDegreesArray(
// poll
// ),
// height: 0,
// material: Cesium.Color.FLORALWHITE.withAlpha(0.7),
// outline: true,
// outlineColor: Cesium.Color.GREEN,
// },
// name: data["info_polygon"][i]
// });
// poly_osm.polygon.extrudedHeight = data["tinggi_pol"][i];
// // poly_osm.polygon.extrudedHeight = 10;
// // console.log(data["tinggi_pol"])
// };
// }
// });
// });
// map_cesium.selectedEntityChanged.addEventListener(function(selectedEntity) {
// if (Cesium.defined(selectedEntity)) {
// if (Cesium.defined(selectedEntity.name)) {
// var id_poly = selectedEntity.name
// $.ajax({
// url: "{% url 'api:edit' %}",
// data: {
// 'id_poly': id_poly
// },
// dataType: 'json',
// success: function(data) {
// if (data['administrasi']['f9'] == 'NONE') {
// var path_img = "static/img/image_null.jpg"
// } else {
// var path_img = `"static/image/bangunan/` + data['administrasi']['f9'] + `"`
// }
// content = `<table class="table table-hover tasks-list">
// <thead style="text-align: center;">
// <tr>
// <th style="padding: 0 0 0 0px;">
// <img src=` + path_img + ` alt="Image" style="width: 100%;max-height: 368px;height:368">
// </th>
// </tr>
// </thead>
// <tbody>
// <div class= "container">
// <tr style="height: 100px;">
// <th>
// <div>
// <h1 style="font-family: Google Sans,Roboto,Arial,sans-serif;
// letter-spacing: 0;
// font-weight: 400;">
// <span style="font-size: x-large;">
// ` + data['properties']['f2'] + `
// </span>
// </h1>
// </div>
// </th>
// </tr>
// </div>
// <div class= "container">
// <tr style="height: 30px;">
// <th>
// <span>
// ` + data['properties']['f3'] + `
// </span>
// </th>
// </tr>
// </div>
// <div class= "container">
// <tr style="height: 40px;">
// <th>
// <span>
// ` + data['administrasi']['f1'] + `, ` + data['administrasi']['f2'] + `, ` + data['administrasi']['f3'] + `, ` + data['administrasi']['f4'] + `
// </span>
// </th>
// </tr>
// </div>
// <div class= "container">
// <tr style="height: 40px;">
// <th>
// <p>
// <span>Luas Bangunan : ` + data['administrasi']['f6'] + `</span>
// </p>
// <p>
// <span>Luas Tanah : ` + data['administrasi']['f7'] + `</span>
// </p>
// <p>
// <span>Tinggi Bangunan : ` + data['administrasi']['f8'] + `</span>
// </p>
// <p>
// <span>Pemilik : ` + data['administrasi']['f10'] + `</span>
// </p>
// </th>
// </tr>
// </div>
// </tbody>
// </table>`;
// $("#isi_panel").html(content)
// $("#panel-samping").css("display", "block");
// $("#button_hide_panel").css("display", "block");
// }
// })
// console.log('Selected ' + selectedEntity.name);
// } else {
// console.log('Unknown entity selected.');
// }
// } else {
// console.log('Deselected.');
// }
// });
// } else {
// //map_cesium.entities.removeAll();
// //map_cesium.destroy();
// setTimeout(function() {
// map.invalidateSize();
// }, 1000);
// $("#map").css('display', 'block');
// $("#map-cesium").css('display', 'none');
// }
// }
</script>
<script type="text/javascript" src="{% static 'js/plugins/tables/datatables/datatables.min.js' %}"></script>
<script>
function destroyfade() {
$(".modal-backdrop").css("display", "none")
$(".modal-backdrop").removeClass('show');
$("body").css('padding-right', '0px !important')
}
function destroyWraper() {
$("#input_perbaikan").css("display", "none");
$("#edit_kelurahan").css("display", "none");
}
var map_input = L.map('map-insert', {
editable: true,
zoomControl: false,
drawControl: true
}).setView([-4.125826277307029, 104.1881561279297], 10);
maps = L.tileLayer('https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}&s=Gal&apistyle=s.t:0|s.e:l|p.v:off', {
maxZoom: 22,
minZoom: 4,
}).addTo(map_input);
var editableLayers = new L.FeatureGroup();
map_input.addLayer(editableLayers);
var options = {
position: 'topleft',
draw: {
polyline: {
shapeOptions: {
color: 'red',
weight: 10
}
},
polyline: true,
},
edit: {
featureGroup: editableLayers, //REQUIRED!!
remove: true
},
color: 'red'
};
var drawControl = new L.Control.Draw(options);
map_input.addControl(drawControl);
map_input.on('draw:created', function(e) {
var type = e.layerType,
layer = e.layer;
layer.options.color = 'yellow';
layer.options.weight = 10;
layer.options.opacity = 1;
var koordina = ""
if (type === 'polyline') {
var tempLatLng = null;
var totalDistance = 0.00000;
$.each(e.layer._latlngs, function(i, latlng) {
if (tempLatLng == null) {
tempLatLng = latlng;
return;
}
totalDistance += tempLatLng.distanceTo(latlng);
tempLatLng = latlng;
});
e.layer.bindPopup((totalDistance).toFixed(2) + ' meter');
e.layer.openPopup();
$("#panjangjalanperbaikan").val((totalDistance).toFixed(2) + ' meter');
}
editableLayers.addLayer(layer);
});
function getjalanper(id) {
$.ajax({
url: "{% url 'apps:get-jalan-perbaikan' %}",
data: {
'id': id
},
dataType: 'json',
success: function(data) {
map.setView([data[0]['geometry']['coordinates'][0][0][1], data[0]['geometry']['coordinates'][0][0][0]], 18)
var geo_jalan_perbaikan = L.geoJson(data[0], {
style: function(feature) {
return {
color: "#FAFA00",
weight: 10,
opacity: 2,
zIndex: 1999
};
}
}).addTo(map);
}
});
};
function getdetailper(id) {
$.ajax({
url: "{% url 'apps:get-detail-perbaikan' %}",
data: {
'id': id
},
dataType: 'json',
success: function(data) {
isi_modal_detail = []
for (var i = 0; i < data.length; i++) {
isi_modal_detail.push(`<tr>
<td>` + i + `</td>
<td>` + data[i].name + `</td>
<td>` + data[i].type + `</td>
<td>` + data[i].tgl_perbaikan + `</td>
<td>` + data[i].anggaran + `</td>
<td>` + data[i].pj + `</td>
<td>` + data[i].pj_lapangan + `</td>
<td>` + data[i].kontraktor + `</td>
<td>` + data[i].pjg_jln_reno + `</td>
<td>` + data[i].lbr_jln_reno + `</td>
<td><a onclick="loadmapruas('` + data[i].id + `','` + data[i].id_object + `')" id="loaddetailcoord" data-toggle="modal" data-target="#modal_detail_ruas">View</a></td>
<td><a href="static/media/proposal/` + data[i].proposal + `" id="downloadproposal" target="_blank">View</a></td>
<td><a href="static/media/bukti_penyelesaian/` + data[i].bukti_selesai + `" onclick="viewBukti()" id="view-bukti" target="_blank">View</a></td>
</tr>`)
}
$("#isi_modal_detail").html(`
<table class="table table-responsive datatable-show-all table-sm" id="isi_detail" style="word-wrap:break-word;">
<thead>
<tr>
<th>No.</th>
<th>Nama</th>
<th>Type</th>
<th>Tanggal Perbaikan</th>
<th>Anggaran</th>
<th>Penanggung Jawab</th>
<th>Penanggung Jawab Lapangan</th>
<th>Kontraktor</th>
<th>panjang jalan yang di perbaiki</th>
<th>Lebar Jalan yang di Perbaiki</th>
<th>Ruas yang di perbaiki</th>
<th>Proposal</th>
<th>Bukti Penyelesaian</th>
</tr>
</thead>
<tbody>
` + isi_modal_detail + `
</tbody>
</table>`)
}
});
};
var geo_jalan_input = L.geoJson(null, {
style: function(feature) {
return {
color: "#06FF08",
weight: 8,
opacity: 2,
zIndex: 1000
};
}
}).addTo(map_input);
$(document).on("click", "#btn_perbaikan_jalan", function() {
geo_jalan_input.clearLayers(geo_jalan_input)
$("#input_perbaikan").css("display", "block");
var id_jalan = $("#idjalan").val();
editableLayers.clearLayers();
setTimeout(function() {
map_input.invalidateSize();
}, 1000);
$.ajax({
url: "{% url 'apps:input-perbaikan' %}",
data: {
'id_jalan': id_jalan
},
dataType: 'json',
success: function(data) {
$("#namajalan").val(data[0]);
$("#typejalan").val(data[1]);
$("#panjangjalanall").val(data[2]);
$("#id_jalan_perbaikan").val(data[4]);
$("#type_id").val(data[5])
var latlngs = data[3];
map_input.setView([latlngs['geometry']['coordinates'][0][0][1], latlngs['geometry']['coordinates'][0][0][0]], 17)
geo_jalan_input.addData(data[3]);
}
})
});
$("#save-perbaikan").click(function() {
var hasil = JSON.stringify(editableLayers.toGeoJSON());
var id_jalan = $("#id_jalan_perbaikan").val();
var type_id = $("#type_id").val();
var name = $("#namajalan").val();
var type = $("#typejalan").val();
var tgl_perbaikan = $("#tglmulaiperbaikan").val();
var tgl_selesai = $("#tglselesaiperbaikan").val();
var tgl_disetujui = $("#tgldisetujui").val();
var anggaran = $("#anggaran").val();
var proposal = $("#proposal").val();
var bukti_selesai = $("#buktiselesai").val();
var pj = $("#pihakpengesahan").val();
var pj_lapangan = $("#pjlapangan").val();
var kontraktor = $("#kontraktor").val();
var pjg_perbaikan = $("#panjangjalanperbaikan").val();
var lbr_perbaikan = $("#lebarjalanperbaikan").val();
var jenis_perbaikan = $("#jenisperbaikan").val();
var luas = $("#luas").val();
var kelurahan = $("#kelurahan").val();
var kecamatan = $("#kecamatan").val();
var data_umum = [{
'coord': hasil
}, {
'object_id': id_jalan
}, {
'type_id': type_id
}, {
'name': name
}, {
'type': type
}, {
'tgl_selesai': tgl_selesai
}, {
'tgl_perbaikan': tgl_perbaikan
}, {
'tgl_disetujui': tgl_disetujui
}, {
'anggaran': anggaran
}, {
'pj': pj
}, {
'pj_lapangan': pj_lapangan
}, {
'kontraktor': kontraktor
}, {
'pjg_perbaikan': pjg_perbaikan
}, {
'lbr_perbaikan': lbr_perbaikan
}, {
'jenis_perbaikan': jenis_perbaikan
}, {
'luas': luas
}, {
'kelurahan': kelurahan
}, {
'kecamatan': kecamatan
}]
data = new FormData()
data.append("proposal", $("input[id^='proposal']")[0].files[0]);
data.append("bukti_selesai", $("input[id^='buktiselesai']")[0].files[0]);
for (var i = 0; i < data_umum.length; i++) {
var keyss = Object.keys(data_umum[i]);
data.append(keyss[0], data_umum[i][keyss[0]])
}
$.ajax({
url: "{% url 'apps:save-perbaikan' %}",
data: data,
dataType: 'json',
type: 'POST',
processData: false,
contentType: false,
success: function(data) {
let response = data;
if (response.code == 0) {
swal({
title: response.info,
text: response.data,
type: "success",
icon: "success",
confirmButtonColor: "#00BCD4"
}, function() {
$("#input_perbaikan").css("display", "none");
$("#info-jalan").css("display", "block");
$("#info-pendidikan").css("display", "none");
})
} else {
swal({
title: response.info,
text: response.data,
type: "warning",
icon: "error",
confirmButtonColor: "#00BCD4"
})
}
}
})
});
$('.datatable-show-all').DataTable({
autoWidth: false,
columnDefs: [{
orderable: false,
width: '20px',
targets: [0],
},
// {
// width: '100px',
// targets: [ 4 ]
// },
{
orderable: false,
width: '20px',
targets: [6],
}, {
orderable: false,
width: '20px',
targets: [7],
},
],
dom: '<"float-left"B>frtip',
buttons: [{
text: 'Tambah User',
action: function(e, dt, node, config) {
$("#modalAddButton").click()
$("#inUsername").attr("disabled", false);
$("#inUsername").val(null);
$("#inNameF").val(null);
$("#inNameL").val(null);
$("#inEmail").val(null);
$("#iduser").val(null);
$(".modstit").html("Tambah User")
loadGroups(null)
}
}],
language: {
search: '<span>Filter:</span> _INPUT_',
searchPlaceholder: 'Type to filter...',
lengthMenu: '<span>Show:</span> _MENU_',
paginate: {
'first': 'First',
'last': 'Last',
'next': '→',
'previous': '←'
}
},
drawCallback: function() {
$(this).find('tbody tr').slice(-3).find('.dropdown, .btn-group').addClass('dropup');
},
preDrawCallback: function() {
$(this).find('tbody tr').slice(-3).find('.dropdown, .btn-group').removeClass('dropup');
}
});
$('.datatable-groups').DataTable({
autoWidth: false,
columnDefs: [{
orderable: false,
width: '100px',
targets: [2]
}, {
orderable: false,
width: '100px',
targets: [0]
}],
dom: '<"float-left"B>frtip',
buttons: [{
text: 'Tambah Group',
action: function(e, dt, node, config) {
$("#modalAddButtong").click();
$("#idgroup").val(null);
$(".modstitg").html("Tambah Group")
$("#inGroupName").val(null)
$("#container_sparent").css("display", "block")
loadGroups(null)
}
}],
language: {
search: '<span>Filter:</span> _INPUT_',
searchPlaceholder: 'Type to filter...',
lengthMenu: '<span>Show:</span> _MENU_',
paginate: {
'first': 'First',
'last': 'Last',
'next': '→',
'previous': '←'
}
},
drawCallback: function() {
$(this).find('tbody tr').slice(-3).find('.dropdown, .btn-group').addClass('dropup');
},
preDrawCallback: function() {
$(this).find('tbody tr').slice(-3).find('.dropdown, .btn-group').removeClass('dropup');
}
});
$("#modalAddButton").click(function() {
$("body").css("padding-right", "0px !important")
})
$("#saveuser").on("click", function() {
addUser()
})
function loadjlbyid(id) {
var isObject = {};
isObject.id = id;
$("#iduser").val(id)
$.ajax({
url: "{% url 'apps:loadDetail' %}",
data: isObject,
dataType: 'json',
type: 'post',
success: function(data) {
isi_modal_detail = []
for (var i = 0; i < data.length; i++) {
isi_modal_detail.push(`<tr>
<td>` + i + `</td>
<td>` + data[i].name + `</td>
<td>` + data[i].type + `</td>
<td>` + data[i].tgl_perbaikan + `</td>
<td>` + data[i].anggaran + `</td>
<td>` + data[i].pj + `</td>
<td>` + data[i].pj_lapangan + `</td>
<td>` + data[i].kontraktor + `</td>
<td>` + data[i].pjg_jln_reno + `</td>
<td>` + data[i].lbr_jln_reno + `</td>
<td><a onclick="loadmapruas('` + data[i].id + `','` + data[i].id_object + `')" id="loaddetailcoord" data-toggle="modal" data-target="#modal_detail_ruas">View</a></td>
<td><a href="media/proposal/` + data[i].proposal + `" id="downloadproposal">View</a></td>
<td><a href="media/bukti_penyelesaian/` + data[i].bukti_selesai + `" onclick="viewBukti()" id="view-bukti">View</a></td>
</tr>`)
}
$("#isi_modal_detail").html(`
<table class="table table-responsive datatable-show-all table-sm" id="isi_detail" style="word-wrap:break-word;">
<thead>
<tr>
<th>No.</th>
<th>Nama</th>
<th>Type</th>
<th>Tanggal Perbaikan</th>
<th>Anggaran</th>
<th>Penanggung Jawab</th>
<th>Penanggung Jawab Lapangan</th>
<th>Kontraktor</th>
<th>panjang jalan yang di perbaiki</th>
<th>Lebar Jalan yang di Perbaiki</th>
<th>Ruas yang di perbaiki</th>
<th>Proposal</th>
<th>Bukti Penyelesaian</th>
</tr>
</thead>
<tbody>
` + isi_modal_detail + `
</tbody>
</table>`)
}
});
}
function destroylayer() {
map_detail_by_id
}
$(".leaflet-draw-draw-polyline").html('<span class="fa fa-expand"></span>')
$(".leaflet-draw-actions-top").html(`<li class=""><a class="btn btn-primary" href="#" title="Finish drawing">Finish</a></li><li class=""><a class="" href="#" title="Delete last point drawn">Delete last point</a></li><li class=""><a class="" href="#" title="Cancel drawing">Cancel</a></li>`);
loaderPage(false);
function loaderPage(stat) {
if (stat == true) {
$('.page_loader').show();
} else {
$('.page_loader').hide();
$(".panel-flat").css("display", "block")
}
};
function cetakExcel() {
var tab_text = "<table border='2px'><tr bgcolor='#87AFC6'>";
var textRange;
var j = 0;
tab = document.getElementById('isi_detail'); // id of table
for (j = 0; j < tab.rows.length; j++) {
tab_text = tab_text + tab.rows[j].innerHTML + "</tr>";
//tab_text=tab_text+"</tr>";
}
tab_text = tab_text + "</table>";
tab_text = tab_text.replace(/<A[^>]*>|<\/A>/g, ""); //remove if u want links in your table
tab_text = tab_text.replace(/<img[^>]*>/gi, ""); // remove if u want images in your table
tab_text = tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); // reomves input params
var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");
if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) // If Internet Explorer
{
txtArea1.document.open("txt/html", "replace");
txtArea1.document.write(tab_text);
txtArea1.document.close();
txtArea1.focus();
sa = txtArea1.document.execCommand("SaveAs", true, "Say Thanks to Sumit.xls");
} else //other browser not tested on IE 11
sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));
return (sa);
}
var $content, $modal, $apnData, $modalCon;
$content = $(".min");
$(".mdlFire").click(function(e) {
e.preventDefault();
var $id = $(this).attr("data-target");
});
$(".modalMinimize").on("click", function() {
$modalCon = $(this).closest(".mymodal").attr("id");
$apnData = $(this).closest(".mymodal");
$modal = "#" + $modalCon;
$(".modal-backdrop").addClass("display-none");
$($modal).toggleClass("min");
if ($($modal).hasClass("min")) {
$(".minmaxCon").append($apnData);
$(this).find("i").toggleClass('fa-minus').toggleClass('fa-clone');
} else {
$(".container").append($apnData);
$(this).find("i").toggleClass('fa-clone').toggleClass('fa-minus');
};
});
$("button[data-dismiss='modal']").click(function() {
$(this).closest(".mymodal").removeClass("min");
$(".container").removeClass($apnData);
$(this).next('.modalMinimize').find("i").removeClass('fa fa-clone').addClass('fa fa-minus');
});
</script>