{% 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) { var x = window.matchMedia("(max-width: 700px)") if (x.matches) { // If media query matches swal({ title: "Sorry", text: "Untuk di mobile tampilan detail kelurahan tidak mendukung, Silahkan akses menggunakan laptop atau PC", type: "warning", icon: "error", confirmButtonColor: "#00BCD4" }) setTimeout(function() { }, 500); } else { $('#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(); $('#btn_ceklwas').click(function() { var hasil = (JSON.stringify(polygon_edit_tuplah.toGeoJSON())) var seeArea = L.GeometryUtil.geodesicArea(polygon_edit_tuplah.getLatLngs()[0]); var fixarea = seeArea.toFixed(3) var separ = fixarea.toString().split("."); var areacom = separ.replace(/\B(?=(\d{3})+(?!\d))/g, ","); separ.join("."); $("#luas_tuplah_edit").val(fixarea); }) $('#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() { // }); $(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") }) 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; }); $("#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_3_b').html(`<option value="null" selected disabled>-- Pilih Point --</option>`); } }); }); $("#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); } }); }); $("#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(); }); $("#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); } }); }); $("#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") }) $(".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>