{% load static %}
<script>
//notif overlay
function cek_overlay() {
var jml_ceklis = 0
var check_tuplah = document.getElementById("geo_tuplah");
var check_rumah = document.getElementById("geo_building");
var check_jalan = document.getElementById("geo_jalan");
var check_kota = document.getElementById("batas_kota");
var check_kec = document.getElementById("batas_kec");
var check_desa = document.getElementById("batas_desa");
if (check_tuplah.checked == true) {
jml_ceklis = jml_ceklis + 1
}
if (check_rumah.checked == true) {
jml_ceklis = jml_ceklis + 1
}
if (check_jalan.checked == true) {
jml_ceklis = jml_ceklis + 1
}
if (check_kota.checked == true) {
jml_ceklis = jml_ceklis + 1
}
if (check_kec.checked == true) {
jml_ceklis = jml_ceklis + 1
}
if (check_desa.checked == true) {
jml_ceklis = jml_ceklis + 1
}
if (jml_ceklis != 0) {
$(".jumlah-ceklis").html(`<div style="position: absolute;right: -5px;top: -5px;background:
#90CAFF;width: 20px;height: 20px;text-align: center;border-radius: 10px;color:#FFFFFF;"><b>` + jml_ceklis + `</b></div>`)
$(".overlay-cek").css("background", "#1E2233")
$(".overlay-cek").css("box-shadow", "0px 4px 47px rgb(175 141 246 / 86%)")
} else {
$(".jumlah-ceklis").html(``)
$(".overlay-cek").css("background", "#FFFFFF")
$(".overlay-cek").css("box-shadow", "0")
}
}
cek_overlay()
//tes
function panel_samp() {
$("#panel-samping").addClass("move");
$("#button_unhide_panel").addClass("move-btn");
}
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) {
$('#modal_detail_kelurahan').modal('show');
if (feature.administrasi.f9 == 'NONE') {
var path_img = "static/img/image_null.png"
} else {
var path_img = `"static/image/kelurahan/` + feature.administrasi.f9 + `"`
}
$(".gambar_kelurahan").html(`<img src="` + path_img + `" alt="" style="width:360px;height:290px;border-top-left-radius: 10px;">`)
$(".nama_kelurahan").html(feature.administrasi.f2 + ` , ` + feature.administrasi.f3 + `, ` + feature.administrasi.f4)
$(".kode_kelurahan").html(feature.administrasi.f1)
$(".jumlah_penduduk_kelurahan").html(feature.administrasi.f6)
$(".luas_wilayah_kelurahan").html(feature.administrasi.f10)
$(".jumlah_kk_kelurahan").html(feature.administrasi.f7)
$(".tombol-edit").html(`<a href="/editkelurahan?kode_dagri=` + encodeURIComponent(feature.administrasi.f1) + `" class='btn'>Edit</a>`)
var nama_data_penduduk = ['pria', 'wanita', 'belum_kawin', 'kawin', 'cerai_hidup', 'cerai_mati', 'wajib_ktp'];
var dataset_penduduk = [feature.penduduk.f1, feature.penduduk.f2, feature.penduduk.f3, feature.penduduk.f4, feature.penduduk.f5, feature.penduduk.f6, feature.penduduk.f7];
var nama_data_agama = ['islam', 'kristen', 'khatolik', 'hindu', 'budha', 'konghucu', 'kepercayaan_lain', ]
var dataset_agama = [feature.penduduk.f8, feature.penduduk.f9, feature.penduduk.f10, feature.penduduk.f11, feature.penduduk.f12, feature.penduduk.f13, feature.penduduk.f14]
var nama_data_pendidik = ['tidak_sekolah', 'belum_tamat', 'tamat_sd', 'sltp', 'slta', 'diploma_i', 'diploma_ii', 'diploma_iv', 'strata_ii', 'strata_iii'];
var dataset_pendidik = [feature.pekerjaan_pendidikan.f1, feature.pekerjaan_pendidikan.f2, feature.pekerjaan_pendidikan.f3, feature.pekerjaan_pendidikan.f4, feature.pekerjaan_pendidikan.f5, feature.pekerjaan_pendidikan.f6, feature.pekerjaan_pendidikan.f7, feature.pekerjaan_pendidikan.f8, feature.pekerjaan_pendidikan.f9, feature.pekerjaan_pendidikan.f10];
var nama_data_umur = ['Umur 0-4', 'Umur 5-9', 'Umur 10-14', 'Umur 15-19', 'Umur 20-24', 'Umur 25-29', 'Umur 30-34', 'Umur 35-39', 'Umur 40-44', 'Umur 45-49', 'Umur 50-54', 'Umur 55-59', 'Umur 60-64', 'Umur 65-69', 'Umur 70-74', 'Umur > 75'];
var dataset_umur = [feature.penduduk.f16, feature.penduduk.f17, feature.penduduk.f18, feature.penduduk.f19, feature.penduduk.f20, feature.penduduk.f21, feature.penduduk.f22, feature.penduduk.f23, feature.penduduk.f24, feature.penduduk.f25, feature.penduduk.f26, feature.penduduk.f27, feature.penduduk.f28, feature.penduduk.f29, feature.penduduk.f30];
var nama_data_pekerja = ['tidak_bekerja', 'aparatur_pemerintah', 'tenaga_pendidik', 'wiraswasta', 'pertanian', 'tenaga_kesehatan', 'pegawai', 'dokter', 'bidan', 'perawat', 'lainnya'];
var dataset_pekerja = [feature.pekerjaan_pendidikan.f11, feature.pekerjaan_pendidikan.f12, feature.pekerjaan_pendidikan.f13, feature.pekerjaan_pendidikan.f14, feature.pekerjaan_pendidikan.f15, feature.pekerjaan_pendidikan.f16, feature.pekerjaan_pendidikan.f18, feature.pekerjaan_pendidikan.f40, feature.pekerjaan_pendidikan.f41, feature.pekerjaan_pendidikan.f42, feature.pekerjaan_pendidikan.f45];
var colorPalette = ['#00D8B6', '#008FFB', '#FEB019', '#FF4560', '#775DD0']
var options_penduduk = {
series: [{
name: 'Penduduk',
data: dataset_penduduk
}],
chart: {
type: 'bar',
height: 350,
toolbar: {
tools: {
download: '<div style="margin-left: 25px;"><i class=" icon-download4"></i><span> Download</span></div>',
}
}
},
plotOptions: {
bar: {
horizontal: false,
columnWidth: '55%',
endingShape: 'rounded'
},
},
dataLabels: {
enabled: false
},
stroke: {
show: true,
width: 2,
colors: ['transparent']
},
xaxis: {
categories: nama_data_penduduk,
},
yaxis: {
title: {
text: 'Jumlah'
},
show: true
},
fill: {
type: 'gradient',
gradient: {
type: "vertical",
shadeIntensity: 1,
opacityFrom: 0.7,
opacityTo: 0.9,
colorStops: [{
offset: 0,
color: "#6BB8FF",
opacity: 1
}, {
offset: 20,
color: "#6BB8FF",
opacity: 1
}, {
offset: 60,
color: "#7282D8",
opacity: 1
}, {
offset: 100,
color: "#7282D8",
opacity: 1
}]
}
},
tooltip: {
y: {
formatter: function(val) {
var reverse = val.toString().split('').reverse().join(''),
ribuan = reverse.match(/\d{1,3}/g);
var ribuan = ribuan.join('.').split('').reverse().join('');
return ribuan
}
}
}
};
var options_agama = {
series: [{
name: 'Agama',
data: dataset_agama
}],
chart: {
type: 'bar',
height: 350,
toolbar: {
tools: {
download: '<div style="margin-left: 25px;"><i class=" icon-download4"></i><span> Download</span></div>',
}
}
},
plotOptions: {
bar: {
horizontal: false,
columnWidth: '55%',
endingShape: 'rounded'
},
},
dataLabels: {
enabled: false
},
stroke: {
show: true,
width: 2,
colors: ['transparent']
},
xaxis: {
categories: nama_data_agama,
},
yaxis: {
title: {
text: 'Jumlah'
},
show: true
},
fill: {
type: 'gradient',
gradient: {
type: "vertical",
shadeIntensity: 1,
opacityFrom: 0.7,
opacityTo: 0.9,
colorStops: [{
offset: 0,
color: "#6BB8FF",
opacity: 1
}, {
offset: 20,
color: "#6BB8FF",
opacity: 1
}, {
offset: 60,
color: "#7282D8",
opacity: 1
}, {
offset: 100,
color: "#7282D8",
opacity: 1
}]
}
},
tooltip: {
y: {
formatter: function(val) {
var reverse = val.toString().split('').reverse().join(''),
ribuan = reverse.match(/\d{1,3}/g);
var ribuan = ribuan.join('.').split('').reverse().join('');
return ribuan
}
}
}
};
var options_pendidik = {
series: [{
name: 'Informasi Pendidikan',
data: dataset_pendidik
}],
chart: {
type: 'bar',
height: 350,
toolbar: {
tools: {
download: '<div style="margin-left: 25px;"><i class=" icon-download4"></i><span> Download</span></div>',
}
}
},
plotOptions: {
bar: {
horizontal: false,
columnWidth: '55%',
endingShape: 'rounded'
},
},
dataLabels: {
enabled: false
},
stroke: {
show: true,
width: 2,
colors: ['transparent']
},
xaxis: {
categories: nama_data_pendidik,
},
yaxis: {
title: {
text: 'Jumlah'
},
show: true
},
fill: {
type: 'gradient',
gradient: {
type: "vertical",
shadeIntensity: 1,
opacityFrom: 0.7,
opacityTo: 0.9,
colorStops: [{
offset: 0,
color: "#6BB8FF",
opacity: 1
}, {
offset: 20,
color: "#6BB8FF",
opacity: 1
}, {
offset: 60,
color: "#7282D8",
opacity: 1
}, {
offset: 100,
color: "#7282D8",
opacity: 1
}]
}
},
tooltip: {
y: {
formatter: function(val) {
var reverse = val.toString().split('').reverse().join(''),
ribuan = reverse.match(/\d{1,3}/g);
var ribuan = ribuan.join('.').split('').reverse().join('');
return ribuan
}
}
}
};
var options_umur = {
series: [{
name: 'Umur',
data: dataset_umur
}],
chart: {
type: 'bar',
height: 350,
toolbar: {
tools: {
download: '<div style="margin-left: 25px;"><i class=" icon-download4"></i><span> Download</span></div>',
}
}
},
plotOptions: {
bar: {
horizontal: true,
columnWidth: '55%',
endingShape: 'rounded'
},
},
dataLabels: {
enabled: false
},
stroke: {
show: true,
width: 2,
colors: ['transparent']
},
xaxis: {
categories: nama_data_umur,
},
yaxis: {
title: {
text: 'Jumlah'
},
show: true
},
fill: {
type: 'gradient',
gradient: {
type: "horizontal",
shadeIntensity: 1,
opacityFrom: 0.7,
opacityTo: 0.9,
colorStops: [{
offset: 0,
color: "#6BB8FF",
opacity: 1
}, {
offset: 20,
color: "#6BB8FF",
opacity: 1
}, {
offset: 60,
color: "#7282D8",
opacity: 1
}, {
offset: 100,
color: "#7282D8",
opacity: 1
}]
}
},
tooltip: {
y: {
formatter: function(val) {
var reverse = val.toString().split('').reverse().join(''),
ribuan = reverse.match(/\d{1,3}/g);
var ribuan = ribuan.join('.').split('').reverse().join('');
return ribuan
}
}
}
};
var options_pekerja = {
series: [{
name: 'Informasi Pekerjaan',
data: dataset_pekerja
}],
chart: {
type: 'bar',
height: 350,
toolbar: {
tools: {
download: '<div style="margin-left: 25px;"><i class=" icon-download4"></i><span> Download</span></div>',
}
}
},
plotOptions: {
bar: {
borderRadius: 4,
horizontal: true,
},
},
dataLabels: {
enabled: false
},
xaxis: {
categories: nama_data_pekerja,
},
fill: {
type: 'gradient',
gradient: {
type: "horizontal",
shadeIntensity: 1,
opacityFrom: 0.7,
opacityTo: 0.9,
colorStops: [{
offset: 0,
color: "#6BB8FF",
opacity: 1
}, {
offset: 20,
color: "#6BB8FF",
opacity: 1
}, {
offset: 60,
color: "#7282D8",
opacity: 1
}, {
offset: 100,
color: "#7282D8",
opacity: 1
}]
}
},
tooltip: {
y: {
formatter: function(val) {
var reverse = val.toString().split('').reverse().join(''),
ribuan = reverse.match(/\d{1,3}/g);
var ribuan = ribuan.join('.').split('').reverse().join('');
return ribuan
}
}
}
};
var chart_penduduk = new ApexCharts(document.querySelector("#info_penduduk"), options_penduduk);
setTimeout(function() {
chart_penduduk.render();
}, 100);
var chart_pendidik = new ApexCharts(document.querySelector("#info_pendidik"), options_pendidik);
setTimeout(function() {
chart_pendidik.render();
}, 100);
var chart_umur = new ApexCharts(document.querySelector("#info_umur"), options_umur);
setTimeout(function() {
chart_umur.render();
}, 100);
var chart_pekerja = new ApexCharts(document.querySelector("#info_pekerjaan"), options_pekerja);
setTimeout(function() {
chart_pekerja.render();
}, 100);
var chart_agama = new ApexCharts(document.querySelector("#info_agama"), options_agama);
setTimeout(function() {
chart_agama.render();
}, 100);
},
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)
// }
// })
// });
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()
}
cek_overlay()
}
function bataskota() {
var checkBox = document.getElementById("batas_kota");
if (checkBox.checked == true) {
geo_batas.addTo(map)
} else {
geo_batas.remove()
}
cek_overlay()
}
function bataskec() {
var checkBox = document.getElementById("batas_kec");
if (checkBox.checked == true) {
geo_batas_kec.addTo(map)
} else {
geo_batas_kec.remove()
}
cek_overlay()
}
function georumah() {
var checkBox = document.getElementById("geo_building");
if (checkBox.checked == true) {
$(".help_bangunan").html('Polygon Bangunan dan Line Jalan terlihat pada zoom > 16')
} else {
$(".help_bangunan").html('')
}
cek_overlay()
}
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()
}
cek_overlay()
}
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) {
$("#modal_detail_non_kelurahan").modal("show")
if (feature.legend.f4 == 'NONE') {
var path_img = "static/img/image_null.png"
} else {
var path_img = `"static/image/tuplah/` + feature.legend.f4 + `"`
}
$(".gambar_keterangan").html(`<img src="` + path_img + `" alt="" style="width:100%;height:240px;border-top-left-radius: 10px;border-bottom-right-radius: 10px;">`)
$(".btn_action").html(`<div class="tombol-edit-keterangan text-center" style="
background-color: #5A9AFB;
position: absolute;
width: 40px;
height: 40px;
bottom: 2px;
right: 5px;
border: 1pt solid rosybrown;
border-radius: 8px;
">
<a href="#" class="btn" id="btn_edit_tuplah" style="border-bottom-left-radius: 8px;border-top-right-radius: 8px;width: 100%;height: 100%;bottom: 0px;color: white;"><i class="icon-pencil5"></i></a>
</div>`)
$(".nama_keterangan").html(feature.legend.f2)
$(".isi_keterangan").html(`
<input type="text" name="idtuplah" id="idtuplah" class="hidden" value="">
<input type="text" name="coordinatetuplah" id="coordinatetuplah" class="hidden" value="">
<input type="text" name="luastuplah" id="lwastuplah" class="hidden" value="">
<div class="col-md-12">
<div>
<div>
<span>Jenis Lahan</span>
</div>
<div>
<span>Null</span>
</div>
</div>
<div>
<div>
<span>Luas Lahan</span>
</div>
<div>
<span style="font-family: 'Roboto';">` + feature.legend.f3 + ` m2</span>
</div>
</div>
</div>`)
$('#idtuplah').val(feature.legend.f1);
$('#lwastuplah').val(feature.legend.f3);
$("#coordinatetuplah").val(feature.geometry);
$("#button_hide_panel").css("display", "block");
},
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()
}
cek_overlay()
}
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()
}
var id_poly = $('#idtuplah').val();
var lwastup = $("#lwastuplah").val();
$.ajax({
url: "{% url 'api:edit-tuplah' %}",
data: {
'idtuplah': id_poly
},
dataType: 'json',
success: function(data) {
$("#modal-edit-tuplah").modal("show")
$("#modal_detail_non_kelurahan").modal("toggle")
loaderPage(false);
$("#luas_tuplah_edit").val(lwastup);
let response = data
if (response.code == 0) {
setTimeout(function() {
map_edit_tuplah.invalidateSize();
}, 1000);
let lop_poly_edit = data['tuplah']['geometry']['coordinates'];
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];
for (var i = 0; i < geoj.length; i++) {
polygigi = [geoj[i][1], geoj[i][0]]
list_poly_edit.push(polygigi);
latt += geoj[i][0]
longg += geoj[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"
})
}
},
})
});
$(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) {
$("#modal_detail_non_kelurahan").modal('show');
if (feature.properties.f2 == null) {
var namajalan = "unnamed"
}
if (feature.properties.f6 == 'None') {
var path_img = "static/img/image_null.png"
} else {
var path_img = `"static/image/jalan/` + feature.properties.f6 + `"`
}
$(".gambar_keterangan").html(`<img src="` + path_img + `" alt="" style="width:100%;height:240px;border-top-left-radius: 10px;border-bottom-left-radius: 10px;">`)
$(".nama_keterangan").html(namajalan)
$(".btn_action").html(`<div class="tombol-edit-keterangan text-center" style="background-color: #5A9AFB;position: absolute;width: 40px;height: 40px;bottom: 2px;right: 5px;border: 1pt solid rosybrown;border-radius: 8px;">
<a href="#" id="btn_jalan" class="btn" style="border-bottom-left-radius: 8px;border-top-right-radius: 8px;width: 100%;height: 100%;bottom: 0px;color: white;"><i class="icon-pencil5"></i></a>
</div>
<div class="tombol-delete-keterangan text-center" style="background-color: indianred;position: absolute;width: 40px;height: 40px;bottom: 2px;right: 50px;border: 1pt solid rosybrown;border-radius: 10px;">
<a href="#" id="btn_hapus_jalan" class="btn" style="border-bottom-left-radius: 8px;border-top-right-radius: 8px;width: 100%;height: 100%;bottom: 0px;color: white;"><i class="icon-eraser2"></i></a>
</div>
`)
if (feature.properties.f7 != null) {
console.log(feature.properties.f7)
var list_history = feature.properties.f7
console.log(list_history[0].split(",")[0])
var perbaikan_jl = `<div class='row'>
<label class="col-md-8">` + list_history[0].split(",")[1] + `</label>
<a class="col-md-4" onclick="getdetailper(` + list_history[0].split(",")[0] + `)" data-toggle="modal" data-target="#modal_detail_perbaikan_dash"><i>Detail</i></a>
</div>
<a class="col-md-6" class="btn" id="btn_perbaikan_jalan"><i>Input Perbaikan</i></a>`
} else {
var perbaikan_jl = `<div class='row'>
<div class="col-md-6">
<label class="col-md-6">Null</label>
</div>
</div>
<a class="col-md-6" class="btn" id="btn_perbaikan_jalan"><i>Input Perbaikan</i></a>
`
}
$(".nama_keterangan").html(`
<div>
<span style="font-size: large;">
` + feature.properties.f2 + `
</span>
</div>
<div>
<span></span>
</div>
`)
$(".isi_keterangan").html(`
<input type="text" name="idjalan" id="idjalan" class="hidden" value="">
<input type="text" name="coordinatejalan" id="coordinatejalan" class="hidden" value="">
<div class="row">
<div class="col-md-6">
<div>
<span>Panjang Jalan</span>
</div>
<div>
<span>` + feature.properties.f3 + `m</span>
</div>
</div>
<div class="col-md-6">
<div>
<span>Lebar Jalan</span>
</div>
<div>
<span style="font-family: 'Roboto';">` + feature.properties.f4 + ` m</span>
</div>
</div>
</div>
<div>
<div>
<span>Tipe Jalan</span>
</div>
<div>
<span>` + feature.properties.f5 + `</span>
</div>
</div>
<div>
<div>
<span>Perbaikan Terakhir</span>
</div>
<div>
<span>` + perbaikan_jl + `</span>
</div>
</div>
`)
//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>`;
//}
//
$('#namajalan').val(feature.properties.f2);
$('#idjalan').val(feature.properties.f1);
$('#panjangjalan').val(feature.properties.f3);
$('#lebarjalan').val(feature.properties.f4);
$('#tipejalan').val(feature.properties.f5);
$("#coordinatejalan").val(feature.geometry);
}
});
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) {
$(".help_bangunan").html('Polygon Bangunan dan Line Jalan terlihat pada zoom > 16')
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 {
$(".help_bangunan").html('')
geo_jalan.clearLayers();
geo_jalan.remove();
}
cek_overlay()
}
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() {
$("#koordinat_cek").addClass("active")
$("#info_umum").removeClass("active")
$("#left-tab1-feas-upl-j").addClass("active")
$("#right-tab2-feas-upl-j").removeClass("active")
if (map_edit_jalan.hasLayer(polygon_edit_jalan)) {
polygon_edit_jalan.remove()
}
var id_poly = $('#idjalan').val();
$("#modal-jalan").modal("show")
$.ajax({
url: "{% url 'api:edit-jalan' %}",
data: {
'idjalan': id_poly
},
dataType: 'json',
success: function(data) {
loaderPage(false);
$("#modal_detail_non_kelurahan").modal("hide")
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", "#btn_hapus_jalan", function() {
$("#modal-hapus-jalan").modal("show")
$("#modal_detail_non_kelurahan").modal("hide")
var id_poly = $('#idjalan').val();
$.ajax({
url: "{% url 'api:edit-jalan' %}",
data: {
'idjalan': id_poly
},
dataType: 'json',
success: function(data) {
loaderPage(false);
$("#isi_modal_delete").html(`Hapus Jalan dengan nama jalan ` + data['nama'] + ``);
$("#idjlnhps").val(id_poly)
}
})
});
$('#btnhpsjalan').click(function() {
var id_poly = $('#idjlnhps').val();
$.ajax({
url: "{% url 'api:hapus-jalan' %}",
data: {
'idjalan': id_poly
},
dataType: 'json',
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-hapus-jalan").modal('hide');
})
} else {
swal({
title: response.info,
text: response.data,
type: "warning",
icon: "error",
confirmButtonColor: "#00BCD4"
})
}
}
});
});
$(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"
}, function() {
$("#modal-jalan").modal('hide');
})
} 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')
document.querySelector("#right-tab2-feas-upli > div > div:nth-child(6) > div > label").html(`Pimpinan`)
document.querySelector("#right-tab2-feas-upli > div > div:nth-child(3)").css("display", "block")
}
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);
}
});
};
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() {
$("#koordinat_cek").addClass("active")
$("#info_umum").removeClass("active")
$("#left-tab1-feas-upl-j").addClass("active")
$("#right-tab2-feas-upl-j").removeClass("active")
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]);
$("#map-insert > div.leaflet-control-container > div.leaflet-top.leaflet-left > div:nth-child(1) > div > div > a.leaflet-draw-draw-marker").css("display", "none")
}
})
});
$("#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');
});
// map.on('zoomend', function() {
// var zoom = map.getZoom();
// console.log(zoom)
// if (map.hasLayer(geo_po_cagar_budaya)) {
// geo_po_cagar_budaya.eachLayer(function(layer) {
// if (zoom >= 10 && (!layer.getTooltip())) {
// conten = `
// <div id="bottom-justified-data" style="text-align: center;">
// <div >
// <img src="static/img/image/` + layer.feature.administrasi.f4 + `" alt="Image" style="width: 150px!important;height: 125px;">
// </div>
// <div >
// <div style="font-family: Google Sans,Roboto,Arial,sans-serif;
// letter-spacing: 0">
// <p >
// ` + layer.feature.administrasi.f1 + `
// </p>
// </div>
// </div>
// </div>
// `;
// layer.bindTooltip(conten, {
// sticky: true,
// permanent: false,
// interactive: false,
// direction: 'top',
// offset: [0, -25],
// className: 'my-label'
// });
// } else if (zoom < 10 && (layer.getTooltip())) {
// //console.log('remove tooltip');
// layer.unbindTooltip();
// }
// });
// }
// if (map.hasLayer(geo_po_rumah_sakit)) {
// geo_po_rumah_sakit.eachLayer(function(layer) {
// if (zoom >= 10 && (!layer.getTooltip())) {
// if (layer.feature.administrasi.f8 == 'None') {
// var gmb = "rs.svg";
// } else {
// var gmb = layer.feature.administrasi.f8;
// }
// conten = `
// <div id="bottom-justified-data" style="text-align: center;">
// <div >
// <img src="static/img/image/` + gmb + `" alt="Image" style="width: 150px!important;height: 125px;">
// </div>
// <div >
// <div style="font-family: Google Sans,Roboto,Arial,sans-serif;
// letter-spacing: 0">
// <p >
// ` + layer.feature.administrasi.f1 + `
// </p>
// </div>
// </div>
// </div>
// `;
// layer.bindTooltip(conten, {
// sticky: true,
// permanent: false,
// interactive: false,
// direction: 'top',
// offset: [0, -25],
// className: 'my-label'
// });
// } else if (zoom < 10 && (layer.getTooltip())) {
// //console.log('remove tooltip');
// layer.unbindTooltip();
// }
// });
// }
// if (map.hasLayer(geo_po_spbu)) {
// geo_po_spbu.eachLayer(function(layer) {
// if (zoom >= 10 && (!layer.getTooltip())) {
// if (layer.feature.administrasi.f8 == 'None') {
// var gmb = "rs.svg";
// } else {
// var gmb = layer.feature.administrasi.f8;
// }
// conten = `
// <div id="bottom-justified-data" style="text-align: center;">
// <div >
// <img src="static/img/image/` + gmb + `" alt="Image" style="width: 150px!important;height: 125px;">
// </div>
// <div >
// <div style="font-family: Google Sans,Roboto,Arial,sans-serif;
// letter-spacing: 0">
// <p >
// ` + layer.feature.administrasi.f1 + `
// </p>
// </div>
// </div>
// </div>
// `;
// layer.bindTooltip(conten, {
// sticky: true,
// permanent: false,
// interactive: false,
// direction: 'top',
// offset: [0, -25],
// className: 'my-label'
// });
// } else if (zoom < 10 && (layer.getTooltip())) {
// //console.log('remove tooltip');
// layer.unbindTooltip();
// }
// });
// }
// if (map.hasLayer(geo_po_stasiun)) {
// geo_po_stasiun.eachLayer(function(layer) {
// if (zoom >= 10 && (!layer.getTooltip())) {
// if (layer.feature.administrasi.f8 == 'None') {
// var gmb = "rs.svg";
// } else {
// var gmb = layer.feature.administrasi.f8;
// }
// conten = `
// <div id="bottom-justified-data" style="text-align: center;">
// <div >
// <img src="static/img/image/` + gmb + `" alt="Image" style="width: 150px!important;height: 125px;">
// </div>
// <div >
// <div style="font-family: Google Sans,Roboto,Arial,sans-serif;
// letter-spacing: 0">
// <p >
// ` + layer.feature.administrasi.f1 + `
// </p>
// </div>
// </div>
// </div>
// `;
// layer.bindTooltip(conten, {
// sticky: true,
// permanent: false,
// interactive: false,
// direction: 'top',
// offset: [0, -25],
// className: 'my-label'
// });
// } else if (zoom < 10 && (layer.getTooltip())) {
// //console.log('remove tooltip');
// layer.unbindTooltip();
// }
// });
// }
// if (map.hasLayer(geo_po_terminal)) {
// geo_po_terminal.eachLayer(function(layer) {
// if (zoom >= 10 && (!layer.getTooltip())) {
// if (layer.feature.administrasi.f8 == 'None') {
// var gmb = "rs.svg";
// } else {
// var gmb = layer.feature.administrasi.f8;
// }
// conten = `
// <div id="bottom-justified-data" style="text-align: center;">
// <div >
// <img src="static/img/image/` + gmb + `" alt="Image" style="width: 150px!important;height: 125px;">
// </div>
// <div >
// <div style="font-family: Google Sans,Roboto,Arial,sans-serif;
// letter-spacing: 0">
// <p >
// ` + layer.feature.administrasi.f1 + `
// </p>
// </div>
// </div>
// </div>
// `;
// layer.bindTooltip(conten, {
// sticky: true,
// permanent: false,
// interactive: false,
// direction: 'top',
// offset: [0, -25],
// className: 'my-label'
// });
// } else if (zoom < 10 && (layer.getTooltip())) {
// //console.log('remove tooltip');
// layer.unbindTooltip();
// }
// });
// }
// });
</script>
<script>
//klik kanan begin
map.on('contextmenu', function(e) {
$("#modal_option_create").modal("show");
$("#map-create-all").remove();
$(".btn_create_jalan").click(function() {
$("#create_all > div > ul").css("display", "block")
$("#modal__create").modal("show");
$(".title-create").html("Create Jalan")
$(".tombol_action_create").html(`<input type="button" id="create-jal" value="Create" style="z-index: 1000;position:relative;">`)
$(".tab_1").html("Koordinat")
$(".tab_2").html("Informasi Jalan")
$(".tombol_save_create").html(`<input type="button" class="btn btn-primary" id="create_save_jalan" value="SAVE" style="margin-right:30px;">
<input type="text" name="poly_create" class="hidden" id="poly_create_jalan" value="">`)
$("#koordinatjalan").html(`
<div class="form-group">
<div id="map-create-all" style="height: 300px;">
<div class="tombol_action_create">
<input type="button" id="create-jal" value="Create" style="z-index: 1000;position:relative;">
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label" style="margin-top:10px">Image</label>
<div class="col-lg-9" style="margin-top:10px">
<input type="file" id="img_jalan" name="images[]" multiple accept="image/jpg,image/png,image/jpeg,image/gif">
</div>
</div>
</div>`)
$("#informasi_create").html(`
<div class="row" style="margin-top: 15px;">
<div class="form-group">
<label class="col-lg-4 control-label lbl-top" style="margin-top: 15px;">Nama Jalan</label>
<div class="col-lg-8">
<input id="nama_jalan_create" type="text" class="form-control" value="" required>
</div>
</div>
</div>
<div class="row" style="margin-top: 15px;">
<div class="form-group">
<label class="col-lg-4 control-label lbl-top" style="margin-top: 15px;">Panjang Jalan (m)</label>
<div class="col-lg-8">
<input id="panjang_jalan_create" type="text" class="form-control" value="" required>
</div>
</div>
</div>
<div class="row" style="margin-top: 15px;">
<div class="form-group">
<label class="col-lg-4 control-label lbl-top" style="margin-top: 15px;">Lebar Jalan (m)</label>
<div class="col-lg-8">
<input id="lebar_jalan_create" type="text" class="form-control" value="" required>
</div>
</div>
</div>
<div class="row" style="margin-top: 15px;">
<div class="form-group">
<label class="col-lg-4 control-label lbl-top" style="margin-top: 15px;">Tipe Jalan</label>
<div class="col-lg-8">
<input id="tipe_jalan_create" type="text" class="form-control" value="" required>
</div>
</div>
</div>
`);
var map_create_all = L.map('map-create-all', {
editable: true,
zoomControl: false,
drawControl: true
}).setView([e.latlng.lat, e.latlng.lng], 20);
L.tileLayer('https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}', {
maxZoom: 22,
minZoom: 4,
}).addTo(map_create_all);
setTimeout(function() {
map_create_all.invalidateSize();
}, 500);
var lineDraweredit = new L.Draw.Polyline(map_create_all, polygon_options);
lineDraweredit.on("click", function(event) {
shapecoords.innerHTML = event.latlng.toString();
map_create_all.fire("click", event); // Trigger a map click as well.
});
map_create_all.on('draw:created', function(e) {
var type = e.layerType,
layer = e.layer;
layer.options.color = 'yellow';
layer.options.weight = 10;
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();
$("#panjang_jalan_create").val((totalDistance).toFixed(2) + ' meter');
}
$("#poly_create_jalan").val(JSON.stringify(layer.toGeoJSON()));
layer.addTo(map_create_all);
});
$("#create-jal").click(function() {
lineDraweredit.enable();
})
$("#map-create-all>div.leaflet-control-container>div.leaflet-top.leaflet-left>div>div>div").css("display", "none")
$("#map-create-all > div.leaflet-control-container > div.leaflet-top.leaflet-left > div").css("display", "none")
})
$(".btn_create_bangunan").click(function() {
$("#create_all > div > ul").css("display", "block")
$("#modal__create").modal("show");
$(".title-create").html("Create Bangunan")
$(".tombol_action_create").html(`<input type="button" id="create" value="Create" style="z-index: 1000;position:relative;">`)
$(".tab_1").html("Koordinat")
$(".tab_2").html("Informasi Bangunan")
$(".tombol_save_create").html(`<input type="button" class="btn btn-primary" id="create_save_bangunan" value="SAVE" style="margin-right:30px;">
<input type="text" name="poly_create" class="hidden" id="poly_create_bangunan" value="">`)
$("#koordinatjalan").html(`
<div class="form-group">
<div id="map-create-all" style="height: 300px;">
<div class="tombol_action_create">
<input type="button" id="create" value="Create" style="z-index: 1000;position:relative;">
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label" style="margin-top:10px">Image</label>
<div class="col-lg-9" style="margin-top:10px">
<input type="file" id="img_bangunan" name="images[]" multiple accept="image/jpg,image/png,image/jpeg,image/gif">
</div>
</div>
</div>`)
$("#informasi_create").html(`
<div class="row" style="margin-top: 15px;">
<div class="form-group">
<label class="col-lg-3 control-label lbl-top" >Nama Bangunan</label>
<div class="col-lg-9">
<input id="name_create" type="text" class="form-control" value="" required>
</div>
</div>
</div>
<div class="row" style="margin-top: 15px;">
<div class="form-group">
<label class="col-lg-3 control-label lbl-top" >Jenis Bangunan</label>
<div class="col-lg-9">
<select style="border-bottom: 1px solid rgb(83, 83, 83) !important;" id="tipe_point_b" data-placeholder="select point.." class="select-size-md">
<option value="null" selected disabled>-- Pilih Jenis Point --</option>
<option value="bangunan">Bangunan Biasa</option>
<option value="kantor_administrasi">Kantor Administrasi</option>
<option value="layanan_kesehatan">Layanan Kesehatan</option>
<option value="puskesmas">Puskesmas</option>
<option value="rumah_sakit">Rumah Sakit</option>
<option value="sarana_ibadah">Sarana Ibadah</option>
<option value="sarana_pendidikan">Sarana Pendidikan</option>
<option value="spbu">SPBU</option>
<option value="stasiun">Stasiun</option>
<option value="terminal_bus">Terminal Bus</option>
<option value="cagar_budaya">Cagar Budaya dan Tempat Wisata</option>
<option value="gardu_listrik">Gardu Listrik</option>
</select>
</div>
</div>
</div>
<div class="row" style="margin-top: 15px;">
<div class="form-group">
<label class="col-lg-3 control-label lbl-top" >Tipe Bangunan</label>
<div class="col-lg-9">
<select style="border-bottom: 1px solid rgb(83, 83, 83) !important;width: 220px;" id="tipe_point_2_b" data-placeholder="select point.." class="select-size-md">
<option value="null" selected disabled>-- Pilih Tipe Point --</option>
</select>
</div>
</div>
</div>
<div class="row" style="margin-top: 15px;">
<div class="form-group">
<label class="col-lg-3 control-label lbl-top" >Nama Point</label>
<div class="col-lg-9">
<select style="border-bottom: 1px solid rgb(83, 83, 83) !important;width: 220px;" id="tipe_point_3_b" data-placeholder="select point.." class="select-size-md">
<option value="null" selected disabled>-- Pilih Point --</option>
</select>
</div>
</div>
</div>
<div class="row" style="margin-top: 15px;">
<div class="form-group">
<label class="col-lg-3 control-label lbl-top" >Informasi Bangunan</label>
<div class="col-lg-9">
<input id="info_create" type="text" class="form-control" value="" placeholder="Rumah/Gedung/Ruko/Pabrik/dsb" required>
</div>
</div>
</div>
<div class="row" style="margin-top: 15px;">
<div class="form-group">
<label class="col-lg-3 control-label lbl-top" >Alamat</label>
<div class="col-lg-9">
<input id="alamat_create" type="text" class="form-control" value="" placeholder="cth : Jl. Contoh Rt 005/01 No.01" required>
</div>
</div>
</div>
<div class="row" style="margin-top: 15px;">
<div class="form-group">
<label class="col-lg-3 control-label lbl-top" >Luas Bangunan</label>
<div class="col-lg-6">
<input id="luas_bangunan_create" type="text" class="form-control" value="" required>
</div>
<div class="col-lg-3">
<select id="satuan_luas_bangunan" >
<option>m2</option>
</select>
</div>
</div>
</div>
<div class="row" style="margin-top: 15px;">
<div class="form-group">
<label class="col-lg-3 control-label lbl-top">Luas Tanah</label>
<div class="col-lg-6">
<input id="luas_tanah_create" type="text" class="form-control" value="" required>
</div>
<div class="col-lg-3">
<select id="satuan_luas_tanah">
<option>m2</option>
</select>
</div>
</div>
</div>
<div class="row" style="margin-top: 15px;">
<div class="form-group">
<label class="col-lg-3 control-label lbl-top">Tinggi Bangunan</label>
<div class="col-lg-6">
<input id="tinggi_bangunan_create" type="text" class="form-control" value="" required>
</div>
<div class="col-lg-3">m</div>
</div>
</div>
<div class="row" style="margin-top: 15px;">
<div class="form-group">
<label class="col-lg-3 control-label lbl-top">Jumlah Lantai</label>
<div class="col-lg-9">
<input id="lantai" type="text" class="form-control" value="" placeholder="Estimasi Per Lantai = 3m" required>
</div>
</div>
</div>
<div class="row" style="margin-top: 15px;">
<div class="form-group">
<label class="col-lg-3 control-label lbl-top" >Pemilik</label>
<div class="col-lg-9">
<input id="pemilik_create" type="text" class="form-control" value="" placeholder="cth : Ali Budiman, S.Si." required>
</div>
</div>
</div>
`);
var map_create_all = L.map('map-create-all', {
editable: true,
zoomControl: false,
drawControl: true
}).setView([e.latlng.lat, e.latlng.lng], 20);
L.tileLayer('https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}', {
maxZoom: 22,
minZoom: 4,
}).addTo(map_create_all);
setTimeout(function() {
map_create_all.invalidateSize();
}, 500);
$('#create').click(function() {
polygonDraweredit.enable();
});
var Marker = {};
var Poly = {};
map_create_all.on(L.Draw.Event.CREATED, function(e) {
var layer = e.layer;
$("#poly_create_bangunan").empty();
var type = e.layerType;
var layer = e.layer;
var shape = layer.toGeoJSON();
let geoShape = shape.geometry.coordinates[0];
let kordinat = "";
for (j in geoShape) {
kordinat += geoShape[j][0] + ' ' + geoShape[j][1];
if (j <= (geoShape.length - 2)) {
kordinat += ', ';
}
}
window.thisBaseDrawPolygonLayer = layer;
$("#poly_create_bangunan").val(JSON.stringify(kordinat));
var seeArea = L.GeometryUtil.geodesicArea(layer.getLatLngs()[0]);
var fixarea = seeArea.toFixed(3)
$("#luas_bangunan_create").val(fixarea);
});
polygon_options = {
showArea: false,
shapeOptions: {
stroke: true,
color: '#6e83f0',
weight: 1.5,
opacity: 2,
fill: false,
fillColor: null, //same as color by default
clickable: true
}
}
var polygonDraweredit = new L.Draw.Polygon(map_create_all, polygon_options);
polygonDraweredit.on("click", function(event) {
shapecoords.innerHTML = event.latlng.toString();
map_create_all.fire("click", event); // Trigger a map click as well.
});
map_create_all.on('draw:created', function(e) {
var type = e.layerType,
layer = e.layer;
var lay = layer.addTo(map_create_all);
Poly = lay;
});
$("#map-create-all > div.leaflet-control-container > div.leaflet-top.leaflet-left > div").css("display", "none")
});
$(".btn_create_lahan").click(function() {
$("#create_all > div > ul").css("display", "block")
$("#modal__create").modal("show");
$(".title-create").html("Create Lahan")
$(".tombol_action_create").html(`<input type="button" id="create" value="Create" style="z-index: 1000;position:relative;">`)
$(".tab_1").html("Koordinat")
$(".tab_2").html("Informasi Lahan")
$(".tombol_save_create").html(`<input type="button" class="btn btn-primary" id="create_save_lahan" value="SAVE" style="margin-right:30px;">
<input type="text" name="poly_create" class="hidden" id="poly_create_lahan" value="">`)
$("#koordinatjalan").html(`
<div class="form-group">
<div id="map-create-all" style="height: 300px;">
<div class="tombol_action_create">
<input type="button" id="create" value="Create" style="z-index: 1000;position:relative;">
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label" style="margin-top:10px">Image</label>
<div class="col-lg-9" style="margin-top:10px">
<input type="file" id="img_lahan" name="images[]" multiple accept="image/jpg,image/png,image/jpeg,image/gif">
</div>
</div>
</div>`)
$("#informasi_create").html(`
<div class="row" style="margin-top: 15px;">
<div class="form-group">
<label class="col-lg-3 control-label lbl-top" >Nama Lahan</label>
<div class="col-lg-9">
<input id="name_create" type="text" class="form-control" value="" required>
</div>
</div>
</div>
<div class="row" style="margin-top: 15px;">
<div class="form-group">
<label class="col-lg-3 control-label lbl-top" >Jenis Lahan</label>
<div class="col-lg-9">
<select style="border-bottom: 1px solid rgb(83, 83, 83) !important;" id="tipe_point_lahan" data-placeholder="select point.." class="select-size-md">
<option value="null" selected disabled>-- Pilih Jenis Lahan --</option>
<option value="Belukar">Belukar</option>
<option value="Belukar Rawa">Belukar Rawa</option>
<option value="Hutan Lahan Kering Primer">Hutan Lahan Kering Primer</option>
<option value="Hutan Lahan Kering Sekunder">Hutan Lahan Kering Sekunder</option>
<option value="Hutan Tanaman">Hutan Tanaman</option>
<option value="Pemukiman">Pemukiman</option>
<option value="Perkebunan">Perkebunan</option>
<option value="Pertambangan">Pertambangan</option>
<option value="Pertanian Lahan Kering">Pertanian Lahan Kering</option>
<option value="Pertanian Lahan Kering Campur">Pertanian Lahan Kering Campur</option>
<option value="Savana / Padang rumput">Savana / Padang rumput</option>
<option value="Sawah">Sawah</option>
<option value="Tanah Terbuka">Tanah Terbuka</option>
<option value="Transmigrasi">Transmigrasi</option>
</select>
</div>
</div>
</div>
<div class="row" style="margin-top: 15px;">
<div class="form-group">
<label class="col-lg-3 control-label lbl-top" >Tahun</label>
<div class="col-lg-9">
<input id="tahun_create" type="text" class="form-control" value="" required>
</div>
</div>
</div>
<div class="row" style="margin-top: 15px;">
<div class="form-group">
<label class="col-lg-3 control-label lbl-top" >Luas Lahan</label>
<div class="col-lg-6">
<input id="luas_lahan_create" type="text" class="form-control" value="" required>
</div>
<div class="col-lg-3" style="margin-top:8px;">
<span>m2</span>
</div>
</div>
</div>
`);
var nowyear = new Date().getFullYear();
$("#tahun_create").val(nowyear);
var map_create_all = L.map('map-create-all', {
editable: true,
zoomControl: false,
drawControl: true
}).setView([e.latlng.lat, e.latlng.lng], 20);
L.tileLayer('https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}', {
maxZoom: 22,
minZoom: 4,
}).addTo(map_create_all);
setTimeout(function() {
map_create_all.invalidateSize();
}, 500);
$('#create').click(function() {
polygonDraweredit.enable();
});
var Marker = {};
var Poly = {};
map_create_all.on(L.Draw.Event.CREATED, function(e) {
var layer = e.layer;
$("#poly_create_lahan").empty();
var type = e.layerType;
var layer = e.layer;
var shape = layer.toGeoJSON();
let geoShape = shape.geometry.coordinates[0];
let kordinat = "";
for (j in geoShape) {
kordinat += geoShape[j][0] + ' ' + geoShape[j][1];
if (j <= (geoShape.length - 2)) {
kordinat += ', ';
}
}
window.thisBaseDrawPolygonLayer = layer;
$("#poly_create_lahan").val(JSON.stringify(kordinat));
var seeArea = L.GeometryUtil.geodesicArea(layer.getLatLngs()[0]);
var fixarea = seeArea.toFixed(3)
$("#luas_lahan_create").val(fixarea);
});
polygon_options = {
showArea: false,
shapeOptions: {
stroke: true,
color: '#6e83f0',
weight: 1.5,
opacity: 2,
fill: false,
fillColor: null, //same as color by default
clickable: true
}
}
var polygonDraweredit = new L.Draw.Polygon(map_create_all, polygon_options);
// polygonDraweredit.on("click", function(event) {
// shapecoords.innerHTML = event.latlng.toString();
// map_create_all.fire("click", event); // Trigger a map click as well.
// });
map_create_all.on('draw:created', function(e) {
var type = e.layerType,
layer = e.layer;
var lay = layer.addTo(map_create_all);
Poly = lay;
});
$("#map-create-all > div.leaflet-control-container > div.leaflet-top.leaflet-left > div").css("display", "none")
});
$(".btn_create_point").click(function() {
$("#modal__create").modal("show");
$(".title-create").html("Create Point")
$(".tombol_action_create").html(``)
$(".tab_1").html("Koordinat")
$(".tab_2").html("Informasi Point")
$("#create_all > div > ul").css("display", "block")
$(".tombol_save_create").html(`<input type="button" class="btn btn-primary" id="btnsavepoint" value="SAVE">
<input type="text" name="poly_create_point" class="hidden" id="poly_create_point" value="">`)
$("#koordinatjalan").html(`
<div class="form-group">
<div id="map-create-all" style="height: 300px;">
<!-- <div class="tombol_action_create">
<input type="button" class="leaflet-draw-draw-marker" value="Create" style="z-index: 1000;position:relative;">
</div> -->
</div>
<div class="form-group">
<label class="col-lg-2 control-label" style="margin-top:10px">Image</label>
<div class="col-lg-9" style="margin-top:10px">
<input type="file" id="gambar_pitik" name="images[]" multiple accept="image/jpg,image/png,image/jpeg,image/gif">
</div>
</div>
</div>`)
$("#informasi_create").html(`
<div class="row" style="margin-top: 15px;">
<div class="form-group">
<label class="col-lg-3 control-label lbl-top" style="margin-top: 15px;">Nama Point</label>
<div class="col-lg-9">
<input id="name_create_point" type="text" class="form-control" value="" required>
</div>
</div>
</div>
<div class="row" style="margin-top: 15px;">
<div class="form-group">
<label class="col-lg-3 control-label lbl-top" style="margin-top: 15px;">Jenis Point</label>
<div class="col-lg-9">
<select style="border-bottom: 1px solid rgb(83, 83, 83) !important;" id="tipe_point" data-placeholder="select point.." class="select-size-md">
<option value="null" selected disabled>-- Pilih Jenis Point --</option>
<option value="kantor_administrasi">Kantor Administrasi</option>
<option value="layanan_kesehatan">Layanan Kesehatan</option>
<option value="puskesmas">Puskesmas</option>
<option value="rumah_sakit">Rumah Sakit</option>
<option value="sarana_ibadah">Sarana Ibadah</option>
<option value="sarana_pendidikan">Sarana Pendidikan</option>
<option value="spbu">SPBU</option>
<option value="stasiun">Stasiun</option>
<option value="terminal_bus">Terminal Bus</option>
<option value="cagar_budaya">Cagar Budaya dan Tempat Wisata</option>
<option value="gardu_listrik">Gardu Listrik</option>
</select>
</div>
</div>
</div>
<div class="row" style="margin-top: 15px;">
<div class="form-group">
<label class="col-lg-3 control-label lbl-top" style="margin-top: 15px;">Tipe Point</label>
<div class="col-lg-9">
<select style="border-bottom: 1px solid rgb(83, 83, 83) !important;width: 220px;" id="tipe_point_2" data-placeholder="select point.." class="select-size-md">
<option value="null" selected disabled>-- Pilih Tipe Point --</option>
</select>
</div>
</div>
</div>
<div class="row" style="margin-top: 15px;">
<div class="form-group">
<label class="col-lg-3 control-label lbl-top" style="margin-top: 15px;">Alamat</label>
<div class="col-lg-9">
<input id="alamat_create_point" type="text" class="form-control" value="" placeholder="cth : Jl. Contoh Rt 005/01 No.01" required>
</div>
</div>
</div>
<div class="row" style="margin-top: 15px;">
<div class="form-group">
<label class="col-lg-3 control-label lbl-top" style="margin-top: 15px;">Luas Tanah</label>
<div class="col-lg-6">
<input id="luas_tanah_point" type="text" class="form-control" value="" required>
</div>
<div class="col-lg-3">
<select id="satuan_luas_tanah" style="margin-top: 15px;">
<option>m2</option>
</select>
</div>
</div>
</div>
<div class="row" style="margin-top: 15px;">
<div class="form-group">
<label class="col-lg-3 control-label lbl-top" style="margin-top: 15px;">Pimpinan</label>
<div class="col-lg-9">
<input id="pemilik_point" type="text" class="form-control" value="" placeholder="cth : Ali Budiman, S.Si." required>
</div>
</div>
</div>
`);
var map_create_all = L.map('map-create-all', {
editable: true,
zoomControl: false,
drawControl: true
}).setView([e.latlng.lat, e.latlng.lng], 20.5);
L.tileLayer('https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}', {
maxZoom: 22,
minZoom: 4,
}).addTo(map_create_all);
setTimeout(function() {
map_create_all.invalidateSize();
}, 1000);
$(".leaflet-draw-draw-marker").html('<span>Create</span>')
var drawControl = new L.Control.Draw(drawPluginOptions);
map_create_all.addControl(drawControl);
var editableLayers = new L.FeatureGroup();
map_create_all.addLayer(editableLayers);
// define custom marker
var MyCustomMarker = L.Icon.extend({
options: {
shadowUrl: null,
iconAnchor: new L.Point(12, 12),
iconSize: new L.Point(24, 24),
}
});
var drawPluginOptions = {
position: 'topright',
draw: {
marker: {
title: "soyel1",
icon: new MyCustomMarker()
},
marker: true
},
edit: {
featureGroup: editableLayers, //REQUIRED!!
remove: true
}
};
var drawControl = new L.Control.Draw(drawPluginOptions);
map_create_all.addControl(drawControl);
var editableLayers = new L.FeatureGroup();
map_create_all.addLayer(editableLayers);
map_create_all.on('draw:created', function(e) {
var type = e.layerType,
layer = e.layer;
editableLayers.addLayer(layer);
$("#poly_create_point").val(JSON.stringify(layer.toGeoJSON()));
$("#modal_point").modal()
map.closePopup();
});
$("#map-create-all > div.leaflet-control-container > div.leaflet-top.leaflet-left > div:nth-child(2) > div > div").css("display", "none")
$(".leaflet-draw-draw-marker").css("padding", "0px!important")
$(".leaflet-draw-draw-marker").css("width", "100%!important")
$("#map-create-all > div.leaflet-control-container > div.leaflet-top.leaflet-right").css("display", "none")
$("#map-create-all > div.leaflet-control-container > div.leaflet-top.leaflet-left > div:nth-child(1) > div > div > a.leaflet-draw-draw-polyline").css("display", "none")
$("#map-create-all > div.leaflet-control-container > div.leaflet-top.leaflet-left > div:nth-child(2) > div > div > a.leaflet-draw-draw-marker").css("display", "block!important")
})
$("#tipe_point").change(function() {
var tipe = $(this).val();
$.ajax({
url: "{% url 'api:change-tipe' %}",
data: {
'tipe': tipe
},
dataType: 'json',
success: function(data) {
console.log(data)
var data_all_kab = []
for (var i = 0; i < data['result'].length; i++) {
var data_k = data['result'][i][0];
var data_kab = `<option value="` +
data_k +
`">` +
data_k +
`</option>`;
data_all_kab.push(data_kab)
};
$('#tipe_point_2').html(`<option value="null" selected disabled>-- Pilih Tipe Point --</option>` + data_all_kab);
}
});
});
$("#tipe_point_b").change(function() {
var tipe = $(this).val();
$.ajax({
url: "{% url 'api:change-tipe' %}",
data: {
'tipe': tipe
},
dataType: 'json',
success: function(data) {
var data_all_kab = []
for (var i = 0; i < data['result'].length; i++) {
var data_k = data['result'][i][0];
console.log(data_k)
var data_kab = `<option value="` + data_k + `">` + data_k + `</option>`;
data_all_kab.push(data_kab)
};
$('#tipe_point_2_b').html(`<option value="null" selected disabled>-- Pilih Tipe Point --</option>` + data_all_kab);
}
});
});
$("#tipe_point_2_b").change(function() {
var jenis = $(this).val();
var tipx = $("#tipe_point_b").val();
$.ajax({
url: "{% url 'api:change-jenis' %}",
data: {
'tipe': tipx,
'jenis': jenis
},
dataType: 'json',
success: function(data) {
console.log(data)
var data_all_kab = []
for (var i = 0; i < data['result'].length; i++) {
var data_id = data['result'][i][0];
var data_po = data['result'][i][1];
var data_kab = `<option value="` + data_id + `">` + data_po + `</option>`;
data_all_kab.push(data_kab)
};
$('#tipe_point_3_b').html(`<option value="null" selected disabled>-- Pilih Point --</option>` + data_all_kab);
}
});
});
$(".btn_cek_KDBKLB").click(function() {
$("#koordinatjalan").addClass("active")
$("#informasi_create").removeClass("active")
$("#tab_koor").addClass("active")
$("#tab_info").removeClass("active")
$("#modal__create").modal("show");
$(".title-create").html("Cek KDB & KLB")
$(".tombol_save_create").html('')
$(".tab_1").html("Koordinat")
$(".tab_2").html("Informasi")
$("#create_all > div > ul").css("display", "none")
$("#koordinatjalan").html(`
<div class="jumlah_lantai" style="margin-top: -15px;">jumlah_lantai : 0
</div>
<div class="form-group">
<div id="map-create-all" style="height: 300px;">
<!-- <div class="tombol_action_create">
<input type="button" class="leaflet-draw-draw-marker" value="Create" style="z-index: 1000;position:relative;">
</div> -->
<div style="margin:10px;">
<input type="button" id="create_poly_rumah" value="Create Polygon Rumah" style="z-index: 1000;position:relative;border: transparent;border-radius: 5px;display:none;">
<input type="button" id="create_poly_tanah" value="Create Polygon Tanah" style="z-index: 1000;position:relative;border: transparent;border-radius: 5px;background: antiquewhite;">
<input type="button" id="delete_poly" value="Reset" style="z-index: 1000;position:relative;background: azure;border: transparent;border-radius: 5px;display:none;margin-top: 5px;">
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="row" style="margin-top: 5px;margin-right:5px!important;">
<div class="form-group">
<label class="control-label lbl-top">Luas Lantai (m2)</label>
<div class="">
<input id="luas_polygon_lantai" type="text" class="form-control" value="" required>
</div>
<div class="alert alert-danger" id="notificationluaslantai" style="display: none;margin: 0px;padding-top: 0px;padding-bottom: 0px;font-size: 10px;position: absolute;top: -5px;left: 110px;">
</div>
</div>
</div>
<div class="row" style="margin-top: 5px;margin-right:5px!important;">
<div class="form-group">
<label class="control-label lbl-top">Luas Rumah (m2)</label>
<div class="">
<input id="luas_polygon_rumah" type="text" class="form-control" value="" required>
</div>
<div class="alert alert-danger" id="notificationluasrumah" style="display: none;margin: 0px;padding-top: 0px;padding-bottom: 0px;font-size: 10px;position: absolute;top: -5px;left: 110px;">
</div>
</div>
</div>
<div class="row" style="margin-top: 5px;margin-right:5px!important;">
<div class="form-group">
<label class="control-label lbl-top">Luas Tanah (m2)</label>
<div class="">
<input id="luas_polygon_tanah" type="text" class="form-control" value="" required>
</div>
<div class="alert alert-danger" id="notificationluastanah" style="display: none;margin: 0px;padding-top: 0px;padding-bottom: 0px;font-size: 10px;position: absolute;top: -5px;left: 110px;">
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row" style="margin-top: 5px;margin-left:5px!important;">
<div class="form-group">
<label class="control-label lbl-top">Sisa Luas Tanah (m2):</label>
<div class="">
<input id="sisa_luas_tanah" type="text" class="form-control" value="" required disabled>
</div>
</div>
</div>
<div class="row" style="margin-top: 5px;margin-left:5px!important;">
<div class="form-group">
<label class="control-label lbl-top">KDB (%):</label>
<div class="">
<input id="KDB_polygon_rumah" type="text" class="form-control" value="" required disabled>
</div>
</div>
</div>
<div class="row" style="margin-top: 5px;margin-left:5px!important;">
<div class="form-group">
<label class="control-label lbl-top">KLB :</label>
<div class="">
<input id="KLB_polygon_rumah" type="text" class="form-control" value="" required disabled>
</div>
</div>
</div>
</div>
</div>
</div>`)
$("#informasi_create").html(``);
var map_create_all = L.map('map-create-all', {
editable: true,
zoomControl: false,
drawControl: true
}).setView([e.latlng.lat, e.latlng.lng], 20.5);
L.tileLayer('https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}', {
maxZoom: 22,
minZoom: 4,
}).addTo(map_create_all);
setTimeout(function() {
map_create_all.invalidateSize();
}, 500);
$("#map-create-all > div.leaflet-control-container > div.leaflet-top.leaflet-left > div > div > div").css("display", "none")
$("#create_poly_rumah").click(function() {
polygonDraweredit.enable();
$("#create_poly_tanah").val('tambah polygon rumah')
})
$("#create_poly_tanah").click(function() {
$('#create_poly_rumah').css("display", "block")
$('#create_poly_tanah').css("display", "none")
$('#delete_poly').css("display", "block")
polygonDraweredit_tanah.enable();
})
// function get_luas(lt_p, lo_p) {
// var lt_po = lt_p
// var lo_po = lo_p
//
// var lat_rad = []
// var YY = []
// var XX = []
// var area = []
//
// for (var i = 0; i < lt_po.length; i++) {
// lt_rad = lt_po[i] / 180 * (22 / 7)
// lat_rad.push(lt_rad)
// }
//
// for (var y = 0; y < lt_po.length; y++) {
// if (y == 0 || y == lt_po.length - 1) {
// YY.push(0)
// } else {
// yyy = (lt_po[y] - lt_po[0]) / 360 * (6378137 * 2 * (22 / 7))
// YY.push(yyy)
// }
// }
//
// for (var x = 0; x < lo_po.length; x++) {
// if (x == 0 || x == lo_po.length - 1) {
// XX.push(0)
// } else {
// xxx = (lo_po[x] - lo_po[0]) / 360 * (6378137 * 2 * (22 / 7) * Math.cos(lat_rad[x]))
// XX.push(xxx)
// }
// }
//
// for (var i = 0; i < lo_po.length; i++) {
// if (i == 0 || i == lo_po.length - 1) {
// area.push(0)
// } else {
// are = ((YY[i - 1] * XX[i]) - (XX[i - 1] * YY[i])) / 2
// area.push(are)
// }
// }
//
// function getSum(total, num) {
// return total + Math.round(num);
// }
//
// var luas_area = area.reduce(getSum, 0)
// return luas_area
// }
var luas_all = []
window.thisBaseDrawPolygonLayer = [];
map_create_all.on(L.Draw.Event.CREATED, function(e) {
var type = e.layerType;
var layer = e.layer;
var shape = layer.toGeoJSON();
let geoShape = shape.geometry.coordinates[0];
let kordinat = "";
for (j in geoShape) {
kordinat += geoShape[j][0] + ' ' + geoShape[j][1];
if (j <= (geoShape.length - 2)) {
kordinat += ', ';
}
}
var seeArea = L.GeometryUtil.geodesicArea(layer.getLatLngs()[0]);
var fixarea = seeArea.toFixed(3)
luas_all.push(fixarea)
if (luas_all.length > 1) {
var luas_tanah = luas_all[0]
var luas_rumah = luas_all[1]
var luas_lantai = luas_all[1]
var jumlah_lantai = luas_all - 1
$("#luas_polygon_rumah").val(parseFloat(luas_rumah).toFixed(2))
$("#luas_polygon_tanah").val(parseFloat(luas_tanah).toFixed(2))
$("#sisa_luas_tanah").val((luas_all[0] - luas_all[1]).toFixed(2))
var aaa = 0
if (luas_all.length > 2) {
var array_lan = luas_all.slice(2)
for (var i = 0; i < array_lan.length; i++) {
luas_lantai = parseFloat(luas_lantai) + parseFloat(array_lan[i])
}
}
$("#luas_polygon_lantai").val(parseFloat(luas_lantai).toFixed(2))
$(".jumlah_lantai").html("jumlah lantai : " + (luas_all.length - 1))
var klb = luas_lantai / luas_tanah
var kdb = luas_rumah / luas_tanah * 100
$("#KDB_polygon_rumah").val(parseFloat(kdb).toFixed(2))
$("#KLB_polygon_rumah").val(parseFloat(klb).toFixed(2))
}
window.thisBaseDrawPolygonLayer.push(layer);
});
polygon_options = {
showArea: false,
shapeOptions: {
stroke: true,
color: '#6e83f0',
weight: 1.5,
opacity: 2,
fill: true,
fillColor: null, //same as color by default
fillOpacity: 0.3,
clickable: true
}
}
polygon_options_tanah = {
showArea: false,
shapeOptions: {
stroke: true,
color: '#fff',
weight: 1.5,
opacity: 2,
fill: true,
fillColor: null, //same as color by default
fillOpacity: 0.3,
clickable: true
}
}
var polygonDraweredit_tanah = new L.Draw.Polygon(map_create_all, polygon_options_tanah);
var polygonDraweredit = new L.Draw.Polygon(map_create_all, polygon_options);
// polygonDraweredit.on("click", function(event) {
// shapecoords.innerHTML = event.latlng.toString();
// map_create_all.fire("click", event); // Trigger a map click as well.
// });
//
// polygonDraweredit_tanah.on("click", function(event) {
// var type = event.layerType;map_
// shapecoords.innerHTML = event.latlng.toString();
// map_create_all.fire("click", event); // Trigger a map click as well.
// });
map_create_all.on('draw:created', function(e) {
var type = e.layerType,
layer = e.layer;
var lay = layer.addTo(map_create_all);
Poly = lay;
});
$("#delete_poly").click(function() {
if (window.thisBaseDrawPolygonLayer != []) {
for (var i = 0; i < window.thisBaseDrawPolygonLayer.length; i++) {
window.thisBaseDrawPolygonLayer[i].remove()
}
window.thisBaseDrawPolygonLayer = [];
luas_all = [];
$('#create_poly_rumah').css("display", "none")
$('#create_poly_tanah').css("display", "block")
$(".jumlah_lantai").html("jumlah lantai : 0")
$("#luas_polygon_rumah").val("")
$("#luas_polygon_tanah").val("")
$("#luas_polygon_lantai").val("")
$("#KDB_polygon_rumah").val("")
$("#KLB_polygon_rumah").val("")
$("#sisa_luas_tanah").val("")
}
});
function isi_all() {
var luas_rumah = $("#luas_polygon_rumah").val()
var luas_tanah = $("#luas_polygon_tanah").val()
var luas_lantai = $("#luas_polygon_lantai").val()
if (luas_rumah == null) {
luas_rumah = 1
}
if (luas_tanah == null) {
luas_tanah = 1
}
if (luas_lantai == null) {
luas_lantai = 1
}
var klb = luas_lantai / luas_tanah
var kdb = luas_rumah / luas_tanah * 100
$("#sisa_luas_tanah").val(luas_tanah - luas_rumah)
$("#KDB_polygon_rumah").val(kdb)
$("#KLB_polygon_rumah").val(klb)
}
$('#luas_polygon_rumah').on('input', function() {
isi_all()
// if (luas_tanah.indexOf(' ') !== -1 && luas_tanah != null) {
// var luas_tanah_ret = luas_tanah.split(" ")[0]
// } else if (luas_tanah.indexOf(' ') === -1 && luas_tanah != null) {
// var luas_tanah_ret = luas_tanah
// }
//
// if (luas_tanah !== null) {
// try {
//
// luas_tanah_ret = convert_to_float(luas_tanah)
// } catch {
// $("#notificationluastanah").css("display", "block")
// $("#notificationluastanah").html("Pastikan yang anda masukan adalah angka")
// }
// }
});
$('#luas_polygon_tanah').on('input', function() {
isi_all()
});
$('#luas_polygon_lantai').on('input', function() {
isi_all()
});
})
});
$(document).on("click", "#informasi_poo", function() {
var luas_rumah = $("#luas_polygon_rumah").val()
var luas_tanah = $("#luas_polygon_tanah").val()
if (luas_rumah != null) {
var luas_rumah_ret = luas_rumah.split(" ")[0]
} else {
var luas_rumah_ret = 1
}
if (luas_tanah != null) {
var luas_tanah_ret = luas_tanah.split(" ")[0]
} else {
var luas_tanah_ret = 1
}
var klb = luas_tanah_ret / luas_rumah_ret
var kdb = luas_rumah_ret / luas_tanah_ret * 100
$("#KDB_polygon_rumah").val(kdb + ' %')
$("#KLB_polygon_rumah").val(klb)
})
$(document).on("click", "#create_save_jalan", function(e) {
data = new FormData()
data.append("gambar", $("input[id^='img_jalan']")[0].files[0]);
data.append("polyline", $("#poly_create_jalan").val())
data.append("name_jalan", $("#nama_jalan_create").val())
data.append("panjang_jalan", $("#panjang_jalan_create").val())
data.append("lebar_jalan", $("#lebar_jalan_create").val())
data.append("tipe_jalan", $("#tipe_jalan_create").val())
$.ajax({
url: "{% url 'api:create-jalan' %}",
data: data,
dataType: 'json',
type: 'POST',
processData: false,
contentType: false,
success: function(data) {
let response = data
if (response.status == 0) {
swal({
title: response.info,
text: response.data,
type: "success",
icon: "success",
confirmButtonColor: "#00BCD4"
})
} else {
swal({
title: response.info,
text: response.data,
type: "warning",
icon: "error",
confirmButtonColor: "#00BCD4"
})
}
map.closePopup();
}
});
});
$(document).on("click", "#create_save_bangunan", function(e) {
var polygin = $('#poly_create_bangunan').val();
var name_poly = $('#name_create').val();
var tdb = $('#tipe_point_b').val();
var remark = $('#tipe_point_2_b').val();
var poin_id = $('#tipe_point_3_b').val();
var napo = $("#tipe_point_3_b option:selected").text();
var info_poly = $('#info_create').val();
var alamat_poly = $('#alamat_create').val();
var lb_poly = $('#luas_bangunan_create').val();
var lt_poly = $('#luas_tanah_create').val();
var tb_poly = $('#tinggi_bangunan_create').val();
var ltbang = $('#lantai').val();
var mpu_poly = $('#pemilik_create').val();
$.ajax({
url: "{% url 'api:c_bangunan' %}",
data: {
'polygon': polygin,
'name': name_poly,
'tipedb': tdb,
'poin_id': poin_id,
'nama_po': napo,
'remark': remark,
'info': info_poly,
'alamat': alamat_poly,
'lb': lb_poly,
'lt': lt_poly,
'tb': tb_poly,
'ltb': ltbang,
'pemilik': mpu_poly
},
dataType: 'json',
// type: 'POST',
// processData: false,
// contentType: false,
success: function(data) {
let response = data
if (response.status == 0) {
swal({
title: response.info,
text: response.data,
type: "success",
icon: "success",
confirmButtonColor: "#00BCD4"
})
} else {
swal({
title: response.info,
text: response.data,
type: "warning",
icon: "error",
confirmButtonColor: "#00BCD4"
})
}
map.closePopup();
}
});
});
$(document).on("click", "#create_save_lahan", function(e) {
var polygin = $('#poly_create_lahan').val();
var name_poly = $('#name_create').val();
var tdb = $('#tipe_point_lahan').val();
var alamat_poly = $('#tahun_create').val();
var lb_poly = $('#luas_lahan_create').val();
$.ajax({
url: "api/c_lahan",
data: {
'polygon': polygin,
'name': name_poly,
'tipelh': tdb,
'tahun': alamat_poly,
'luas': lb_poly,
},
dataType: 'json',
// type: 'POST',
// processData: false,
// contentType: false,
success: function(data) {
let response = data
if (response.status == 0) {
swal({
title: response.info,
text: response.data,
type: "success",
icon: "success",
confirmButtonColor: "#00BCD4"
})
} else {
swal({
title: response.info,
text: response.data,
type: "warning",
icon: "error",
confirmButtonColor: "#00BCD4"
})
}
map.closePopup();
}
});
});
$(document).on("click", "#btnsavepoint", function(e) {
data = new FormData()
data.append("gambar", $("input[id^='gambar_pitik']")[0].files[0]);
data.append("point", $("#poly_create_point").val())
data.append("name_create_point", $("#name_create_point").val())
data.append("tipe_point", $("#tipe_point").val())
data.append("info_create_point", $("#tipe_point_2").val())
data.append("alamat_create_point", $("#alamat_create_point").val())
data.append("luas_tanah_point", $("#luas_tanah_point").val())
data.append("pemilik_point", $("#pemilik_point").val())
$.ajax({
url: "{% url 'api:create-point' %}",
data: data,
dataType: 'json',
type: 'POST',
processData: false,
contentType: false,
success: function(data) {
let response = data
if (response.status == 0) {
swal({
title: response.info,
text: response.data,
type: "success",
icon: "success",
confirmButtonColor: "#00BCD4"
}, function() {
$("#modal_point").css('display', 'none');
})
} else {
swal({
title: response.info,
text: response.data,
type: "warning",
icon: "error",
confirmButtonColor: "#00BCD4"
})
}
map.closePopup();
}
});
});
</script>