{% for group in user.groups.all %} {% if group.name == 'Superadmin' %} <style> .leaflet-popup { display: block; } #btn_edit_kelurahan { display: block; } #btn_edit_tuplah { display: block; } #btn_edit_bangunan { display: block; } #btn_delete_bangunan { display: block; } #btn_jalan { display: block; } #btn_edit_gl { display: block; } #btn_edit_rs { display: block; } #btn_edit_puskes { display: block; } #btn_edit_lk { display: block; } #btn_edit_cb { display: block; } #btn_edit_adm { display: block; } #btn_delete_adm { display: block; } #btn_edit_sp { display: block; } #btn_edit_spbu { display: block; } #btn_edit_st { display: block; } #btn_edit_tr { display: block; } #btn_edit_si { display: block; } #btn_detail_per_bang { display: block; } #btn_perbaikan_bangunan { display: block; } #btn_upload_tampak { display: block; } .leaflet-popup { display: block; } </style> {% endif %}{% endfor %} <script> //suk var kantor_administrasi = "{{ kantor_administrasi }}".replace(/'/g, '"'); var result_kan_adm = JSON.parse("" + kantor_administrasi + "") geo_po_adm = L.geoJson(null, { pointToLayer: function(feature, latlng) { // console.log(feature.administrasi.f1) if (feature.administrasi.f2 == 'Kantor Polisi') { var smallIcon = new L.Icon({ iconSize: [25, 25], iconAnchor: [13, 27], popupAnchor: [1, -24], iconUrl: 'static/img/icon-1/Buildings-tes.svg' // iconUrl: 'static/img/icon/police.svg', // shadowUrl: 'static/img/icon/shadow.svg', // shadowSize: [38, 38], // shadowAnchor: [20, 32] }); var marker = L.marker(latlng, { icon: smallIcon }); conten = ` <div id="bottom-justified-data" style="text-align: center;"> <div > <img src="static/img/image/` + feature.administrasi.f8 + `" alt="Image" style="width: 150px!important;height: 125px;"> </div> <div > <div style="font-family: Google Sans,Roboto,Arial,sans-serif; letter-spacing: 0"> <p > ` + feature.administrasi.f1 + ` </p> </div> </div> </div> `; marker.bindTooltip(conten, { permanent: false, className: "my-label", direction: 'top', offset: [0, -25] }); return marker } else if (feature.administrasi.f2 == 'Instalasi TNI (AD/AL/AU)') { var smallIcon = new L.Icon({ iconSize: [25, 25], iconAnchor: [13, 27], popupAnchor: [1, -24], iconUrl: 'static/img/icon-1/Buildings-tes.svg' // iconUrl: 'static/img/icon/tni.svg', // shadowUrl: 'static/img/icon/shadow.svg', // shadowSize: [38, 38], // shadowAnchor: [23, 32] }); var marker = L.marker(latlng, { icon: smallIcon }); conten = ` <div id="bottom-justified-data" style="text-align: center;"> <div > <img src="static/img/image/` + feature.administrasi.f8 + `" alt="Image" style="width: 150px!important;height: 125px;"> </div> <div > <div style="font-family: Google Sans,Roboto,Arial,sans-serif; letter-spacing: 0"> <p > ` + feature.administrasi.f1 + ` </p> </div> </div> </div> `; marker.bindTooltip(conten, { permanent: false, className: "my-label", direction: 'top', offset: [0, -25] }); return marker } else if (feature.administrasi.f2 == 'Bangunan/Kantor Pertahanan Keamanan Lainnya') { var smallIcon = new L.Icon({ iconSize: [25, 25], iconAnchor: [13, 27], popupAnchor: [1, -24], iconUrl: 'static/img/icon-1/Buildings-tes.svg' // iconUrl: 'static/img/icon/tni.svg', // shadowUrl: 'static/img/icon/shadow.svg', // shadowSize: [38, 38], // shadowAnchor: [23, 32] }); var marker = L.marker(latlng, { icon: smallIcon }); conten = ` <div id="bottom-justified-data" style="text-align: center;"> <div > <img src="static/img/image/` + feature.administrasi.f8 + `" alt="Image" style="width: 150px!important;height: 125px;"> </div> <div > <div style="font-family: Google Sans,Roboto,Arial,sans-serif; letter-spacing: 0"> <p > ` + feature.administrasi.f1 + ` </p> </div> </div> </div> `; marker.bindTooltip(conten, { permanent: false, className: "my-label", direction: 'top', offset: [0, -25] }); return marker } else if (feature.administrasi.f2 == 'Kantor Pemerintah Lainnya') { var smallIcon = new L.Icon({ iconSize: [25, 25], iconAnchor: [13, 27], popupAnchor: [1, -24], iconUrl: 'static/img/icon-1/Buildings-tes.svg' // iconUrl: 'static/img/icon/kades.svg', // shadowUrl: 'static/img/icon/shadow.svg', // shadowSize: [38, 38], // shadowAnchor: [23, 32] }); var marker = L.marker(latlng, { icon: smallIcon }); conten = ` <div id="bottom-justified-data" style="text-align: center;"> <div > <img src="static/img/image/` + feature.administrasi.f8 + `" alt="Image" style="width: 150px!important;height: 125px;"> </div> <div > <div style="font-family: Google Sans,Roboto,Arial,sans-serif; letter-spacing: 0"> <p > ` + feature.administrasi.f1 + ` </p> </div> </div> </div> `; marker.bindTooltip(conten, { permanent: false, className: "my-label", direction: 'top', offset: [0, -25] }); return marker } else if (feature.administrasi.f2 == 'Kantor Camat') { var smallIcon = new L.Icon({ iconSize: [25, 25], iconAnchor: [13, 27], popupAnchor: [1, -24], iconUrl: 'static/img/icon-1/Buildings-tes.svg' // iconUrl: 'static/img/icon/lurah.svg', // shadowUrl: 'static/img/icon/shadow.svg', // shadowSize: [38, 38], // shadowAnchor: [23, 32] }); var marker = L.marker(latlng, { icon: smallIcon }); conten = ` <div id="bottom-justified-data" style="text-align: center;"> <div > <img src="static/img/image/` + feature.administrasi.f8 + `" alt="Image" style="width: 150px!important;height: 125px;"> </div> <div > <div style="font-family: Google Sans,Roboto,Arial,sans-serif; letter-spacing: 0"> <p > ` + feature.administrasi.f1 + ` </p> </div> </div> </div> `; marker.bindTooltip(conten, { permanent: false, className: "my-label", direction: 'top', offset: [0, -25] }); return marker } else if (feature.administrasi.f2 == 'Kantor Kepala Desa') { var smallIcon = new L.Icon({ iconSize: [25, 25], iconAnchor: [13, 27], popupAnchor: [1, -24], iconUrl: 'static/img/icon-1/Buildings-tes.svg' // iconUrl: 'static/img/icon/lurah.svg', // shadowUrl: 'static/img/icon/shadow.svg', // shadowSize: [38, 38], // shadowAnchor: [23, 32] }); var marker = L.marker(latlng, { icon: smallIcon }); conten = ` <div id="bottom-justified-data" style="text-align: center;"> <div > <img src="static/img/image/` + feature.administrasi.f8 + `" alt="Image" style="width: 150px!important;height: 125px;"> </div> <div > <div style="font-family: Google Sans,Roboto,Arial,sans-serif; letter-spacing: 0"> <p > ` + feature.administrasi.f1 + ` </p> </div> </div> </div> `; marker.bindTooltip(conten, { permanent: false, className: "my-label", direction: 'top', offset: [0, -25] }); return marker } else if (feature.administrasi.f2 == 'Kantor DPRD') { var smallIcon = new L.Icon({ iconSize: [25, 25], iconAnchor: [13, 27], popupAnchor: [1, -24], iconUrl: 'static/img/icon-1/Buildings-tes.svg' // iconUrl: 'static/img/icon/lurah.svg', // shadowUrl: 'static/img/icon/shadow.svg', // shadowSize: [38, 38], // shadowAnchor: [23, 32] }); var marker = L.marker(latlng, { icon: smallIcon }); conten = ` <div id="bottom-justified-data" style="text-align: center;"> <div > <img src="static/img/image/` + feature.administrasi.f8 + `" alt="Image" style="width: 150px!important;height: 125px;"> </div> <div > <div style="font-family: Google Sans,Roboto,Arial,sans-serif; letter-spacing: 0"> <p > ` + feature.administrasi.f1 + ` </p> </div> </div> </div> `; marker.bindTooltip(conten, { permanent: false, className: "my-label", direction: 'top', offset: [0, -25] }); return marker } else if (feature.administrasi.f2 == 'Kantor Lurah') { var smallIcon = new L.Icon({ iconSize: [25, 25], iconAnchor: [13, 27], popupAnchor: [1, -24], iconUrl: 'static/img/icon-1/Buildings-tes.svg' // iconUrl: 'static/img/icon/lurah.svg', // shadowUrl: 'static/img/icon/shadow.svg', // shadowSize: [38, 38], // shadowAnchor: [23, 32] }); var marker = L.marker(latlng, { icon: smallIcon }); conten = ` <div id="bottom-justified-data" style="text-align: center;"> <div > <img src="static/img/image/` + feature.administrasi.f8 + `" alt="Image" style="width: 150px!important;height: 125px;"> </div> <div > <div style="font-family: Google Sans,Roboto,Arial,sans-serif; letter-spacing: 0"> <p > ` + feature.administrasi.f1 + ` </p> </div> </div> </div> `; marker.bindTooltip(conten, { permanent: false, className: "my-label", direction: 'top', offset: [0, -25] }); return marker } else if (feature.administrasi.f2 == 'Lembaga Pemasyarakatan') { var smallIcon = new L.Icon({ iconSize: [25, 25], iconAnchor: [13, 27], popupAnchor: [1, -24], iconUrl: 'static/img/icon-1/Buildings-tes.svg' // iconUrl: 'static/img/icon/pemerintahan_lain.svg', // shadowUrl: 'static/img/icon/shadow.svg', // shadowSize: [38, 38], // shadowAnchor: [23, 32] }); var marker = L.marker(latlng, { icon: smallIcon }); conten = ` <div id="bottom-justified-data" style="text-align: center;"> <div > <img src="static/img/image/` + feature.administrasi.f8 + `" alt="Image" style="width: 150px!important;height: 125px;"> </div> <div > <div style="font-family: Google Sans,Roboto,Arial,sans-serif; letter-spacing: 0"> <p > ` + feature.administrasi.f1 + ` </p> </div> </div> </div> `; marker.bindTooltip(conten, { permanent: false, className: "my-label", direction: 'top', offset: [0, -25] }); return marker } else if (feature.administrasi.f2 == 'Kantor Bupati') { var smallIcon = new L.Icon({ iconSize: [25, 25], iconAnchor: [13, 27], popupAnchor: [1, -24], iconUrl: 'static/img/icon-1/Buildings-tes.svg' // iconUrl: 'static/img/icon/lurah.svg', // shadowUrl: 'static/img/icon/shadow.svg', // shadowSize: [38, 38], // shadowAnchor: [23, 32] }); var marker = L.marker(latlng, { icon: smallIcon }); conten = ` <div id="bottom-justified-data" style="text-align: center;"> <div > <img src="static/img/image/` + feature.administrasi.f8 + `" alt="Image" style="width: 150px!important;height: 125px;"> </div> <div > <div style="font-family: Google Sans,Roboto,Arial,sans-serif; letter-spacing: 0"> <p > ` + feature.administrasi.f1 + ` </p> </div> </div> </div> `; marker.bindTooltip(conten, { permanent: false, className: "my-label", direction: 'top', offset: [0, -25] }); return marker } else if (feature.administrasi.f2 == 'none') { var smallIcon = new L.Icon({ iconSize: [25, 25], iconAnchor: [13, 27], popupAnchor: [1, -24], iconUrl: 'static/img/icon-1/Buildings-tes.svg' // iconUrl: 'static/img/icon/lurah.svg', // shadowUrl: 'static/img/icon/shadow.svg', // shadowSize: [38, 38], // shadowAnchor: [23, 32] }); var marker = L.marker(latlng, { icon: smallIcon }); conten = ` <div id="bottom-justified-data" style="text-align: center;"> <div > <img src="static/img/image/` + feature.administrasi.f8 + `" alt="Image" style="width: 150px!important;height: 125px;"> </div> <div > <div style="font-family: Google Sans,Roboto,Arial,sans-serif; letter-spacing: 0"> <p > ` + feature.administrasi.f1 + ` </p> </div> </div> </div> `; marker.bindTooltip(conten, { permanent: false, className: "my-label", direction: 'top', offset: [0, -25] }); return marker } }, onEachFeature: function(feature, layer) { layer.on({ click: function(e) { $("#modal_detail_non_kelurahan").modal('show'); var tay; var geocodeService = L.esri.Geocoding.geocodeService(); var geocoderNominatim = new L.Control.Geocoder.Nominatim(); var geogeo = geocodeService.reverse().latlng(e.latlng).run(function(error, result) { tay = result.address.Address; // aladije(result.address.Address) if (feature.administrasi.f3 == 'alamat') { if (tay != '') { var alamak = tay; } else { alamak = "" } } else { var alamak = feature.administrasi.f3; } if (feature.administrasi.f10 == 'Bpk') { var raja = ""; } else { var raja = feature.administrasi.f10; } if (feature.administrasi.f8 == 'None') { var gmb = "static/img/image_null.png"; } else { var gmb = "static/img/image/" + feature.administrasi.f8; } $(".gambar_keterangan").html(`<img src="` + gmb + `" alt="" style="width:100%;height:240px;border-top-left-radius: 10px;border-bottom-left-radius: 10px;">`) $(".nama_keterangan").html(`<div> <span style="font-size: large;"> ` + feature.administrasi.f1 + ` </span> </div> <div> <span> ` + alamak + `, ` + feature.administrasi.f14 + `, ` + feature.administrasi.f13 + `, ` + feature.administrasi.f12 + ` </span> </div> `) if (feature.administrasi.f16 != "None") { var list_history = feature.administrasi.f16 console.log(list_history[0].split(",")[0]) var perbaikan_pt = `<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_pt = `<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> ` } $(".isi_keterangan").html(`<input type="text" name="idjalan" id="idjalan" class="hidden" value=""> <input type="text" name="coordinatejalan" id="coordinatejalan" class="hidden" value=""> <div> <div> <span>Jenis Bangunan</span> </div> <div> <span> ` + feature.administrasi.f2 + ` </span> </div> </div> <div> <div> <span>Luas</span> </div> <div> <span style="font-family: 'Roboto';">` + feature.administrasi.f5 + ` m</span> </div> </div> <div> <div> <span>Pimpinan</span> </div> <div> <span>` + raja + `</span> </div> </div> `); $(".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_edit_adm" data-toggle="modal" data-target="#modal_adm" data-backdrop="static" data-keyboard="false" class="btn" style="border-bottom-left-radius: 8px;border-top-right-radius: 8px;width: 100%;height: 100%;bottom: 0px;color: white;" title="Edit"><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_delete_adm" data-toggle="modal" data-target="#modald_adm" data-backdrop="static" data-keyboard="false" class="btn" style="border-bottom-left-radius: 8px;border-top-right-radius: 8px;width: 100%;height: 100%;bottom: 0px;color: white;" title="Delete"><i class="icon-eraser2"></i></a> </div> `) content_delete_adm = ` <div class="modal-dialog md"> <div class="modal-content"> <div class="modal-header bg-info"> <button type="button" class="close" data-dismiss="modal" onclick="destroyfade()">×</button> <h6 class="modal-title">Delete Point</h6> </div> <div class="modal-body" style="overflow-x: hidden;max-height: 300px;overflow-y: scroll;padding-left: 15px;"> <div id="map-for-delete" style="width: 400px;height: 300px;position: relative;margin: 10px;"></div> <input style="display:none;" id="id_adm_del" type="text" class="form-control" value="` + feature.administrasi.f15 + `"required> <input style="display:none;" id="nama_table" type="text" class="form-control" value="geo_kantor_administrasi" required> <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="namobj_adm_del" type="text" class="form-control" value="` + feature.administrasi.f1 + `"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;">Tipe Point</label> <div class="col-lg-8"> <select id="remark_adm_del" style="margin-top: 15px;"> <option>` + feature.administrasi.f2 + `</option> </select> </div> </div> </div> </div> <hr> <div class="modal-footer"> <button type="button" class="btn btn-info" id="deletepointot">Hapus</button> </div> </div> </div>`; content_edit_adm = ` <div class="modal-dialog md"> <div class="modal-content"> <div class="modal-header bg-info"> <button type="button" class="close" data-dismiss="modal" onclick="destroyfade()">×</button> <h6 class="modal-title">Edit Point</h6> </div> <div class="tab-pane has-padding" id="panel-tab2"> <div class="tab-pane" id="bottom-justified-data"> <div class="tabbable"> <ul class="nav nav-tabs nav-tabs-bottom nav-justified"> <li onclick="changetabs(this)" class="active"><a href="#left-tab1-feas-upli" data-toggle="tab">Koordinat</a></li> <li onclick="changetabs(this)" ><a href="#right-tab2-feas-upli" data-toggle="tab">Informasi Umum</a></li> </ul> <div class="tab-content"> <div class="tab-pane active" id="left-tab1-feas-upli"> <div id="map-for-edit" style="height: 300px;position: relative;margin: 10px;"></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="fileadm" name="images[]" multiple accept="image/jpg,image/png,image/jpeg,image/gif"> <input style="display:none;" id="gambar_adm_edit" type="text" class="form-control" value="` + feature.administrasi.f8 + `"required> </div> </div> </div> <div class="tab-pane" id="right-tab2-feas-upli"> <div class="modal-body" style="overflow-x: hidden;max-height: 300px;overflow-y: scroll;padding-left: 15px;"> <div class="form-group"> <input style="display:none;" id="id_adm_edit" type="text" class="form-control" value="` + feature.administrasi.f15 + `"required> <input style="display:none;" id="coordinateZoneedit_adm_edit" type="text" class="form-control" value=""required> </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;">Nama Point</label> <div class="col-lg-9"> <input id="namobj_adm_edit" type="text" class="form-control" value="` + feature.administrasi.f1 + `"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;">Tipe Point</label> <div class="col-lg-8"> <select id="remark_adm_edit" style="margin-top: 15px;"> <option>` + feature.administrasi.f2 + `</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-4"> <input id="alamat_adm_edit" type="text" class="form-control" value="` + alamak + `"required> </div> <div class="col-lg-4" style="margin-top: 15px;">` + feature.administrasi.f14 + `, ` + feature.administrasi.f13 + `</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</label> <div class="col-lg-6"> <input id="luas_tanah_adm_edit" type="text" class="form-control" value="` + feature.administrasi.f5 + `"required> </div> <div class="col-lg-3"> <select id="satuan_luas_tanah" style="margin-top: 15px;"> <option>m2</option> <option>Km2</option> <option>Hektar</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="perangkat_adm_edit" type="text" class="form-control" value="` + raja + `"required> </div> </div> </div> </div> </div> </div> </div> </div> </div> <hr> <div class="modal-footer"> <button type="button" class="btn btn-info" id="saveeditadm">Save changes</button> </div> </div> </div>`; $("#modald_adm").html(content_delete_adm) $("#modal_adm").html(content_edit_adm) }) hidelegend(); } }) } }); var markeradm = L.markerClusterGroup({ iconCreateFunction: function(cluster) { var childCount = cluster.getChildCount(); return new L.DivIcon({ html: '<div><span>' + childCount + '</span></div>', className: 'marker-cluster-adm', iconSize: new L.Point(40, 40) }); }, //Disable all of the defaults: spiderfyOnMaxZoom: false, showCoverageOnHover: false }); function geo_json_po_adm(data) { geo_po_adm.addData(data) } geo_json_po_adm(result_kan_adm); function k_adm() { var checkBox = document.getElementById("knt_adm"); if (checkBox.checked == true) { newe(markeradm, geo_po_adm, checkBox) } else { markeradm.remove() geo_po_adm.remove() valket() } } $(document).on("click", "#btn_edit_adm", function() { var map_edit = L.map('map-for-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 idka = $('#id_adm_edit').val(); loaderPage(false); $.ajax({ url: "{% url 'api:editkantor' %}", data: { 'id_point': idka }, dataType: 'json', success: function(data) { loaderPage(false); setTimeout(function() { map_edit.invalidateSize(); }, 1000); // map_edit.setView([data['geometry']['coordinates'][0][0][0][1], data['geometry']['coordinates'][0][0][0][0]], 19); map_edit.setView([data['geometry']['coordinates'][1], data['geometry']['coordinates'][0]], 19); let dapoin = [data['geometry']['coordinates'][1], data['geometry']['coordinates'][0]] var poinin = L.marker(dapoin).addTo(map_edit) poinin.enableEdit(); $('#saveeditadm').click(function() { var hasil = (JSON.stringify(poinin.toGeoJSON())) $("#coordinateZoneedit_adm_edit").val(hasil); }) } }) }); $(document).on("click", "#saveeditadm", function() { var idka = $('#id_adm_edit').val(); var poi = $('#coordinateZoneedit_adm_edit').val(); var data = new FormData(); data.append("file", $("input[id^='fileadm']")[0].files[0]); data.append("csrfmiddlewaretoken", "{{ csrf_token }}"); data.append('id', idka) data.append('namobj', $('#namobj_adm_edit').val()) data.append('remark', $('#remark_adm_edit').val()) data.append('luastanah', $('#luas_tanah_adm_edit').val()) data.append('alamat', $('#alamat_adm_edit').val()) data.append('perangkat', $('#perangkat_adm_edit').val()) data.append('point', poi), data.append('gambar', $('#gambar_adm_edit').val()) $.ajax({ url: "{% url 'api:kantor' %}", 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_adm").modal('hide'); $("#modal_detail_non_kelurahan").modal('hide') //location.reload(); }) } else { swal({ title: 'Error', text: 'Hubungi Developer', type: "warning", icon: "error", confirmButtonColor: "#00BCD4" }) } } }) }); $(document).on("click", "#btn_delete_adm", function() { var map_delete = L.map('map-for-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 idka = $('#id_adm_del').val(); loaderPage(false); $.ajax({ url: "{% url 'api:editkantor' %}", data: { 'id_point': idka }, dataType: 'json', success: function(data) { loaderPage(false); setTimeout(function() { map_delete.invalidateSize(); }, 1000); console.log(data) // map_edit.setView([data['geometry']['coordinates'][0][0][0][1], data['geometry']['coordinates'][0][0][0][0]], 19); map_delete.setView([data['geometry']['coordinates'][1], data['geometry']['coordinates'][0]], 19); let dapoin = [data['geometry']['coordinates'][1], data['geometry']['coordinates'][0]] var poinin = L.marker(dapoin).addTo(map_delete) // poinin.enableEdit(); $('#saveeditadm').click(function() { var hasil = (JSON.stringify(poinin.toGeoJSON())) $("#coordinateZoneedit_adm_del").val(hasil); }) } }) }); $(document).on("click", "#deletepointot", function() { var idka = $('#id_adm_del').val(); var poi = $('#coordinateZoneedit_adm_del').val(); var db = $('#nama_table').val(); var data = new FormData(); data.append('id', idka) data.append('db', db) $.ajax({ url: "{% url 'api:dpoint' %}", 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() { $("#modald_adm").modal('hide'); $("#modal_detail_non_kelurahan").modal('hide') //location.reload(); }) } else { swal({ title: 'Oops', text: response.data, type: "warning", icon: "error", confirmButtonColor: "#00BCD4" }) } } }) }); var layanan_kesehatan = "{{ layanan_kesehatan }}".replace(/'/g, '"'); var result_lay_kes = JSON.parse("" + layanan_kesehatan + "") var geo_po_kes = L.geoJson(null, { pointToLayer: function(feature, latlng) { var smallIcon = new L.Icon({ iconSize: [25, 25], iconAnchor: [13, 27], popupAnchor: [1, -24], iconUrl: 'static/img/icon-1/Heartbeat-tes.svg' // iconUrl: 'static/img/icon/rs.svg', // shadowUrl: 'static/img/icon/shadow.svg', // shadowSize: [35, 35], // shadowAnchor: [22, 31] }); var marker = L.marker(latlng, { icon: smallIcon }); conten = ` <div id="bottom-justified-data" style="text-align: center;"> <div > <img src="static/img/image/` + feature.administrasi.f8 + `" alt="Image" style="width: 150px!important;height: 125px;"> </div> <div > <div style="font-family: Google Sans,Roboto,Arial,sans-serif; letter-spacing: 0"> <p > ` + feature.administrasi.f1 + ` </p> </div> </div> </div> `; marker.bindTooltip(conten, { permanent: false, className: "my-label", direction: 'top', offset: [0, -25] }); return marker }, onEachFeature: function(feature, layer) { layer.on({ click: function(e) { $("#modal_detail_non_kelurahan").modal('show'); var tay; var geocodeService = L.esri.Geocoding.geocodeService(); var geocoderNominatim = new L.Control.Geocoder.Nominatim(); var geogeo = geocodeService.reverse().latlng(e.latlng).run(function(error, result) { tay = result.address.Address; // aladije(result.address.Address) if (feature.administrasi.f3 == 'alamat') { if (tay != '') { var alamak = tay; } else { alamak = "" } } else { var alamak = feature.administrasi.f3; } if (feature.administrasi.f10 == 'bpk') { var raja = ""; } else { var raja = feature.administrasi.f10; } if (feature.administrasi.f8 == 'None') { var gmb = "static/img/image_null.png"; } else { var gmb = "static/img/image/" + feature.administrasi.f8; } $(".gambar_keterangan").html(`<img src="` + gmb + `" alt="" style="width:100%;height:240px;border-top-left-radius: 10px;border-bottom-left-radius: 10px;">`) $(".nama_keterangan").html(`<div> <span style="font-size: large;"> ` + feature.administrasi.f1 + ` </span> </div> <div> <span> ` + alamak + `, ` + feature.administrasi.f14 + `, ` + feature.administrasi.f13 + `, ` + feature.administrasi.f12 + ` </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> <div> <span>Jenis Bangunan</span> </div> <div> <span> ` + feature.administrasi.f2 + ` </span> </div> </div> <div> <div> <span>Luas</span> </div> <div> <span style="font-family: 'Roboto';">` + feature.administrasi.f5 + ` m</span> </div> </div> <div> <div> <span>Pimpinan</span> </div> <div> <span>` + raja + `</span> </div> </div>`); $(".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_edit_lk" data-toggle="modal" data-target="#modal_adm" data-backdrop="static" data-keyboard="false" class="btn" style="border-bottom-left-radius: 8px;border-top-right-radius: 8px;width: 100%;height: 100%;bottom: 0px;color: white;" title="Edit"><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_delete_adm" data-toggle="modal" data-target="#modald_adm" data-backdrop="static" data-keyboard="false" class="btn" style="border-bottom-left-radius: 8px;border-top-right-radius: 8px;width: 100%;height: 100%;bottom: 0px;color: white;" title="Delete"><i class="icon-eraser2"></i></a> </div> `) content_edit_lk = ` <div class="modal-dialog md"> <div class="modal-content"> <div class="modal-header bg-info" > <button type="button" class="close" data-dismiss="modal" onclick="destroyfade()">×</button> <h6 class="modal-title">Edit Point</h6> </div> <div class="tab-pane has-padding" id="panel-tab2"> <div class="tab-pane" id="bottom-justified-data"> <div class="tabbable"> <ul class="nav nav-tabs nav-tabs-bottom nav-justified"> <li onclick="changetabs(this)" class="active"><a href="#right-tab2-feas-upli" data-toggle="tab">Koordinat</a></li> <li onclick="changetabs(this)"><a href="#left-tab1-feas-upli" data-toggle="tab">Informasi Umum</a></li> </ul> <div class="tab-content"> <div class="tab-pane" id="left-tab1-feas-upli"> <div class="modal-body" style="overflow-x: hidden;max-height: 300px;overflow-y: scroll;padding-left: 15px;"> <div class="form-group"> <input style="display:none;" id="id_lk_edit" type="text" class="form-control" value="` + feature.administrasi.f15 + `"required> <input style="display:none;" id="coordinateZoneedit_lk_edit" type="text" class="form-control" value=""required> </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;">Nama Point</label> <div class="col-lg-9"> <input id="namobj_lk_edit" type="text" class="form-control" value="` + feature.administrasi.f1 + `"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;">Tipe Point</label> <div class="col-lg-8"> <select id="remark_lk_edit" style="margin-top: 15px;"> <option>` + feature.administrasi.f2 + `</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-4"> <input id="alamat_lk_edit" type="text" class="form-control" value="` + alamak + `"required> </div> <div class="col-lg-4" style="margin-top: 15px;">` + feature.administrasi.f14 + `, ` + feature.administrasi.f13 + `</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</label> <div class="col-lg-6"> <input id="luas_tanah_lk_edit" type="text" class="form-control" value="` + feature.administrasi.f5 + `"required> </div> <div class="col-lg-3"> <select id="satuan_luas_tanah" style="margin-top: 15px;"> <option>m2</option> <option>Km2</option> <option>Hektar</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="perangkat_lk_edit" type="text" class="form-control" value="` + raja + `"required> </div> </div> </div> </div> </div> <div class="tab-pane active" id="right-tab2-feas-upli"> <div class="form-group"> <div id="map-for-edit" style="height: 300px;position: relative;margin: 10px;"></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="filelk" name="images[]" multiple accept="image/jpg,image/png,image/jpeg,image/gif"> <input style="display:none;" id="gambar_lk_edit" type="text" class="form-control" value="` + feature.administrasi.f8 + `"required> </div> </div> </div> </div> </div> </div> </div> </div> <hr> <div class="modal-footer"> <button type="button" class="btn btn-info" id="saveeditlk">Save changes</button> </div> </div> </div>`; content_delete_adm = ` <div class="modal-dialog md"> <div class="modal-content"> <div class="modal-header bg-info"> <button type="button" class="close" data-dismiss="modal" onclick="destroyfade()">×</button> <h6 class="modal-title">Delete Point</h6> </div> <div class="modal-body" style="overflow-x: hidden;max-height: 300px;overflow-y: scroll;padding-left: 15px;"> <input style="display:none;" id="id_adm_del" type="text" class="form-control" value="` + feature.administrasi.f15 + `"required> <input style="display:none;" id="nama_table" type="text" class="form-control" value="geo_layanan_kesehatan" required> <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="namobj_adm_del" type="text" class="form-control" value="` + feature.administrasi.f1 + `"required disabled> </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-8"> <input id="remark_adm_del" type="text" class="form-control" value="` + feature.administrasi.f2 + `"required disabled> </div> </div> </div> </div> <hr> <div class="modal-footer"> <button type="button" class="btn btn-info" id="deletepointot">Hapus</button> </div> </div> </div>`; $("#modald_adm").html(content_delete_adm) $("#modal_adm").html(content_edit_lk) panel_samp(); }) hidelegend(); } }) } }); var markerkes = L.markerClusterGroup({ iconCreateFunction: function(cluster) { var childCount = cluster.getChildCount(); return new L.DivIcon({ html: '<div><span>' + childCount + '</span></div>', className: 'marker-cluster-sakit', iconSize: new L.Point(40, 40) }); }, //Disable all of the defaults: spiderfyOnMaxZoom: false, showCoverageOnHover: false }); function geo_json_po_kes(data) { geo_po_kes.addData(data) } geo_json_po_kes(result_lay_kes); function l_kes() { var checkBox = document.getElementById("lyn_kes"); if (checkBox.checked == true) { newe(markerkes, geo_po_kes, checkBox) } else { markerkes.remove() geo_po_kes.remove() valket() } } $(document).on("click", "#btn_edit_lk", function() { var map_edit = L.map('map-for-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 idlk = $('#id_lk_edit').val(); loaderPage(false); $.ajax({ url: "{% url 'api:editlakes' %}", data: { 'id_point': idlk }, dataType: 'json', success: function(data) { setTimeout(function() { map_edit.invalidateSize(); }, 1000); loaderPage(false); console.log(data) // map_edit.setView([data['geometry']['coordinates'][0][0][0][1], data['geometry']['coordinates'][0][0][0][0]], 19); map_edit.setView([data['geometry']['coordinates'][1], data['geometry']['coordinates'][0]], 19); let dapoin = [data['geometry']['coordinates'][1], data['geometry']['coordinates'][0]] var poinin = L.marker(dapoin).addTo(map_edit) poinin.enableEdit(); $('#saveeditlk').click(function() { var hasil = (JSON.stringify(poinin.toGeoJSON())) $("#coordinateZoneedit_lk_edit").val(hasil); }) } }) }); $(document).on("click", "#saveeditlk", function() { var idka = $('#id_lk_edit').val(); var poi = $('#coordinateZoneedit_lk_edit').val(); var data = new FormData(); data.append("file", $("input[id^='filelk']")[0].files[0]); data.append("csrfmiddlewaretoken", "{{ csrf_token }}"); data.append('id', idka) data.append('namobj', $('#namobj_lk_edit').val()) data.append('remark', $('#remark_lk_edit').val()) data.append('luastanah', $('#luas_tanah_lk_edit').val()) data.append('alamat', $('#alamat_lk_edit').val()) data.append('perangkat', $('#perangkat_lk_edit').val()) data.append('point', poi), data.append('gambar', $('#gambar_lk_edit').val()) $.ajax({ url: "{% url 'api:layanankesehatan' %}", 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_adm").modal('hide'); $("#modal_detail_non_kelurahan").modal('hide') //location.reload(); }) } else { swal({ title: 'Error', text: 'Hubungi Developer', type: "warning", icon: "error", confirmButtonColor: "#00BCD4" }) } // location.reload() } }) }); var puskesmas = "{{ puskesmas }}".replace(/'/g, '"'); var result_puskes = JSON.parse("" + puskesmas + "") var geo_po_puskes = L.geoJson(null, { pointToLayer: function(feature, latlng) { var smallIcon = new L.Icon({ iconSize: [25, 25], iconAnchor: [13, 27], popupAnchor: [1, -24], iconUrl: 'static/img/icon-1/FirstAidKit-tes.svg' // iconUrl: 'static/img/icon/rs.svg', // shadowUrl: 'static/img/icon/shadow.svg', // shadowSize: [35, 35], // shadowAnchor: [22, 31] }); var marker = L.marker(latlng, { icon: smallIcon }); conten = ` <div id="bottom-justified-data" style="text-align: center;"> <div > <img src="static/img/image/` + feature.administrasi.f8 + `" alt="Image" style="width: 150px!important;height: 125px;"> </div> <div > <div style="font-family: Google Sans,Roboto,Arial,sans-serif; letter-spacing: 0"> <p > ` + feature.administrasi.f1 + ` </p> </div> </div> </div> `; marker.bindTooltip(conten, { permanent: false, className: "my-label", direction: 'top', offset: [0, -25] }); return marker }, onEachFeature: function(feature, layer) { layer.on({ click: function(e) { $("#modal_detail_non_kelurahan").modal('show'); var tay; var geocodeService = L.esri.Geocoding.geocodeService(); var geocoderNominatim = new L.Control.Geocoder.Nominatim(); var geogeo = geocodeService.reverse().latlng(e.latlng).run(function(error, result) { tay = result.address.Address; // aladije(result.address.Address) if (feature.administrasi.f3 == 'alamat') { if (tay != '') { var alamak = tay; } else { alamak = "" } } else { var alamak = feature.administrasi.f3; } if (feature.administrasi.f10 == 'bpk') { var raja = ""; } else { var raja = feature.administrasi.f10; } if (feature.administrasi.f8 == 'None') { var gmb = "static/img/image_null.png"; } else { var gmb = "static/img/image/" + feature.administrasi.f8; } $(".gambar_keterangan").html(`<img src="` + gmb + `" alt="" style="width:100%;height:240px;border-top-left-radius: 10px;border-bottom-left-radius: 10px;">`) $(".nama_keterangan").html(`<div> <span style="font-size: large;"> ` + feature.administrasi.f1 + ` </span> </div> <div> <span> ` + alamak + `, ` + feature.administrasi.f14 + `, ` + feature.administrasi.f13 + `, ` + feature.administrasi.f12 + ` </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> <div> <span>Jenis Bangunan</span> </div> <div> <span> ` + feature.administrasi.f2 + ` </span> </div> </div> <div> <div> <span>Luas</span> </div> <div> <span style="font-family: 'Roboto';">` + feature.administrasi.f5 + ` m</span> </div> </div> <div> <div> <span>Pimpinan</span> </div> <div> <span>` + raja + `</span> </div> </div>`); $(".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_edit_puskes" data-toggle="modal" data-target="#modal_adm" data-backdrop="static" data-keyboard="false" class="btn" style="border-bottom-left-radius: 8px;border-top-right-radius: 8px;width: 100%;height: 100%;bottom: 0px;color: white;" title="Edit"><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_delete_adm" data-toggle="modal" data-target="#modald_adm" data-backdrop="static" data-keyboard="false" class="btn" style="border-bottom-left-radius: 8px;border-top-right-radius: 8px;width: 100%;height: 100%;bottom: 0px;color: white;" title="Delete"><i class="icon-eraser2"></i></a> </div> `) content_edit_puskes = ` <div class="modal-dialog md"> <div class="modal-content"> <div class="modal-header bg-info" > <button type="button" class="close" data-dismiss="modal" onclick="destroyfade()">×</button> <h6 class="modal-title">Edit Point</h6> </div> <div class="tab-pane has-padding" id="panel-tab2"> <div class="tab-pane" id="bottom-justified-data"> <div class="tabbable"> <ul class="nav nav-tabs nav-tabs-bottom nav-justified"> <li onclick="changetabs(this)" class="active"><a href="#right-tab2-feas-upli" data-toggle="tab">Koordinat</a></li> <li onclick="changetabs(this)"><a href="#left-tab1-feas-upli" data-toggle="tab">Informasi Umum</a></li> </ul> <div class="tab-content"> <div class="tab-pane" id="left-tab1-feas-upli"> <div class="modal-body" style="overflow-x: hidden;max-height: 300px;overflow-y: scroll;padding-left: 15px;"> <div class="form-group"> <input style="display:none;" id="id_puskes_edit" type="text" class="form-control" value="` + feature.administrasi.f15 + `"required> <input style="display:none;" id="coordinateZoneedit_puskes_edit" type="text" class="form-control" value=""required> </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;">Nama Point</label> <div class="col-lg-9"> <input id="namobj_puskes_edit" type="text" class="form-control" value="` + feature.administrasi.f1 + `"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;">Tipe Point</label> <div class="col-lg-8"> <select id="remark_puskes_edit" style="margin-top: 15px;"> <option>` + feature.administrasi.f2 + `</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-4"> <input id="alamat_puskes_edit" type="text" class="form-control" value="` + alamak + `"required> </div> <div class="col-lg-4" style="margin-top: 15px;">` + feature.administrasi.f14 + `, ` + feature.administrasi.f13 + `</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</label> <div class="col-lg-6"> <input id="luas_tanah_puskes_edit" type="text" class="form-control" value="` + feature.administrasi.f5 + `"required> </div> <div class="col-lg-3"> <select id="satuan_luas_tanah" style="margin-top: 15px;"> <option>m2</option> <option>Km2</option> <option>Hektar</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="perangkat_puskes_edit" type="text" class="form-control" value="` + raja + `"required> </div> </div> </div> </div> </div> <div class="tab-pane active" id="right-tab2-feas-upli"> <div class="form-group"> <div id="map-for-edit" style="height: 300px;position: relative;margin: 10px;"></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="filepus" name="images[]" multiple accept="image/jpg,image/png,image/jpeg,image/gif"> <input style="display:none;" id="gambar_puskes_edit" type="text" class="form-control" value="` + feature.administrasi.f8 + `"required> </div> </div> </div> </div> </div> </div> </div> </div> <hr> <div class="modal-footer"> <button type="button" class="btn btn-info" id="saveeditpuskes">Save changes</button> </div> </div> </div>`; content_delete_point = ` <div class="modal-dialog md"> <div class="modal-content"> <div class="modal-header bg-info"> <button type="button" class="close" data-dismiss="modal" onclick="destroyfade()">×</button> <h6 class="modal-title">Delete Point</h6> </div> <div class="modal-body" style="overflow-x: hidden;max-height: 300px;overflow-y: scroll;padding-left: 15px;"> <input style="display:none;" id="id_adm_del" type="text" class="form-control" value="` + feature.administrasi.f15 + `"required> <input style="display:none;" id="nama_table" type="text" class="form-control" value="geo_puskesmas" required> <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="namobj_adm_del" type="text" class="form-control" value="` + feature.administrasi.f1 + `"required disabled> </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-8"> <input id="remark_adm_del" type="text" class="form-control" value="` + feature.administrasi.f2 + `"required disabled> </div> </div> </div> </div> <hr> <div class="modal-footer"> <button type="button" class="btn btn-info" id="deletepointot">Hapus</button> </div> </div> </div>`; $("#modald_adm").html(content_delete_point) $("#modal_adm").html(content_edit_puskes) panel_samp(); }) hidelegend(); } }) } }); var markerpuskes = L.markerClusterGroup({ iconCreateFunction: function(cluster) { var childCount = cluster.getChildCount(); return new L.DivIcon({ html: '<div><span>' + childCount + '</span></div>', className: 'marker-cluster-sakit', iconSize: new L.Point(40, 40) }); }, //Disable all of the defaults: spiderfyOnMaxZoom: false, showCoverageOnHover: false }); function geo_json_po_puskes(data) { geo_po_puskes.addData(data) } geo_json_po_puskes(result_puskes); function pks() { var checkBox = document.getElementById("pus"); if (checkBox.checked == true) { newe(markerpuskes, geo_po_puskes, checkBox) } else { markerpuskes.remove() geo_po_puskes.remove() valket() } } $(document).on("click", "#btn_edit_puskes", function() { var map_edit = L.map('map-for-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 idpuskes = $('#id_puskes_edit').val(); loaderPage(false); $.ajax({ url: "{% url 'api:editpks' %}", data: { 'id_point': idpuskes }, dataType: 'json', success: function(data) { setTimeout(function() { map_edit.invalidateSize(); }, 1000); loaderPage(false); console.log(data) // map_edit.setView([data['geometry']['coordinates'][0][0][0][1], data['geometry']['coordinates'][0][0][0][0]], 19); map_edit.setView([data['geometry']['coordinates'][1], data['geometry']['coordinates'][0]], 19); let dapoin = [data['geometry']['coordinates'][1], data['geometry']['coordinates'][0]] var poinin = L.marker(dapoin).addTo(map_edit) poinin.enableEdit(); $('#saveeditpuskes').click(function() { var hasil = (JSON.stringify(poinin.toGeoJSON())) $("#coordinateZoneedit_puskes_edit").val(hasil); }) } }) }); $(document).on("click", "#saveeditpuskes", function() { var idka = $('#id_puskes_edit').val(); var poi = $('#coordinateZoneedit_puskes_edit').val(); var data = new FormData(); data.append("file", $("input[id^='filepus']")[0].files[0]); data.append("csrfmiddlewaretoken", "{{ csrf_token }}"); data.append('idpus', idka) data.append('namobj', $('#namobj_puskes_edit').val()) data.append('remark', $('#remark_puskes_edit').val()) data.append('luastanah', $('#luas_tanah_puskes_edit').val()) data.append('alamat', $('#alamat_puskes_edit').val()) data.append('perangkat', $('#perangkat_puskes_edit').val()) data.append('point', poi), data.append('gambar', $('#gambar_puskes_edit').val()) $.ajax({ url: "{% url 'api:puskesmas' %}", 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_adm").modal("hide"); $("#modal_detail_non_kelurahan").modal('hide') //location.reload(); }) } else { swal({ title: 'Error', text: 'Hubungi Developer', type: "warning", icon: "error", confirmButtonColor: "#00BCD4" }) } //location.reload() } }) }); var rumah_sakit = "{{ rumah_sakit }}".replace(/'/g, '"'); var result_rumah_sakit = JSON.parse("" + rumah_sakit + "") var geo_po_rumah_sakit = L.geoJson(null, { pointToLayer: function(feature, latlng) { var smallIcon = new L.Icon({ iconSize: [25, 25], iconAnchor: [13, 27], popupAnchor: [1, -24], iconUrl: 'static/img/icon-1/FirstAid-tes.svg' // iconUrl: 'static/img/icon/rs.svg', // shadowUrl: 'static/img/icon/shadow.svg', // shadowSize: [35, 35], // shadowAnchor: [19, 31] }); var marker = L.marker(latlng, { icon: smallIcon }); conten = ` <div id="bottom-justified-data" style="text-align: center;"> <div > <img src="static/img/image/` + feature.administrasi.f8 + `" alt="Image" style="width: 150px!important;height: 125px;"> </div> <div > <div style="font-family: Google Sans,Roboto,Arial,sans-serif; letter-spacing: 0"> <p > ` + feature.administrasi.f1 + ` </p> </div> </div> </div> `; marker.bindTooltip(conten, { permanent: false, className: "my-label", direction: 'top', offset: [0, -25] }); return marker }, onEachFeature: function(feature, layer) { layer.on({ click: function(e) { $("#modal_detail_non_kelurahan").modal('show'); var tay; var geocodeService = L.esri.Geocoding.geocodeService(); var geocoderNominatim = new L.Control.Geocoder.Nominatim(); var geogeo = geocodeService.reverse().latlng(e.latlng).run(function(error, result) { tay = result.address.Address; // aladije(result.address.Address) if (feature.administrasi.f3 == 'alamat') { if (tay != '') { var alamak = tay; } else { alamak = "" } } else { var alamak = feature.administrasi.f3; } if (feature.administrasi.f10 == 'bpk') { var raja = ""; } else { var raja = feature.administrasi.f10; } if (feature.administrasi.f8 == 'None') { var gmb = "static/img/image_null.png"; } else { var gmb = "static/img/image/" + feature.administrasi.f8; } $(".gambar_keterangan").html(`<img src="` + gmb + `" alt="" style="width:100%;height:240px;border-top-left-radius: 10px;border-bottom-left-radius: 10px;">`) $(".nama_keterangan").html(`<div> <span style="font-size: large;"> ` + feature.administrasi.f1 + ` </span> </div> <div> <span> ` + alamak + `, ` + feature.administrasi.f14 + `, ` + feature.administrasi.f13 + `, ` + feature.administrasi.f12 + ` </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> <div> <span>Jenis Bangunan</span> </div> <div> <span> ` + feature.administrasi.f2 + ` </span> </div> </div> <div> <div> <span>Luas</span> </div> <div> <span style="font-family: 'Roboto';">` + feature.administrasi.f5 + ` m</span> </div> </div> <div> <div> <span>Pimpinan</span> </div> <div> <span>` + raja + `</span> </div> </div>`); $(".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_edit_rs" data-toggle="modal" data-target="#modal_adm" data-backdrop="static" data-keyboard="false" class="btn" style="border-bottom-left-radius: 8px;border-top-right-radius: 8px;width: 100%;height: 100%;bottom: 0px;color: white;" title="Edit"><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_delete_adm" data-toggle="modal" data-target="#modald_adm" data-backdrop="static" data-keyboard="false" class="btn" style="border-bottom-left-radius: 8px;border-top-right-radius: 8px;width: 100%;height: 100%;bottom: 0px;color: white;" title="Delete"><i class="icon-eraser2"></i></a> </div> `) content_edit_rs = ` <div class="modal-dialog md"> <div class="modal-content"> <div class="modal-header bg-info" > <button type="button" class="close" data-dismiss="modal" onclick="destroyfade()">×</button> <h6 class="modal-title">Edit Point</h6> </div> <div class="tab-pane has-padding" id="panel-tab2"> <div class="tab-pane" id="bottom-justified-data"> <div class="tabbable"> <ul class="nav nav-tabs nav-tabs-bottom nav-justified"> <li onclick="changetabs(this)" class="active"><a href="#right-tab2-feas-upli" data-toggle="tab">Koordinat</a></li> <li onclick="changetabs(this)"><a href="#left-tab1-feas-upli" data-toggle="tab">Informasi Umum</a></li> </ul> <div class="tab-content"> <div class="tab-pane" id="left-tab1-feas-upli"> <div class="modal-body" style="overflow-x: hidden;max-height: 300px;overflow-y: scroll;padding-left: 15px;"> <div class="form-group"> <input style="display:none;" id="id_rs_edit" type="text" class="form-control" value="` + feature.administrasi.f15 + `"required> <input style="display:none;" id="coordinateZoneedit_rs_edit" type="text" class="form-control" value=""required> </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;">Nama Point</label> <div class="col-lg-9"> <input id="namobj_rs_edit" type="text" class="form-control" value="` + feature.administrasi.f1 + `"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;">Tipe Point</label> <div class="col-lg-8"> <select id="remark_rs_edit" style="margin-top: 15px;"> <option>` + feature.administrasi.f2 + `</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-4"> <input id="alamat_rs_edit" type="text" class="form-control" value="` + alamak + `"required> </div> <div class="col-lg-4" style="margin-top: 15px;">` + feature.administrasi.f14 + `, ` + feature.administrasi.f13 + `</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</label> <div class="col-lg-6"> <input id="luas_tanah_rs_edit" type="text" class="form-control" value="` + feature.administrasi.f5 + `"required> </div> <div class="col-lg-3"> <select id="satuan_luas_tanah" style="margin-top: 15px;"> <option>m2</option> <option>Km2</option> <option>Hektar</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="perangkat_rs_edit" type="text" class="form-control" value="` + raja + `"required> </div> </div> </div> </div> </div> <div class="tab-pane active" id="right-tab2-feas-upli"> <div class="form-group"> <div id="map-for-edit" style="height: 300px;position: relative;margin: 10px;"></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="filers" name="images[]" multiple accept="image/jpg,image/png,image/jpeg,image/gif"> <input style="display:none;" id="gambar_rs_edit" type="text" class="form-control" value="` + feature.administrasi.f8 + `"required> </div> </div> </div> </div> </div> </div> </div> </div> <hr> <div class="modal-footer"> <button type="button" class="btn btn-info" id="saveeditrs">Save changes</button> </div> </div> </div>`; content_delete_point = ` <div class="modal-dialog md"> <div class="modal-content"> <div class="modal-header bg-info"> <button type="button" class="close" data-dismiss="modal" onclick="destroyfade()">×</button> <h6 class="modal-title">Delete Point</h6> </div> <div class="modal-body" style="overflow-x: hidden;max-height: 300px;overflow-y: scroll;padding-left: 15px;"> <input style="display:none;" id="id_adm_del" type="text" class="form-control" value="` + feature.administrasi.f15 + `"required> <input style="display:none;" id="nama_table" type="text" class="form-control" value="geo_rumah_sakit" required> <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="namobj_adm_del" type="text" class="form-control" value="` + feature.administrasi.f1 + `"required disabled> </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-8"> <input id="remark_adm_del" type="text" class="form-control" value="` + feature.administrasi.f2 + `"required disabled> </div> </div> </div> </div> <hr> <div class="modal-footer"> <button type="button" class="btn btn-info" id="deletepointot">Hapus</button> </div> </div> </div>`; $("#modald_adm").html(content_delete_point) $("#modal_adm").html(content_edit_rs) panel_samp(); }) hidelegend(); } }) } }); function geo_json_po_rumah_sakit(data) { geo_po_rumah_sakit.addData(data) } geo_json_po_rumah_sakit(result_rumah_sakit); function rs() { var checkBox = document.getElementById("rusak"); if (checkBox.checked == true) { geo_po_rumah_sakit.addTo(map) } else { geo_po_rumah_sakit.remove() valket() } } $(document).on("click", "#btn_edit_rs", function() { var map_edit = L.map('map-for-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 idrs = $('#id_rs_edit').val(); loaderPage(false); $.ajax({ url: "{% url 'api:editrs' %}", data: { 'id_point': idrs }, dataType: 'json', success: function(data) { setTimeout(function() { map_edit.invalidateSize(); }, 1000); loaderPage(false); console.log(data) // map_edit.setView([data['geometry']['coordinates'][0][0][0][1], data['geometry']['coordinates'][0][0][0][0]], 19); map_edit.setView([data['geometry']['coordinates'][1], data['geometry']['coordinates'][0]], 19); let dapoin = [data['geometry']['coordinates'][1], data['geometry']['coordinates'][0]] var poinin = L.marker(dapoin).addTo(map_edit) poinin.enableEdit(); $('#saveeditrs').click(function() { var hasil = (JSON.stringify(poinin.toGeoJSON())) $("#coordinateZoneedit_rs_edit").val(hasil); }) } }) }); $(document).on("click", "#saveeditrs", function() { var idrs = $('#id_rs_edit').val(); var poi = $('#coordinateZoneedit_rs_edit').val(); var data = new FormData(); data.append("file", $("input[id^='filers']")[0].files[0]); data.append("csrfmiddlewaretoken", "{{ csrf_token }}"); data.append('idrs', idrs) data.append('namobj', $('#namobj_rs_edit').val()) data.append('remark', $('#remark_rs_edit').val()) data.append('luastanah', $('#luas_tanah_rs_edit').val()) data.append('alamat', $('#alamat_rs_edit').val()) data.append('perangkat', $('#perangkat_rs_edit').val()) data.append('point', poi), data.append('gambar', $('#gambar_rs_edit').val()) $.ajax({ url: "{% url 'api:rumahsakit' %}", 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_adm").modal('hide'); $("#modal_detail_non_kelurahan").modal('hide') //location.reload(); }) } else { swal({ title: 'Error', text: 'Hubungi Developer', type: "warning", icon: "error", confirmButtonColor: "#00BCD4" }) } //location.reload() } }) }); var sarana_ibadah = "{{ sarana_ibadah }}".replace(/'/g, '"'); var result_sarana_ibadah = JSON.parse("" + sarana_ibadah + "") var geo_po_sarana_ibadah = L.geoJson(null, { pointToLayer: function(feature, latlng) { if (feature.administrasi.f2 == 'Masjid') { var smallIcon = new L.Icon({ iconSize: [25, 25], iconAnchor: [13, 27], popupAnchor: [1, -24], iconUrl: 'static/img/icon/masjid.svg', // shadowUrl: 'static/img/icon/shadow.svg', // shadowSize: [35, 35], // shadowAnchor: [19, 30] }); var marker = L.marker(latlng, { icon: smallIcon }); conten = ` <div id="bottom-justified-data" style="text-align: center;"> <div > <img src="static/img/image/` + feature.administrasi.f8 + `" alt="Image" style="width: 150px!important;height: 125px;"> </div> <div > <div style="font-family: Google Sans,Roboto,Arial,sans-serif; letter-spacing: 0"> <p > ` + feature.administrasi.f1 + ` </p> </div> </div> </div> `; marker.bindTooltip(conten, { permanent: false, className: "my-label", direction: 'top', offset: [0, -25] }); return marker } else if (feature.administrasi.f2 == 'Gereja') { var smallIcon = new L.Icon({ iconSize: [25, 25], iconAnchor: [13, 27], popupAnchor: [1, -24], iconUrl: 'static/img/icon/gereja.svg', // shadowUrl: 'static/img/icon/shadow.svg', // shadowSize: [35, 35], // shadowAnchor: [22, 31] }); var marker = L.marker(latlng, { icon: smallIcon }); conten = ` <div id="bottom-justified-data" style="text-align: center;"> <div > <img src="static/img/image/` + feature.administrasi.f8 + `" alt="Image" style="width: 150px!important;height: 125px;"> </div> <div > <div style="font-family: Google Sans,Roboto,Arial,sans-serif; letter-spacing: 0"> <p > ` + feature.administrasi.f1 + ` </p> </div> </div> </div> `; marker.bindTooltip(conten, { permanent: false, className: "my-label", direction: 'top', offset: [0, -25] }); return marker } else if (feature.administrasi.f2 == 'Peribadatan/Sosial Lainnya') { var smallIcon = new L.Icon({ iconSize: [25, 25], iconAnchor: [13, 27], popupAnchor: [1, -24], iconUrl: 'static/img/icon/pesantren.svg', // shadowUrl: 'static/img/icon/shadow.svg', // shadowSize: [35, 35], // shadowAnchor: [22, 31] }); var marker = L.marker(latlng, { icon: smallIcon }); conten = ` <div id="bottom-justified-data" style="text-align: center;"> <div > <img src="static/img/image/` + feature.administrasi.f8 + `" alt="Image" style="width: 150px!important;height: 125px;"> </div> <div > <div style="font-family: Google Sans,Roboto,Arial,sans-serif; letter-spacing: 0"> <p > ` + feature.administrasi.f1 + ` </p> </div> </div> </div> `; marker.bindTooltip(conten, { permanent: false, className: "my-label", direction: 'top', offset: [0, -25] }); return marker } else if (feature.administrasi.f2 == 'Pura') { var smallIcon = new L.Icon({ iconSize: [25, 25], iconAnchor: [13, 27], popupAnchor: [1, -24], iconUrl: 'static/img/icon/pura.svg', // shadowUrl: 'static/img/icon/shadow.svg', // shadowSize: [35, 35], // shadowAnchor: [22, 31] }); var marker = L.marker(latlng, { icon: smallIcon }); conten = ` <div id="bottom-justified-data" style="text-align: center;"> <div > <img src="static/img/image/` + feature.administrasi.f8 + `" alt="Image" style="width: 150px!important;height: 125px;"> </div> <div > <div style="font-family: Google Sans,Roboto,Arial,sans-serif; letter-spacing: 0"> <p > ` + feature.administrasi.f1 + ` </p> </div> </div> </div> `; marker.bindTooltip(conten, { permanent: false, className: "my-label", direction: 'top', offset: [0, -25] }); return marker } }, onEachFeature: function(feature, layer) { layer.on({ click: function(e) { $("#modal_detail_non_kelurahan").modal('show'); var tay; var geocodeService = L.esri.Geocoding.geocodeService(); var geocoderNominatim = new L.Control.Geocoder.Nominatim(); var geogeo = geocodeService.reverse().latlng(e.latlng).run(function(error, result) { tay = result.address.Address; // aladije(result.address.Address) if (feature.administrasi.f3 == 'alamat') { if (tay != '') { var alamak = tay; } else { alamak = "" } } else { var alamak = feature.administrasi.f3; } if (feature.administrasi.f10 == 'bpk') { var raja = ""; } else { var raja = feature.administrasi.f10; } content_edit_ibdh = ` <div class="modal-dialog md"> <div class="modal-content"> <div class="modal-header bg-info" > <button type="button" class="close" data-dismiss="modal" onclick="destroyfade()">×</button> <h6 class="modal-title">Edit Point</h6> </div> <div class="tab-pane has-padding" id="panel-tab2"> <div class="tab-pane" id="bottom-justified-data"> <div class="tabbable"> <ul class="nav nav-tabs nav-tabs-bottom nav-justified"> <li onclick="changetabs(this)" class="active"><a href="#right-tab2-feas-upli" data-toggle="tab">Koordinat</a></li> <li onclick="changetabs(this)"><a href="#left-tab1-feas-upli" data-toggle="tab">Informasi Umum</a></li> </ul> <div class="tab-content"> <div class="tab-pane" id="left-tab1-feas-upli"> <div class="modal-body" style="overflow-x: hidden;max-height: 300px;overflow-y: scroll;padding-left: 15px;"> <div class="form-group"> <input style="display:none;" id="id_si_edit" type="text" class="form-control" value="` + feature.administrasi.f15 + `"required> <input style="display:none;" id="coordinateZoneedit_si_edit" type="text" class="form-control" value=""required> </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;">Nama Point</label> <div class="col-lg-9"> <input id="namobj_si_edit" type="text" class="form-control" value="` + feature.administrasi.f1 + `"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;">Tipe Point</label> <div class="col-lg-8"> <select id="remark_si_edit" style="margin-top: 15px;"> <option>` + feature.administrasi.f2 + `</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-4"> <input id="alamat_si_edit" type="text" class="form-control" value="` + alamak + `"required> </div> <div class="col-lg-4" style="margin-top: 15px;">` + feature.administrasi.f14 + `, ` + feature.administrasi.f13 + `</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</label> <div class="col-lg-6"> <input id="luas_tanah_si_edit" type="text" class="form-control" value="` + feature.administrasi.f5 + `"required> </div> <div class="col-lg-3"> <select id="satuan_luas_tanah" style="margin-top: 15px;"> <option>m2</option> <option>Km2</option> <option>Hektar</option> </select> </div> </div> </div> <div class="row" style="margin-top: 15px; display:none;"> <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="perangkat_si_edit" type="text" class="form-control" value="` + raja + `"required> </div> </div> </div> </div> </div> <div class="tab-pane active" id="right-tab2-feas-upli"> <div class="form-group"> <div id="map-for-edit" style="height: 300px;position: relative;margin: 10px;"></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="filesi" name="images[]" multiple accept="image/jpg,image/png,image/jpeg,image/gif"> <input style="display:none;" id="gambar_si_edit" type="text" class="form-control" value="` + feature.administrasi.f8 + `"required> </div> </div> </div> </div> </div> </div> </div> </div> <hr> <div class="modal-footer"> <button type="button" class="btn btn-info" id="saveeditsi">Save changes</button> </div> </div> </div>` if (feature.administrasi.f8 == 'None') { var gmb = "static/img/image_null.png"; } else { var gmb = "static/img/image/" + feature.administrasi.f8; } $(".gambar_keterangan").html(`<img src="` + gmb + `" alt="" style="width:100%;height:240px;border-top-left-radius: 10px;border-bottom-left-radius: 10px;">`) $(".nama_keterangan").html(`<div> <span style="font-size: large;"> ` + feature.administrasi.f1 + ` </span> </div> <div> <span> ` + alamak + `, ` + feature.administrasi.f14 + `, ` + feature.administrasi.f13 + `, ` + feature.administrasi.f12 + ` </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> <div> <span>Jenis Bangunan</span> </div> <div> <span> ` + feature.administrasi.f2 + ` </span> </div> </div> <div> <div> <span>Luas</span> </div> <div> <span style="font-family: 'Roboto';">` + feature.administrasi.f5 + ` m</span> </div> </div> <div> <div> <span>Pimpinan</span> </div> <div> <span>` + raja + `</span> </div> </div>`); $(".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_edit_si" data-toggle="modal" data-target="#modal_adm" data-backdrop="static" data-keyboard="false" class="btn" style="border-bottom-left-radius: 8px;border-top-right-radius: 8px;width: 100%;height: 100%;bottom: 0px;color: white;" title="Edit"><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_delete_adm" data-toggle="modal" data-target="#modald_adm" data-backdrop="static" data-keyboard="false" class="btn" style="border-bottom-left-radius: 8px;border-top-right-radius: 8px;width: 100%;height: 100%;bottom: 0px;color: white;" title="Delete"><i class="icon-eraser2"></i></a> </div> `) content_delete_point = ` <div class="modal-dialog md"> <div class="modal-content"> <div class="modal-header bg-info"> <button type="button" class="close" data-dismiss="modal" onclick="destroyfade()">×</button> <h6 class="modal-title">Delete Point</h6> </div> <div class="modal-body" style="overflow-x: hidden;max-height: 300px;overflow-y: scroll;padding-left: 15px;"> <input style="display:none;" id="id_adm_del" type="text" class="form-control" value="` + feature.administrasi.f15 + `"required> <input style="display:none;" id="nama_table" type="text" class="form-control" value="geo_sarana_ibadah" required> <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="namobj_adm_del" type="text" class="form-control" value="` + feature.administrasi.f1 + `"required disabled> </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-8"> <input id="remark_adm_del" type="text" class="form-control" value="` + feature.administrasi.f2 + `"required disabled> </div> </div> </div> </div> <hr> <div class="modal-footer"> <button type="button" class="btn btn-info" id="deletepointot">Hapus</button> </div> </div> </div>`; $("#modald_adm").html(content_delete_point) $("#modal_adm").html(content_edit_ibdh) panel_samp(); }) hidelegend(); } }) } }); var markeribdh = L.markerClusterGroup({ iconCreateFunction: function(cluster) { var childCount = cluster.getChildCount(); return new L.DivIcon({ html: '<div><span>' + childCount + '</span></div>', className: 'marker-cluster-ibdh', iconSize: new L.Point(40, 40) }); }, //Disable all of the defaults: spiderfyOnMaxZoom: false, showCoverageOnHover: false }); function geo_json_po_sarana_ibadah(data) { geo_po_sarana_ibadah.addData(data) } geo_json_po_sarana_ibadah(result_sarana_ibadah); function fiksi() { var checkBox = document.getElementById("ibdh"); if (checkBox.checked == true) { newe(markeribdh, geo_po_sarana_ibadah, checkBox) } else { markeribdh.remove() geo_po_sarana_ibadah.remove() valket() } } $(document).on("click", "#btn_edit_si", function() { var map_edit = L.map('map-for-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 idsi = $('#id_si_edit').val(); loaderPage(false); $.ajax({ url: "{% url 'api:editsi' %}", data: { 'id_point': idsi }, dataType: 'json', success: function(data) { setTimeout(function() { map_edit.invalidateSize(); }, 1000); loaderPage(false); console.log(data) // map_edit.setView([data['geometry']['coordinates'][0][0][0][1], data['geometry']['coordinates'][0][0][0][0]], 19); map_edit.setView([data['geometry']['coordinates'][1], data['geometry']['coordinates'][0]], 19); let dapoin = [data['geometry']['coordinates'][1], data['geometry']['coordinates'][0]] var poinin = L.marker(dapoin).addTo(map_edit) poinin.enableEdit(); $('#saveeditsi').click(function() { var hasil = (JSON.stringify(poinin.toGeoJSON())) $("#coordinateZoneedit_si_edit").val(hasil); }) } }) }); $(document).on("click", "#saveeditsi", function() { var idsi = $('#id_si_edit').val(); var poi = $('#coordinateZoneedit_si_edit').val(); var data = new FormData(); data.append("file", $("input[id^='filesi']")[0].files[0]); data.append("csrfmiddlewaretoken", "{{ csrf_token }}"); data.append('idsi', idsi) data.append('namobj', $('#namobj_si_edit').val()) data.append('remark', $('#remark_si_edit').val()) data.append('luastanah', $('#luas_tanah_si_edit').val()) data.append('alamat', $('#alamat_si_edit').val()) data.append('perangkat', $('#perangkat_si_edit').val()) data.append('point', poi), data.append('gambar', $('#gambar_si_edit').val()) $.ajax({ url: "{% url 'api:ibadah' %}", 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_adm").modal('hide'); $("#modal_detail_non_kelurahan").modal('hide') //location.reload(); }) } else { swal({ title: 'Error', text: 'Hubungi Developer', type: "warning", icon: "error", confirmButtonColor: "#00BCD4" }) } //location.reload() } }) }); var sarana_pendidikan = "{{ sarana_pendidikan }}".replace(/'/g, '"'); var result_sarana_pendidikan = JSON.parse("" + sarana_pendidikan + "") var geo_po_sarana_pendidikan = L.geoJson(null, { pointToLayer: function(feature, latlng) { if (feature.administrasi.f2 == 'Pendidikan Tinggi') { var smallIcon = new L.Icon({ iconSize: [25, 25], iconAnchor: [13, 27], popupAnchor: [1, -24], iconUrl: '/static/img/icon-1/GraduationCap-tes.svg' // iconUrl: 'static/img/icon/kampus.svg', // shadowUrl: 'static/img/icon/shadow.svg', // shadowSize: [35, 35], // shadowAnchor: [19, 30] }); var marker = L.marker(latlng, { icon: smallIcon }); conten = ` <div id="bottom-justified-data" style="text-align: center;"> <div > <img src="static/img/image/` + feature.administrasi.f8 + `" alt="Image" style="width: 150px!important;height: 125px;"> </div> <div > <div style="font-family: Google Sans,Roboto,Arial,sans-serif; letter-spacing: 0"> <p > ` + feature.administrasi.f1 + ` </p> </div> </div> </div> `; marker.bindTooltip(conten, { permanent: false, className: "my-label", direction: 'top', offset: [0, -25] }); return marker } else if (feature.administrasi.f2 == 'Perpustakaan') { var smallIcon = new L.Icon({ iconSize: [25, 25], iconAnchor: [13, 27], popupAnchor: [1, -24], iconUrl: '/static/img/icon-1/GraduationCap-tes.svg' // iconUrl: 'static/img/icon/perpus.svg', // shadowUrl: 'static/img/icon/shadow.svg', // shadowSize: [35, 35], // shadowAnchor: [22, 31] }); var marker = L.marker(latlng, { icon: smallIcon }); conten = ` <div id="bottom-justified-data" style="text-align: center;"> <div > <img src="static/img/image/` + feature.administrasi.f8 + `" alt="Image" style="width: 150px!important;height: 125px;"> </div> <div > <div style="font-family: Google Sans,Roboto,Arial,sans-serif; letter-spacing: 0"> <p > ` + feature.administrasi.f1 + ` </p> </div> </div> </div> `; marker.bindTooltip(conten, { permanent: false, className: "my-label", direction: 'top', offset: [0, -25] }); return marker } else { var smallIcon = new L.Icon({ iconSize: [25, 25], iconAnchor: [13, 27], popupAnchor: [1, -24], iconUrl: '/static/img/icon-1/GraduationCap-tes.svg' // iconUrl: 'static/img/icon/sekolah.svg', // shadowUrl: 'static/img/icon/shadow.svg', // shadowSize: [35, 35], // shadowAnchor: [22, 31] }); var marker = L.marker(latlng, { icon: smallIcon }); conten = ` <div id="bottom-justified-data" style="text-align: center;"> <div > <img src="static/img/image/` + feature.administrasi.f8 + `" alt="Image" style="width: 150px!important;height: 125px;"> </div> <div > <div style="font-family: Google Sans,Roboto,Arial,sans-serif; letter-spacing: 0"> <p > ` + feature.administrasi.f1 + ` </p> </div> </div> </div> `; marker.bindTooltip(conten, { permanent: false, className: "my-label", direction: 'top', offset: [0, -25] }); return marker } }, onEachFeature: function(feature, layer) { layer.on({ click: function(e) { $("#modal_detail_non_kelurahan").modal('show'); var tay; var geocodeService = L.esri.Geocoding.geocodeService(); var geocoderNominatim = new L.Control.Geocoder.Nominatim(); var geogeo = geocodeService.reverse().latlng(e.latlng).run(function(error, result) { tay = result.address.Address; if (feature.administrasi.f3 == 'alamat') { if (tay != '') { var alamak = tay; } else { alamak = "" } } else { var alamak = feature.administrasi.f3; } if (feature.administrasi.f10 == 'bpk') { var raja = ""; } else { var raja = feature.administrasi.f10; } content_edit_sp = ` <div class="modal-dialog md"> <div class="modal-content"> <div class="modal-header bg-info" > <button type="button" class="close" data-dismiss="modal" onclick="destroyfade()">×</button> <h6 class="modal-title">Edit Point</h6> </div> <div class="tab-pane has-padding" id="panel-tab2"> <div class="tab-pane" id="bottom-justified-data"> <div class="tabbable"> <ul class="nav nav-tabs nav-tabs-bottom nav-justified"> <li onclick="changetabs(this)" class="active"><a href="#right-tab2-feas-upli" data-toggle="tab">Koordinat</a></li> <li onclick="changetabs(this)"><a href="#left-tab1-feas-upli" data-toggle="tab">Informasi Umum</a></li> </ul> <div class="tab-content"> <div class="tab-pane" id="left-tab1-feas-upli"> <div class="modal-body" style="overflow-x: hidden;max-height: 300px;overflow-y: scroll;padding-left: 15px;"> <div class="form-group"> <input style="display:none;" id="id_sp_edit" type="text" class="form-control" value="` + feature.administrasi.f15 + `"required> <input style="display:none;" id="coordinateZoneedit_sp_edit" type="text" class="form-control" value=""required> </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;">Nama Point</label> <div class="col-lg-9"> <input id="namobj_sp_edit" type="text" class="form-control" value="` + feature.administrasi.f1 + `"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;">Tipe Point</label> <div class="col-lg-8"> <select id="remark_sp_edit" style="margin-top: 15px;"> <option>` + feature.administrasi.f2 + `</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-4"> <input id="alamat_sp_edit" type="text" class="form-control" value="` + alamak + `"required> </div> <div class="col-lg-4" style="margin-top: 15px;">` + feature.administrasi.f14 + `, ` + feature.administrasi.f13 + `</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_sp_edit" type="text" class="form-control" value="` + feature.administrasi.f5 + `"required> </div> <div class="col-lg-3"> <select id="satuan_luas_tanah" style="margin-top: 15px;"> <option>m2</option> <option>Km2</option> <option>Hektar</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="perangkat_sp_edit" type="text" class="form-control" value="` + raja + `"required> </div> </div> </div> </div> </div> <div class="tab-pane active" id="right-tab2-feas-upli"> <div class="form-group"> <div id="map-for-edit" style="height: 300px;position: relative;margin: 10px;"></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="filesp" name="images[]" multiple accept="image/jpg,image/png,image/jpeg,image/gif"> <input style="display:none;" id="gambar_sp_edit" type="text" class="form-control" value="` + feature.administrasi.f8 + `"required> </div> </div> </div> </div> </div> </div> </div> </div> <hr> <div class="modal-footer"> <button type="button" class="btn btn-info" id="saveeditsp">Save changes</button> </div> </div> </div>` if (feature.administrasi.f8 == 'None') { var gmb = "static/img/image_null.png"; } else { var gmb = "static/img/image/" + feature.administrasi.f8; } $(".gambar_keterangan").html(`<img src="` + gmb + `" alt="" style="width:100%;height:240px;border-top-left-radius: 10px;border-bottom-left-radius: 10px;">`) $(".nama_keterangan").html(`<div> <span style="font-size: large;"> ` + feature.administrasi.f1 + ` </span> </div> <div> <span> ` + alamak + `, ` + feature.administrasi.f14 + `, ` + feature.administrasi.f13 + `, ` + feature.administrasi.f12 + ` </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> <div> <span>Jenis Bangunan</span> </div> <div> <span> ` + feature.administrasi.f2 + ` </span> </div> </div> <div> <div> <span>Luas</span> </div> <div> <span style="font-family: 'Roboto';">` + feature.administrasi.f5 + ` m</span> </div> </div> <div> <div> <span>Pimpinan</span> </div> <div> <span>` + raja + `</span> </div> </div>`); $(".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_edit_sp" data-toggle="modal" data-target="#modal_adm" data-backdrop="static" data-keyboard="false" class="btn" style="border-bottom-left-radius: 8px;border-top-right-radius: 8px;width: 100%;height: 100%;bottom: 0px;color: white;" title="Edit"><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_delete_adm" data-toggle="modal" data-target="#modald_adm" data-backdrop="static" data-keyboard="false" class="btn" style="border-bottom-left-radius: 8px;border-top-right-radius: 8px;width: 100%;height: 100%;bottom: 0px;color: white;" title="Delete"><i class="icon-eraser2"></i></a> </div> `) content_delete_point = ` <div class="modal-dialog md"> <div class="modal-content"> <div class="modal-header bg-info"> <button type="button" class="close" data-dismiss="modal" onclick="destroyfade()">×</button> <h6 class="modal-title">Delete Point</h6> </div> <div class="modal-body" style="overflow-x: hidden;max-height: 300px;overflow-y: scroll;padding-left: 15px;"> <input style="display:none;" id="id_adm_del" type="text" class="form-control" value="` + feature.administrasi.f15 + `"required> <input style="display:none;" id="nama_table" type="text" class="form-control" value="geo_sarana_pendidikan"required> <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="namobj_adm_del" type="text" class="form-control" value="` + feature.administrasi.f1 + `"required disabled> </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-8"> <input id="remark_adm_del" type="text" class="form-control" value="` + feature.administrasi.f2 + `"required disabled> </div> </div> </div> </div> <hr> <div class="modal-footer"> <button type="button" class="btn btn-info" id="deletepointot">Hapus</button> </div> </div> </div>`; $("#modald_adm").html(content_delete_point) $("#modal_adm").html(content_edit_sp) panel_samp(); }) hidelegend(); } }) } }); var markerpend = L.markerClusterGroup({ iconCreateFunction: function(cluster) { var childCount = cluster.getChildCount(); return new L.DivIcon({ html: '<div><span>' + childCount + '</span></div>', className: 'marker-cluster-pend', iconSize: new L.Point(40, 40) }); }, //Disable all of the defaults: spiderfyOnMaxZoom: false, showCoverageOnHover: false }); function geo_json_po_sarana_pendidikan(data) { geo_po_sarana_pendidikan.addData(data) } geo_json_po_sarana_pendidikan(result_sarana_pendidikan); function didik() { var checkBox = document.getElementById("dididik"); if (checkBox.checked == true) { newe(markerpend, geo_po_sarana_pendidikan, checkBox) } else { markerpend.remove() geo_po_sarana_pendidikan.remove() valket() } } $(document).on("click", "#btn_edit_sp", function() { var map_edit = L.map('map-for-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 idsp = $('#id_sp_edit').val(); loaderPage(false); $.ajax({ url: "{% url 'api:editsp' %}", data: { 'id_point': idsp }, dataType: 'json', success: function(data) { setTimeout(function() { map_edit.invalidateSize(); }, 1000); loaderPage(false); console.log(data) // map_edit.setView([data['geometry']['coordinates'][0][0][0][1], data['geometry']['coordinates'][0][0][0][0]], 19); map_edit.setView([data['geometry']['coordinates'][1], data['geometry']['coordinates'][0]], 19); let dapoin = [data['geometry']['coordinates'][1], data['geometry']['coordinates'][0]] var poinin = L.marker(dapoin).addTo(map_edit) poinin.enableEdit(); $('#saveeditsp').click(function() { var hasil = (JSON.stringify(poinin.toGeoJSON())) $("#coordinateZoneedit_sp_edit").val(hasil); }) } }) }); $(document).on("click", "#saveeditsp", function() { var idsp = $('#id_sp_edit').val(); var poi = $('#coordinateZoneedit_sp_edit').val(); var data = new FormData(); data.append("file", $("input[id^='filesp']")[0].files[0]); data.append("csrfmiddlewaretoken", "{{ csrf_token }}"); data.append('idsp', idsp) data.append('namobj', $('#namobj_sp_edit').val()) data.append('remark', $('#remark_sp_edit').val()) data.append('luastanah', $('#luas_tanah_sp_edit').val()) data.append('alamat', $('#alamat_sp_edit').val()) data.append('perangkat', $('#perangkat_sp_edit').val()) data.append('point', poi), data.append('gambar', $('#gambar_sp_edit').val()) $.ajax({ url: "{% url 'api:sekolah' %}", 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_adm").modal('hide'); $("#modal_detail_non_kelurahan").modal('hide') //location.reload(); }) } else { swal({ title: 'Error', text: 'Hubungi Developer', type: "warning", icon: "error", confirmButtonColor: "#00BCD4" }) } //location.reload() } }) }); var spbu = "{{ spbu }}".replace(/'/g, '"'); var result_spbu = JSON.parse("" + spbu + "") var geo_po_spbu = L.geoJson(null, { pointToLayer: function(feature, latlng) { var smallIcon = new L.Icon({ iconSize: [25, 25], iconAnchor: [13, 27], popupAnchor: [1, -24], iconUrl: 'static/img/icon/pom.svg', shadowUrl: 'static/img/icon/shadow.svg', shadowSize: [35, 35], shadowAnchor: [19, 30] }); var marker = L.marker(latlng, { icon: smallIcon }); conten = ` <div id="bottom-justified-data" style="text-align: center;"> <div > <img src="static/img/image/` + feature.administrasi.f8 + `" alt="Image" style="width: 150px!important;height: 125px;"> </div> <div > <div style="font-family: Google Sans,Roboto,Arial,sans-serif; letter-spacing: 0"> <p > ` + feature.administrasi.f1 + ` </p> </div> </div> </div> `; marker.bindTooltip(conten, { permanent: false, className: "my-label", direction: 'top', offset: [0, -25] }); return marker }, onEachFeature: function(feature, layer) { layer.on({ click: function(e) { var tay; var geocodeService = L.esri.Geocoding.geocodeService(); var geocoderNominatim = new L.Control.Geocoder.Nominatim(); var geogeo = geocodeService.reverse().latlng(e.latlng).run(function(error, result) { tay = result.address.Address; // aladije(result.address.Address) if (feature.administrasi.f3 == 'alamat') { if (tay != '') { var alamak = tay; } else { alamak = "" } } else { var alamak = feature.administrasi.f3; } if (feature.administrasi.f10 == 'bpk') { var raja = ""; } else { var raja = feature.administrasi.f10; } content_edit_spbu = ` <div class="modal-dialog md"> <div class="modal-content"> <div class="modal-header bg-info" > <button type="button" class="close" data-dismiss="modal" onclick="destroyfade()">×</button> <h6 class="modal-title">Edit Point</h6> </div> <div class="tab-pane has-padding" id="panel-tab2"> <div class="tab-pane" id="bottom-justified-data"> <div class="tabbable"> <ul class="nav nav-tabs nav-tabs-bottom nav-justified"> <li onclick="changetabs(this) class="active""><a href="#right-tab2-feas-upli" data-toggle="tab">Koordinat</a></li> <li onclick="changetabs(this)"><a href="#left-tab1-feas-upli" data-toggle="tab">Informasi Umum</a></li> </ul> <div class="tab-content"> <div class="tab-pane active" id="right-tab2-feas-upli"> <div class="form-group"> <div id="map-for-edit" style="height: 300px;position: relative;margin: 10px;"></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="filespbu" name="images[]" multiple accept="image/jpg,image/png,image/jpeg,image/gif"> <input style="display:none;" id="gambarspbu" type="text" class="form-control" value="` + feature.administrasi.f8 + `"required> </div> </div> </div> </div> <div class="tab-pane" id="left-tab1-feas-upli"> <div class="modal-body" style="overflow-x: hidden;max-height: 300px;overflow-y: scroll;padding-left: 15px;"> <div class="form-group"> <input style="display:none;" id="idspbu" type="text" class="form-control" value="` + feature.administrasi.f15 + `"required> <input style="display:none;" id="coordinateZoneeditspbu" type="text" class="form-control" value=""required> </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;">Nama Point</label> <div class="col-lg-9"> <input id="namobj" type="text" class="form-control" value="` + feature.administrasi.f1 + `"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;">Tipe Point</label> <div class="col-lg-8"> <select id="remark" style="margin-top: 15px;"> <option>` + feature.administrasi.f2 + `</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-4"> <input id="alamat" type="text" class="form-control" value="` + alamak + `"required> </div> <div class="col-lg-4" style="margin-top: 15px;">` + feature.administrasi.f14 + `, ` + feature.administrasi.f13 + `</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" type="text" class="form-control" value="` + feature.administrasi.f5 + `"required> </div> <div class="col-lg-3"> <select id="satuan_luas_tanah" style="margin-top: 15px;"> <option>m2</option> <option>Km2</option> <option>Hektar</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;">Pemilik</label> <div class="col-lg-9"> <input id="perangkat" type="text" class="form-control" value="` + raja + `"required> </div> </div> </div> </div> </div> </div> </div> </div> </div> <hr> <div class="modal-footer"> <button type="button" class="btn btn-info" id="saveeditspbu">Save changes</button> </div> </div> </div>` content_spbu = ` <form id="fspbu"> <table class="table table-hover tasks-list"> <thead style="text-align: center;"> <tr> <th style="padding: 0 0 0 0px;"> <img src="static/img/image/` + feature.administrasi.f8 + `" alt="Image" style="width: 100%;max-height: 237px;height:237"> </th> </tr> </thead> <tbody> <div class= "container"> <tr style="height: 100px;"> <th> <div> <h1 style="font-family: Google Sans,Roboto,Arial,sans-serif; letter-spacing: 0; font-weight: 400;"> <span style="font-size: x-large;"> ` + feature.administrasi.f1 + ` </span> </h1> </div> </th> </tr> </div> <div class= "container"> <tr style="height: 30px;"> <th> <span> ` + feature.administrasi.f2 + ` </span> </th> </tr> </div> <div class= "container"> <tr style="height: 40px;"> <th> <span> ` + alamak + `, ` + feature.administrasi.f14 + `, ` + feature.administrasi.f13 + `, ` + feature.administrasi.f12 + ` </span> </th> </tr> </div> <div class= "container"> <tr style="height: 40px;"> <th> <p> <span>Luas Tanah : ` + feature.administrasi.f5 + ` </span><span style="font-weight: 700;">㎡</span> </p> </th> </tr> </div> <div class= "container"> <tr style="height: 40px;"> <th> <p> <span>Pemilik : </span> </p> <p> <span>` + raja + `</span> </p> </th> </tr> </div> <div class= "container"> <tr style="height: 40px;"> <th> <p class="text-center" style="margin-top: 25px;"> <a href="#" id='btn_edit_spbu' class="btn btn-primary" data-toggle="modal" data-target="#modal_adm" data-backdrop="static" data-keyboard="false"><i>Edit Informasi Point</i></a> </p> </th> </tr> </div> </tbody> </table> </form>`; $("#isi_panel").html(content_spbu) $("#modal_adm").html(content_edit_spbu) panel_samp(); }) hidelegend(); } }) } }); function geo_json_po_spbu(data) { geo_po_spbu.addData(data) } geo_json_po_spbu(result_spbu); function pom_mini() { var checkBox = document.getElementById("pom_bengsin"); if (checkBox.checked == true) { geo_po_spbu.addTo(map) } else { geo_po_spbu.remove() valket() } } $(document).on("click", "#btn_edit_spbu", function() { var map_edit = L.map('map-for-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 idspbu = $('#idspbu').val(); loaderPage(false); $.ajax({ url: "{% url 'api:editpom' %}", data: { 'id_point': idspbu }, dataType: 'json', success: function(data) { setTimeout(function() { map_edit.invalidateSize(); }, 1000); loaderPage(false); console.log(data) // map_edit.setView([data['geometry']['coordinates'][0][0][0][1], data['geometry']['coordinates'][0][0][0][0]], 19); map_edit.setView([data['geometry']['coordinates'][1], data['geometry']['coordinates'][0]], 19); let dapoin = [data['geometry']['coordinates'][1], data['geometry']['coordinates'][0]] var poinin = L.marker(dapoin).addTo(map_edit) poinin.enableEdit(); $('#saveeditspbu').click(function() { var hasil = (JSON.stringify(poinin.toGeoJSON())) $("#coordinateZoneeditspbu").val(hasil); }) } }) }); $(document).on("click", "#saveeditspbu", function() { var idspbu = $('#idspbu').val(); var poi = $('#coordinateZoneeditspbu').val(); console.log(poi) var data = new FormData(); data.append("file", $("input[id^='filespbu']")[0].files[0]); data.append("csrfmiddlewaretoken", "{{ csrf_token }}"); data.append('idspbu', idspbu) data.append('namobj', $('#namobj').val()) data.append('remark', $('#remark').val()) data.append('luastanah', $('#luas_tanah').val()) data.append('alamat', $('#alamat').val()) data.append('perangkat', $('#perangkat').val()) data.append('point', poi), data.append('gambar', $('#gambarspbu').val()) $.ajax({ url: "{% url 'api:spbu' %}", 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_adm").modal('hide'); $("#modal_detail_non_kelurahan").modal('hide') //location.reload(); }) } else { swal({ title: 'Error', text: 'Hubungi Developer', type: "warning", icon: "error", confirmButtonColor: "#00BCD4" }) } //location.reload() } }) }); var stasiun = "{{ stasiun }}".replace(/'/g, '"'); var result_stasiun = JSON.parse("" + stasiun + "") var geo_po_stasiun = L.geoJson(null, { pointToLayer: function(feature, latlng) { var smallIcon = new L.Icon({ iconSize: [25, 25], iconAnchor: [13, 27], popupAnchor: [1, -24], iconUrl: 'static/img/icon-1/Train-tes.svg' // iconUrl: 'static/img/icon/kereta.svg', // shadowUrl: 'static/img/icon/shadow.svg', // shadowSize: [35, 35], // shadowAnchor: [22, 31] }); var marker = L.marker(latlng, { icon: smallIcon }); conten = ` <div id="bottom-justified-data" style="text-align: center;"> <div > <img src="static/img/image/` + feature.administrasi.f8 + `" alt="Image" style="width: 150px!important;height: 125px;"> </div> <div > <div style="font-family: Google Sans,Roboto,Arial,sans-serif; letter-spacing: 0"> <p> ` + feature.administrasi.f1 + ` </p> </div> </div> </div> `; marker.bindTooltip(conten, { permanent: false, className: "my-label", direction: 'top', offset: [0, -25] }); return marker }, onEachFeature: function(feature, layer) { layer.on({ click: function(e) { $("#modal_detail_non_kelurahan").modal('show'); var tay; var geocodeService = L.esri.Geocoding.geocodeService(); var geocoderNominatim = new L.Control.Geocoder.Nominatim(); var geogeo = geocodeService.reverse().latlng(e.latlng).run(function(error, result) { tay = result.address.Address; // aladije(result.address.Address) if (feature.administrasi.f3 == 'alamat') { if (tay != '') { var alamak = tay; } else { alamak = "" } } else { var alamak = feature.administrasi.f3; } if (feature.administrasi.f10 == 'bpk') { var raja = ""; } else { var raja = feature.administrasi.f10; } content_edit_stasiun = ` <div class="modal-dialog md"> <div class="modal-content"> <div class="modal-header bg-info" > <button type="button" class="close" data-dismiss="modal" onclick="destroyfade()">×</button> <h6 class="modal-title">Edit Point</h6> </div> <div class="tab-pane has-padding" id="panel-tab2"> <div class="tab-pane" id="bottom-justified-data"> <div class="tabbable"> <ul class="nav nav-tabs nav-tabs-bottom nav-justified"> <li onclick="changetabs(this)" class="active"><a href="#right-tab2-feas-upli" data-toggle="tab">Koordinat</a></li> <li onclick="changetabs(this)"><a href="#left-tab1-feas-upli" data-toggle="tab">Informasi Umum</a></li> </ul> <div class="tab-content"> <div class="tab-pane active" id="right-tab2-feas-upli"> <div class="form-group"> <div id="map-for-edit" style="height: 300px;position: relative;margin: 10px;"></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="file" 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.f8 + `"required> </div> </div> </div> </div> <div class="tab-pane" id="left-tab1-feas-upli"> <div class="modal-body" style="overflow-x: hidden;max-height: 300px;overflow-y: scroll;padding-left: 15px;"> <div class="form-group"> <input style="display:none;" id="idst" type="text" class="form-control" value="` + feature.administrasi.f15 + `"required> <input style="display:none;" id="coordinateZoneeditst" type="text" class="form-control" value=""required> </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;">Nama Point</label> <div class="col-lg-9"> <input id="namobj" type="text" class="form-control" value="` + feature.administrasi.f1 + `"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;">Tipe Point</label> <div class="col-lg-8"> <select id="remark" style="margin-top: 15px;"> <option>` + feature.administrasi.f2 + `</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-4"> <input id="alamat" type="text" class="form-control" value="` + alamak + `"required> </div> <div class="col-lg-4" style="margin-top: 15px;">` + feature.administrasi.f14 + `, ` + feature.administrasi.f13 + `</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" type="text" class="form-control" value="` + feature.administrasi.f5 + `"required> </div> <div class="col-lg-3"> <select id="satuan_luas_tanah" style="margin-top: 15px;"> <option>m2</option> <option>Km2</option> <option>Hektar</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;">Pemimpin</label> <div class="col-lg-9"> <input id="perangkat" type="text" class="form-control" value="` + raja + `"required> </div> </div> </div> </div> </div> </div> </div> </div> </div> <hr> <div class="modal-footer"> <button type="button" class="btn btn-info" id="saveeditst">Save changes</button> </div> </div> </div>` if (feature.administrasi.f8 == 'None') { var gmb = "static/img/image_null.png"; } else { var gmb = "static/img/image/" + feature.administrasi.f8; } $(".gambar_keterangan").html(`<img src="` + gmb + `" alt="" style="width:100%;height:240px;border-top-left-radius: 10px;border-bottom-left-radius: 10px;">`) $(".nama_keterangan").html(`<div> <span style="font-size: large;"> ` + feature.administrasi.f1 + ` </span> </div> <div> <span> ` + alamak + `, ` + feature.administrasi.f14 + `, ` + feature.administrasi.f13 + `, ` + feature.administrasi.f12 + ` </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> <div> <span>Jenis Bangunan</span> </div> <div> <span> ` + feature.administrasi.f2 + ` </span> </div> </div> <div> <div> <span>Luas</span> </div> <div> <span style="font-family: 'Roboto';">` + feature.administrasi.f5 + ` m</span> </div> </div> <div> <div> <span>Pimpinan</span> </div> <div> <span>` + raja + `</span> </div> </div>`); $(".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_edit_st" data-toggle="modal" data-target="#modal_adm" data-backdrop="static" data-keyboard="false" class="btn" style="border-bottom-left-radius: 8px;border-top-right-radius: 8px;width: 100%;height: 100%;bottom: 0px;color: white;" title="Edit"><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_delete_adm" data-toggle="modal" data-target="#modald_adm" data-backdrop="static" data-keyboard="false" class="btn" style="border-bottom-left-radius: 8px;border-top-right-radius: 8px;width: 100%;height: 100%;bottom: 0px;color: white;" title="Delete"><i class="icon-eraser2"></i></a> </div> `) content_delete_point = ` <div class="modal-dialog md"> <div class="modal-content"> <div class="modal-header bg-info"> <button type="button" class="close" data-dismiss="modal" onclick="destroyfade()">×</button> <h6 class="modal-title">Delete Point</h6> </div> <div class="modal-body" style="overflow-x: hidden;max-height: 300px;overflow-y: scroll;padding-left: 15px;"> <input style="display:none;" id="id_adm_del" type="text" class="form-control" value="` + feature.administrasi.f15 + `"required> <input style="display:none;" id="nama_table" type="text" class="form-control" value="geo_stasiun" required> <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="namobj_adm_del" type="text" class="form-control" value="` + feature.administrasi.f1 + `"required disabled> </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-8"> <input id="remark_adm_del" type="text" class="form-control" value="` + feature.administrasi.f2 + `"required disabled> </div> </div> </div> </div> <hr> <div class="modal-footer"> <button type="button" class="btn btn-info" id="deletepointot">Hapus</button> </div> </div> </div>`; $("#modald_adm").html(content_delete_point) $("#modal_adm").html(content_edit_stasiun) panel_samp(); }) hidelegend(); } }) } }); function geo_json_po_stasiun(data) { geo_po_stasiun.addData(data) } geo_json_po_stasiun(result_stasiun); function sthall() { var checkBox = document.getElementById("tasiun"); if (checkBox.checked == true) { geo_po_stasiun.addTo(map) } else { geo_po_stasiun.remove() valket() } } $(document).on("click", "#btn_edit_st", function() { var map_edit = L.map('map-for-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 idst = $('#idst').val(); loaderPage(false); $.ajax({ url: "{% url 'api:editst' %}", data: { 'id_point': idst }, dataType: 'json', success: function(data) { setTimeout(function() { map_edit.invalidateSize(); }, 1000); loaderPage(false); console.log(data) // map_edit.setView([data['geometry']['coordinates'][0][0][0][1], data['geometry']['coordinates'][0][0][0][0]], 19); map_edit.setView([data['geometry']['coordinates'][1], data['geometry']['coordinates'][0]], 19); let dapoin = [data['geometry']['coordinates'][1], data['geometry']['coordinates'][0]] var poinin = L.marker(dapoin).addTo(map_edit) poinin.enableEdit(); $('#saveeditst').click(function() { var hasil = (JSON.stringify(poinin.toGeoJSON())) $("#coordinateZoneeditst").val(hasil); }) } }) }); $(document).on("click", "#saveeditst", function() { var idst = $('#idst').val(); var poi = $('#coordinateZoneeditst').val(); console.log(poi) var data = new FormData(); data.append("file", $("input[id^='file']")[0].files[0]); data.append("csrfmiddlewaretoken", "{{ csrf_token }}"); data.append('idst', idst) data.append('namobj', $('#namobj').val()) data.append('remark', $('#remark').val()) data.append('luastanah', $('#luas_tanah').val()) data.append('alamat', $('#alamat').val()) data.append('perangkat', $('#perangkat').val()) data.append('point', poi), data.append('gambar', $('#gambar').val()) $.ajax({ url: "{% url 'api:stasiun' %}", 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_adm").modal('hide'); $("#modal_detail_non_kelurahan").modal('hide') //location.reload(); }) } else { swal({ title: 'Error', text: 'Hubungi Developer', type: "warning", icon: "error", confirmButtonColor: "#00BCD4" }) } //location.reload() } }) }); var terminal = "{{ terminal }}".replace(/'/g, '"'); var result_terminal = JSON.parse("" + terminal + "") var geo_po_terminal = L.geoJson(null, { pointToLayer: function(feature, latlng) { var smallIcon = new L.Icon({ iconSize: [25, 25], iconAnchor: [13, 27], popupAnchor: [1, -24], iconUrl: 'static/img/icon-1/Bus-tes.svg' // iconUrl: 'static/img/icon/bus.svg', // shadowUrl: 'static/img/icon/shadow.svg', // shadowSize: [35, 35], // shadowAnchor: [22, 31] }); var marker = L.marker(latlng, { icon: smallIcon }); conten = ` <div id="bottom-justified-data" style="text-align: center;"> <div > <img src="static/img/image/` + feature.administrasi.f8 + `" alt="Image" style="width: 150px!important;height: 125px;"> </div> <div > <div style="font-family: Google Sans,Roboto,Arial,sans-serif; letter-spacing: 0"> <p > ` + feature.administrasi.f1 + ` </p> </div> </div> </div> `; marker.bindTooltip(conten, { permanent: false, className: "my-label", direction: 'top', offset: [0, -25] }); return marker }, onEachFeature: function(feature, layer) { layer.on({ click: function(e) { var tay; $("#modal_detail_non_kelurahan").modal('show'); var geocodeService = L.esri.Geocoding.geocodeService(); var geocoderNominatim = new L.Control.Geocoder.Nominatim(); var geogeo = geocodeService.reverse().latlng(e.latlng).run(function(error, result) { tay = result.address.Address; // aladije(result.address.Address) if (feature.administrasi.f3 == 'alamat') { if (tay != '') { var alamak = tay; } else { alamak = "" } } else { var alamak = feature.administrasi.f3; } if (feature.administrasi.f10 == 'bpk') { var raja = ""; } else { var raja = feature.administrasi.f10; } content_edit_terminal = ` <div class="modal-dialog md"> <div class="modal-content"> <div class="modal-header bg-info" > <button type="button" class="close" data-dismiss="modal" onclick="destroyfade()">×</button> <h6 class="modal-title">Edit Point</h6> </div> <div class="tab-pane has-padding" id="panel-tab2"> <div class="tab-pane" id="bottom-justified-data"> <div class="tabbable"> <ul class="nav nav-tabs nav-tabs-bottom nav-justified"> <li onclick="changetabs(this)" class="active"><a href="#right-tab2-feas-upli" data-toggle="tab">Koordinat</a></li> <li onclick="changetabs(this)"><a href="#left-tab1-feas-upli" data-toggle="tab">Informasi Umum</a></li> </ul> <div class="tab-content"> <div class="tab-pane active" id="right-tab2-feas-upli"> <div class="form-group"> <div id="map-for-edit" style="height: 300px;position: relative;margin: 10px;"></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="file" 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.f8 + `"required> </div> </div> </div> </div> <div class="tab-pane" id="left-tab1-feas-upli"> <div class="modal-body" style="overflow-x: hidden;max-height: 300px;overflow-y: scroll;padding-left: 15px;"> <div class="form-group"> <input style="display:none;" id="idtr" type="text" class="form-control" value="` + feature.administrasi.f16 + `"required> <input style="display:none;" id="coordinateZoneedittr" type="text" class="form-control" value=""required> </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;">Nama Point</label> <div class="col-lg-9"> <input id="namobj" type="text" class="form-control" value="` + feature.administrasi.f1 + `"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;">Tipe Point</label> <div class="col-lg-8"> <select id="remark" style="margin-top: 15px;"> <option>` + feature.administrasi.f2 + `</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-4"> <input id="alamat" type="text" class="form-control" value="` + alamak + `"required> </div> <div class="col-lg-4" style="margin-top: 15px;">` + feature.administrasi.f14 + `, ` + feature.administrasi.f13 + `</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</label> <div class="col-lg-6"> <input id="luas_bangunan" type="text" class="form-control" value="` + feature.administrasi.f15 + `"required> </div> <div class="col-lg-3"> <select id="satuan_luas_bangunan" style="margin-top: 15px;"> <option>m2</option> </select> </div> </div> </div> </div> </div> </div> </div> </div> </div> <hr> <div class="modal-footer"> <button type="button" class="btn btn-info" id="saveedittr">Save changes</button> </div> </div> </div>` if (feature.administrasi.f8 == 'None') { var gmb = "static/img/image_null.png"; } else { var gmb = "static/img/image/" + feature.administrasi.f8; } $(".gambar_keterangan").html(`<img src="` + gmb + `" alt="" style="width:100%;height:240px;border-top-left-radius: 10px;border-bottom-left-radius: 10px;">`) $(".nama_keterangan").html(`<div> <span style="font-size: large;"> ` + feature.administrasi.f1 + ` </span> </div> <div> <span> ` + alamak + `, ` + feature.administrasi.f14 + `, ` + feature.administrasi.f13 + `, ` + feature.administrasi.f12 + ` </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> <div> <span>Jenis Bangunan</span> </div> <div> <span> ` + feature.administrasi.f2 + ` </span> </div> </div> <div> <div> <span>Luas</span> </div> <div> <span style="font-family: 'Roboto';">` + feature.administrasi.f5 + ` m</span> </div> </div> <div> <div> <span>Pimpinan</span> </div> <div> <span>` + raja + `</span> </div> </div>`); $(".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_edit_tr" data-toggle="modal" data-target="#modal_adm" data-backdrop="static" data-keyboard="false" 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_delete_adm" data-toggle="modal" data-target="#modald_adm" data-backdrop="static" data-keyboard="false" class="btn" style="border-bottom-left-radius: 8px;border-top-right-radius: 8px;width: 100%;height: 100%;bottom: 0px;color: white;" title="Delete"><i class="icon-eraser2"></i></a> </div> `) content_delete_point = ` <div class="modal-dialog md"> <div class="modal-content"> <div class="modal-header bg-info"> <button type="button" class="close" data-dismiss="modal" onclick="destroyfade()">×</button> <h6 class="modal-title">Delete Point</h6> </div> <div class="modal-body" style="overflow-x: hidden;max-height: 300px;overflow-y: scroll;padding-left: 15px;"> <input style="display:none;" id="id_adm_del" type="text" class="form-control" value="` + feature.administrasi.f15 + `"required> <input style="display:none;" id="nama_table" type="text" class="form-control" value="geo_terminal" required> <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="namobj_adm_del" type="text" class="form-control" value="` + feature.administrasi.f1 + `"required disabled> </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-8"> <input id="remark_adm_del" type="text" class="form-control" value="` + feature.administrasi.f2 + `"required disabled> </div> </div> </div> </div> <hr> <div class="modal-footer"> <button type="button" class="btn btn-info" id="deletepointot">Hapus</button> </div> </div> </div>`; $("#modald_adm").html(content_delete_point) $("#modal_adm").html(content_edit_terminal) panel_samp(); }) hidelegend(); } }) } }); function geo_json_po_terminal(data) { geo_po_terminal.addData(data) } geo_json_po_terminal(result_terminal); function temanggung() { var checkBox = document.getElementById("caheum"); if (checkBox.checked == true) { geo_po_terminal.addTo(map) } else { geo_po_terminal.remove() valket() } } $(document).on("click", "#btn_edit_tr", function() { var map_edit = L.map('map-for-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 idtr = $('#idtr').val(); loaderPage(false); $.ajax({ url: "{% url 'api:edittr' %}", data: { 'id_point': idtr }, dataType: 'json', success: function(data) { setTimeout(function() { map_edit.invalidateSize(); }, 1000); loaderPage(false); console.log(data) // map_edit.setView([data['geometry']['coordinates'][0][0][0][1], data['geometry']['coordinates'][0][0][0][0]], 19); map_edit.setView([data['geometry']['coordinates'][1], data['geometry']['coordinates'][0]], 19); let dapoin = [data['geometry']['coordinates'][1], data['geometry']['coordinates'][0]] var poinin = L.marker(dapoin).addTo(map_edit) poinin.enableEdit(); $('#saveedittr').click(function() { var hasil = (JSON.stringify(poinin.toGeoJSON())) $("#coordinateZoneedittr").val(hasil); }) } }) }); $(document).on("click", "#saveedittr", function() { var idtr = $('#idtr').val(); var poi = $('#coordinateZoneedittr').val(); var data = new FormData(); data.append("file", $("input[id^='file']")[0].files[0]); data.append("csrfmiddlewaretoken", "{{ csrf_token }}"); data.append('idtr', idtr) data.append('namobj', $('#namobj').val()) data.append('remark', $('#remark').val()) data.append('luas', $('#luas_bangunan').val()) data.append('alamat', $('#alamat').val()) data.append('perangkat', $('#perangkat').val()) data.append('point', poi), data.append('gambar', $('#gambar').val()) $.ajax({ url: "{% url 'api:terminal' %}", 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_adm").modal('hide'); $("#modal_detail_non_kelurahan").modal('hide') //location.reload(); }) } else { swal({ title: 'Error', text: 'Hubungi Developer', type: "warning", icon: "error", confirmButtonColor: "#00BCD4" }) } //location.reload() } }) }); var cagar_budaya = "{{ cagar_budaya }}".replace(/'/g, '"'); var result_cagar_budaya = JSON.parse("" + cagar_budaya + "") var geo_po_cagar_budaya = L.geoJson(null, { pointToLayer: function(feature, latlng) { var smallIcon = new L.Icon({ iconSize: [25, 25], iconAnchor: [13, 27], popupAnchor: [1, -24], iconUrl: 'static/img/icon-1/Factory-tes.svg' // iconUrl: 'static/img/icon/loc.svg', // shadowUrl: 'static/img/icon/shadow.svg', // shadowSize: [35, 35], // shadowAnchor: [22, 31] }); var marker = L.marker(latlng, { icon: smallIcon }); conten = ` <div id="bottom-justified-data" style="text-align: center;"> <div > <img src="static/img/image/` + 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 > ` + feature.administrasi.f1 + ` </p> </div> </div> </div> `; marker.bindTooltip(conten, { permanent: false, className: "my-label", direction: 'top', offset: [0, -25] }); return marker }, onEachFeature: function(feature, layer) { layer.on({ click: function(e) { $("#modal_detail_non_kelurahan").modal('show'); var tay; var geocodeService = L.esri.Geocoding.geocodeService(); var geocoderNominatim = new L.Control.Geocoder.Nominatim(); var geogeo = geocodeService.reverse().latlng(e.latlng).run(function(error, result) { tay = result.address.Address; // aladije(result.address.Address) if (feature.administrasi.f3 == 'alamat') { if (tay != '') { var alamak = tay; } else { alamak = "" } } else { var alamak = feature.administrasi.f3; } if (feature.administrasi.f5 == 'bpk') { var raja = ""; } else { var raja = feature.administrasi.f5; } content_edit_cabud = ` <div class="modal-dialog md"> <div class="modal-content"> <div class="modal-header bg-info" > <button type="button" class="close" data-dismiss="modal" onclick="destroyfade()">×</button> <h6 class="modal-title">Edit Point</h6> </div> <div class="tab-pane has-padding" id="panel-tab2"> <div class="tab-pane" id="bottom-justified-data"> <div class="tabbable"> <ul class="nav nav-tabs nav-tabs-bottom nav-justified"> <li onclick="changetabs(this)" class="active"><a href="#right-tab2-feas-upli" data-toggle="tab">Koordinat</a></li> <li onclick="changetabs(this)"><a href="#left-tab1-feas-upli" data-toggle="tab">Informasi Umum</a></li> </ul> <div class="tab-content"> <div class="tab-pane active" id="right-tab2-feas-upli"> <div class="form-group"> <div id="map-for-edit" style="height: 300px;position: relative;margin: 10px;"></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="file" 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.f4 + `"required> </div> </div> </div> </div> <div class="tab-pane" id="left-tab1-feas-upli"> <div class="modal-body" style="overflow-x: hidden;max-height: 300px;overflow-y: scroll;padding-left: 15px;"> <div class="form-group"> <input style="display:none;" id="idcb" type="text" class="form-control" value="` + feature.administrasi.f11 + `"required> <input style="display:none;" id="coordinateZoneeditcb" type="text" class="form-control" value=""required> </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;">Nama Point</label> <div class="col-lg-9"> <input id="namobj" type="text" class="form-control" value="` + feature.administrasi.f1 + `"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;">Tipe Point</label> <div class="col-lg-8"> <select id="remark" style="margin-top: 15px;"> <option>` + feature.administrasi.f2 + `</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-4"> <input id="alamat" type="text" class="form-control" value="` + alamak + `"required> </div> <div class="col-lg-4" style="margin-top: 15px;">` + feature.administrasi.f9 + `, ` + feature.administrasi.f8 + `</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</label> <div class="col-lg-6"> <input id="luas_bangunan" type="text" class="form-control" value="` + feature.administrasi.f10 + `"required> </div> <div class="col-lg-3"> <select id="satuan_luas_bangunan" style="margin-top: 15px;"> <option>m2</option> </select> </div> </div> </div> </div> </div> </div> </div> </div> </div> <hr> <div class="modal-footer"> <button type="button" class="btn btn-info" id="saveeditcb">Save changes</button> </div> </div> </div>` if (feature.administrasi.f4 == 'None') { var gmb = "static/img/image_null.png"; } else { var gmb = "static/img/image/" + feature.administrasi.f4; } $(".gambar_keterangan").html(`<img src="` + gmb + `" alt="" style="width:100%;height:240px;border-top-left-radius: 10px;border-bottom-left-radius: 10px;">`) $(".nama_keterangan").html(`<div> <span style="font-size: large;"> ` + feature.administrasi.f1 + ` </span> </div> <div> <span> ` + alamak + ` ` + feature.administrasi.f9 + `, ` + feature.administrasi.f8 + `, ` + feature.administrasi.f7 + ` </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> <div> <span>Jenis Bangunan</span> </div> <div> <span> ` + feature.administrasi.f2 + ` </span> </div> </div> <div> <div> <span>Luas</span> </div> <div> <span style="font-family: 'Roboto';">` + feature.administrasi.f10 + ` m</span> </div> </div> <div> <div> <span>Pimpinan</span> </div> <div> <span>` + raja + `</span> </div> </div>`); $(".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_edit_cb" data-toggle="modal" data-target="#modal_adm" data-backdrop="static" data-keyboard="false" 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_delete_adm" data-toggle="modal" data-target="#modald_adm" data-backdrop="static" data-keyboard="false" class="btn" style="border-bottom-left-radius: 8px;border-top-right-radius: 8px;width: 100%;height: 100%;bottom: 0px;color: white;" title="Delete"><i class="icon-eraser2"></i></a> </div> `) content_delete_point = ` <div class="modal-dialog md"> <div class="modal-content"> <div class="modal-header bg-info"> <button type="button" class="close" data-dismiss="modal" onclick="destroyfade()">×</button> <h6 class="modal-title">Delete Point</h6> </div> <div class="modal-body" style="overflow-x: hidden;max-height: 300px;overflow-y: scroll;padding-left: 15px;"> <input style="display:none;" id="id_adm_del" type="text" class="form-control" value="` + feature.administrasi.f15 + `"required> <input style="display:none;" id="nama_table" type="text" class="form-control" value="geo_cagar_budaya" required> <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="namobj_adm_del" type="text" class="form-control" value="` + feature.administrasi.f1 + `"required disabled> </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-8"> <input id="remark_adm_del" type="text" class="form-control" value="` + feature.administrasi.f2 + `"required disabled> </div> </div> </div> </div> <hr> <div class="modal-footer"> <button type="button" class="btn btn-info" id="deletepointot">Hapus</button> </div> </div> </div>`; $("#modald_adm").html(content_delete_point) $("#modal_adm").html(content_edit_cabud) panel_samp(); }) hidelegend(); } }) } }); function geo_json_po_cagar_budaya(data) { geo_po_cagar_budaya.addData(data) } geo_json_po_cagar_budaya(result_cagar_budaya); function cb100() { var checkBox = document.getElementById("cabud"); if (checkBox.checked == true) { geo_po_cagar_budaya.addTo(map) } else { geo_po_cagar_budaya.remove() valket() } } $(document).on("click", "#btn_edit_cb", function() { var map_edit = L.map('map-for-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 idcb = $('#idcb').val(); loaderPage(false); $.ajax({ url: "{% url 'api:editcb' %}", data: { 'id_point': idcb }, dataType: 'json', success: function(data) { loaderPage(false); setTimeout(function() { map_edit.invalidateSize(); }, 1000); console.log(data) // map_edit.setView([data['geometry']['coordinates'][0][0][0][1], data['geometry']['coordinates'][0][0][0][0]], 19); map_edit.setView([data['geometry']['coordinates'][1], data['geometry']['coordinates'][0]], 19); let dapoin = [data['geometry']['coordinates'][1], data['geometry']['coordinates'][0]] var poinin = L.marker(dapoin).addTo(map_edit) poinin.enableEdit(); $('#saveeditcb').click(function() { var hasil = (JSON.stringify(poinin.toGeoJSON())) $("#coordinateZoneeditcb").val(hasil); }) } }) }); $(document).on("click", "#saveeditcb", function() { var idcb = $('#idcb').val(); var poi = $('#coordinateZoneeditcb').val(); var data = new FormData(); data.append("file", $("input[id^='file']")[0].files[0]); data.append("csrfmiddlewaretoken", "{{ csrf_token }}"); data.append('idcb', idcb) data.append('namobj', $('#namobj').val()) data.append('remark', $('#remark').val()) data.append('luas', $('#luas_bangunan').val()) data.append('alamat', $('#alamat').val()) data.append('perangkat', $('#perangkat').val()) data.append('point', poi), data.append('gambar', $('#gambar').val()) $.ajax({ url: "{% url 'api:cagarbudaya' %}", 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_adm").modal('hide'); $("#modal_detail_non_kelurahan").modal('hide') //location.reload(); }) } else { swal({ title: 'Error', text: 'Hubungi Developer', type: "warning", icon: "error", confirmButtonColor: "#00BCD4" }) } //location.reload() } }) }); var gardu_listrik = "{{ gardu_listrik }}".replace(/'/g, '"'); var result_gardu_listrik = JSON.parse("" + gardu_listrik + "") console.log(result_gardu_listrik) var geo_po_gardu_listrik = L.geoJson(null, { pointToLayer: function(feature, latlng) { var smallIcon = new L.Icon({ iconSize: [25, 25], iconAnchor: [13, 27], popupAnchor: [1, -24], iconUrl: 'static/img/icon-1/Lightning-tes.svg', // iconUrl: 'static/img/icon/listrik.svg', // shadowUrl: 'static/img/icon/shadow.svg', // shadowSize: [35, 35], // shadowAnchor: [22, 31] }); var marker = L.marker(latlng, { icon: smallIcon }); conten = ` <div id="bottom-justified-data" style="text-align: center;"> <div > <img src="static/img/image/` + feature.administrasi.f8 + `" alt="Image" style="width: 150px!important;height: 125px;"> </div> <div > <div style="font-family: Google Sans,Roboto,Arial,sans-serif; letter-spacing: 0"> <p > ` + feature.administrasi.f1 + ` </p> </div> </div> </div> `; marker.bindTooltip(conten, { permanent: false, className: "my-label", direction: 'top', offset: [0, -25] }); return marker }, onEachFeature: function(feature, layer) { layer.on({ click: function(e) { $("#modal_detail_non_kelurahan").modal('show'); var tay; var geocodeService = L.esri.Geocoding.geocodeService(); var geocoderNominatim = new L.Control.Geocoder.Nominatim(); var geogeo = geocodeService.reverse().latlng(e.latlng).run(function(error, result) { tay = result.address.Address; // aladije(result.address.Address) if (feature.administrasi.f3 == 'alamat') { if (tay != '') { var alamak = tay; } else { alamak = "" } } else { var alamak = feature.administrasi.f3; } if (feature.administrasi.f10 == 'bpk') { var raja = ""; } else { var raja = feature.administrasi.f10; } content_edit_gl = ` <div class="modal-dialog md"> <div class="modal-content"> <div class="modal-header bg-info" > <button type="button" class="close" data-dismiss="modal" onclick="destroyfade()">×</button> <h6 class="modal-title">Edit Point</h6> </div> <div class="tab-pane has-padding" id="panel-tab2"> <div class="tab-pane" id="bottom-justified-data"> <div class="tabbable"> <ul class="nav nav-tabs nav-tabs-bottom nav-justified"> <li onclick="changetabs(this)" class="active"><a href="#right-tab2-feas-upli" data-toggle="tab">Koordinat</a></li> <li onclick="changetabs(this)"><a href="#left-tab1-feas-upli" data-toggle="tab">Informasi Umum</a></li> </ul> <div class="tab-content"> <div class="tab-pane active" id="right-tab2-feas-upli"> <div class="form-group"> <div id="map-for-edit" style="height: 300px;position: relative;margin: 10px;"></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="file" 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.f8 + `"required> </div> </div> </div> </div> <div class="tab-pane" id="left-tab1-feas-upli"> <div class="modal-body" style="overflow-x: hidden;max-height: 300px;overflow-y: scroll;padding-left: 15px;"> <div class="form-group"> <input style="display:none;" id="idgl" type="text" class="form-control" value="` + feature.administrasi.f15 + `"required> <input style="display:none;" id="coordinateZoneeditgl" type="text" class="form-control" value=""required> </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;">Nama Point</label> <div class="col-lg-9"> <input id="namobj" type="text" class="form-control" value="` + feature.administrasi.f1 + `"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;">Tipe Point</label> <div class="col-lg-8"> <select id="remark" style="margin-top: 15px;"> <option>` + feature.administrasi.f2 + `</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-4"> <input id="alamat" type="text" class="form-control" value="` + alamak + `"required> </div> <div class="col-lg-4" style="margin-top: 15px;">` + feature.administrasi.f14 + `, ` + feature.administrasi.f13 + `</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" type="text" class="form-control" value="` + feature.administrasi.f5 + `"required> </div> <div class="col-lg-3"> <select id="satuan_luas_tanah" style="margin-top: 15px;"> <option>m2</option> <option>Km2</option> <option>Hektar</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;">Pemimpin</label> <div class="col-lg-9"> <input id="perangkat" type="text" class="form-control" value="` + raja + `"required> </div> </div> </div> </div> </div> </div> </div> </div> </div> <hr> <div class="modal-footer"> <button type="button" class="btn btn-info" id="saveeditgl">Save changes</button> </div> </div> </div>` if (feature.administrasi.f8 == 'None') { var gmb = "static/img/image_null.png"; } else { var gmb = "static/img/image/" + feature.administrasi.f8; } $(".gambar_keterangan").html(`<img src="` + gmb + `" alt="" style="width:100%;height:240px;border-top-left-radius: 10px;border-bottom-left-radius: 10px;">`) $(".nama_keterangan").html(`<div> <span style="font-size: large;"> ` + feature.administrasi.f1 + ` </span> </div> <div> <span> ` + alamak + `, ` + feature.administrasi.f14 + `, ` + feature.administrasi.f13 + `, ` + feature.administrasi.f12 + ` </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> <div> <span>Jenis Bangunan</span> </div> <div> <span> ` + feature.administrasi.f2 + ` </span> </div> </div> <div> <div> <span>Luas</span> </div> <div> <span style="font-family: 'Roboto';">` + feature.administrasi.f5 + ` m</span> </div> </div> <div> <div> <span>Pimpinan</span> </div> <div> <span>` + raja + `</span> </div> </div>`); $(".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_edit_gl" data-toggle="modal" data-target="#modal_adm" data-backdrop="static" data-keyboard="false" 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_delete_adm" data-toggle="modal" data-target="#modald_adm" data-backdrop="static" data-keyboard="false" class="btn" style="border-bottom-left-radius: 8px;border-top-right-radius: 8px;width: 100%;height: 100%;bottom: 0px;color: white;" title="Delete"><i class="icon-eraser2"></i></a> </div> `) content_delete_point = ` <div class="modal-dialog md"> <div class="modal-content"> <div class="modal-header bg-info"> <button type="button" class="close" data-dismiss="modal" onclick="destroyfade()">×</button> <h6 class="modal-title">Delete Point</h6> </div> <div class="modal-body" style="overflow-x: hidden;max-height: 300px;overflow-y: scroll;padding-left: 15px;"> <input style="display:none;" id="id_adm_del" type="text" class="form-control" value="` + feature.administrasi.f15 + `"required> <input style="display:none;" id="nama_table" type="text" class="form-control" value="geo_gardu_listrik"required> <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="namobj_adm_del" type="text" class="form-control" value="` + feature.administrasi.f1 + `"required disabled> </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-8"> <input id="remark_adm_del" type="text" class="form-control" value="` + feature.administrasi.f2 + `"required disabled> </div> </div> </div> </div> <hr> <div class="modal-footer"> <button type="button" class="btn btn-info" id="deletepointot">Hapus</button> </div> </div> </div>`; $("#modald_adm").html(content_delete_point) $("#modal_adm").html(content_edit_gl) panel_samp(); }) hidelegend(); } }) } }); function geo_json_po_gardu_listrik(data) { geo_po_gardu_listrik.addData(data) } geo_json_po_gardu_listrik(result_gardu_listrik); function gl100() { var checkBox = document.getElementById("gardu"); if (checkBox.checked == true) { geo_po_gardu_listrik.addTo(map) } else { geo_po_gardu_listrik.remove() valket() } } $(document).on("click", "#btn_edit_gl", function() { var map_edit = L.map('map-for-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 idgl = $('#idgl').val(); loaderPage(false); $.ajax({ url: "{% url 'api:editgl' %}", data: { 'id_point': idgl }, dataType: 'json', success: function(data) { setTimeout(function() { map_edit.invalidateSize(); }, 1000); loaderPage(false); console.log(data) // map_edit.setView([data['geometry']['coordinates'][0][0][0][1], data['geometry']['coordinates'][0][0][0][0]], 19); map_edit.setView([data['geometry']['coordinates'][1], data['geometry']['coordinates'][0]], 19); let dapoin = [data['geometry']['coordinates'][1], data['geometry']['coordinates'][0]] var poinin = L.marker(dapoin).addTo(map_edit) poinin.enableEdit(); $('#saveeditgl').click(function() { var hasil = (JSON.stringify(poinin.toGeoJSON())) $("#coordinateZoneeditgl").val(hasil); }) } }) }); $(document).on("click", "#saveeditgl", function() { var idgl = $('#idgl').val(); var poi = $('#coordinateZoneeditgl').val(); var data = new FormData(); data.append("file", $("input[id^='file']")[0].files[0]); data.append("csrfmiddlewaretoken", "{{ csrf_token }}"); data.append('idgl', idgl) data.append('namobj', $('#namobj').val()) data.append('remark', $('#remark').val()) data.append('luastanah', $('#luas_tanah').val()) data.append('alamat', $('#alamat').val()) data.append('perangkat', $('#perangkat').val()) data.append('point', poi), data.append('gambar', $('#gambar').val()) $.ajax({ url: "{% url 'api:gardu' %}", 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_adm").modal('hide'); $("#modal_detail_non_kelurahan").modal('hide') //location.reload(); }) } else { swal({ title: 'Error', text: 'Hubungi Developer', type: "warning", icon: "error", confirmButtonColor: "#00BCD4" }) } //location.reload() } }) }); function gas_all() { var checkBox = document.getElementById("po_all"); if (checkBox.checked == true) { document.getElementById("knt_adm").checked = true; document.getElementById("lyn_kes").checked = true; document.getElementById("pus").checked = true; document.getElementById("rusak").checked = true; document.getElementById("ibdh").checked = true; document.getElementById("dididik").checked = true; document.getElementById("pom_bengsin").checked = true; document.getElementById("tasiun").checked = true; document.getElementById("caheum").checked = true; document.getElementById("cabud").checked = true; document.getElementById("gardu").checked = true; k_adm() l_kes() pks() rs() fiksi() didik() pom_mini() sthall() temanggung() cb100() gl100() valket() } else if (checkBox.checked == false) { document.getElementById("knt_adm").checked = false; document.getElementById("lyn_kes").checked = false; document.getElementById("pus").checked = false; document.getElementById("rusak").checked = false; document.getElementById("ibdh").checked = false; document.getElementById("dididik").checked = false; document.getElementById("pom_bengsin").checked = false; document.getElementById("tasiun").checked = false; document.getElementById("caheum").checked = false; document.getElementById("cabud").checked = false; document.getElementById("gardu").checked = false; k_adm() l_kes() pks() rs() fiksi() didik() pom_mini() sthall() temanggung() cb100() gl100() valket() } } function showpanel(content) { $("#button_hide_panel").css("display", "block") // $("#thisFooter").css('left', '380px'); // $("#thisFooter").css('width', '930px'); // $("#isi_panel").html(content); } function showlegend() { $("#legendapo").css('display', 'block'); } function hidelegend() { $("#legendapo").css('display', 'none'); $("#button_unhide_point").css('display', 'block'); } function valket() { let checkBox1 = document.getElementById("po_all"); let checkBox2 = document.getElementById("knt_adm"); let checkBox3 = document.getElementById("lyn_kes"); let checkBox4 = document.getElementById("pus"); let checkBox5 = document.getElementById("rusak"); let checkBox6 = document.getElementById("ibdh"); let checkBox7 = document.getElementById("dididik"); let checkBox8 = document.getElementById("pom_bengsin"); let checkBox9 = document.getElementById("tasiun"); let checkBox10 = document.getElementById("caheum"); let checkBox11 = document.getElementById("cabud"); let checkBox12 = document.getElementById("gardu"); if ((checkBox1.checked == true) || (checkBox2.checked == true) || (checkBox3.checked == true) || (checkBox4.checked == true) || (checkBox5.checked == true) || (checkBox6.checked == true) || (checkBox7.checked == true) || (checkBox8.checked == true) || (checkBox9.checked == true) || (checkBox10.checked == true) || (checkBox11.checked == true) || (checkBox12.checked == true)) { showlegend() } else if ((checkBox1.checked == false) && (checkBox2.checked == false) && (checkBox3.checked == false) && (checkBox4.checked == false) && (checkBox5.checked == false) && (checkBox6.checked == false) && (checkBox7.checked == false) && (checkBox8.checked == false) && (checkBox9.checked == false) && (checkBox10.checked == false) && (checkBox11.checked == false) && (checkBox12.checked == false)) { hidelegend() } } function newe(marques, xnxx, xxx) { marques.addLayer(xnxx); map.addLayer(marques); // map.removeLayer(xnxx); // map.addLayer(markersknt); var lastZoom; map.on('zoomend', function() { var zoom = map.getZoom(); // console.log(zoom) if (zoom < 14 && (!lastZoom || lastZoom >= 14)) { if (xxx.checked == true) { map.removeLayer(marques); map.addLayer(marques); map.removeLayer(xnxx); $("#legendapo").css('display', 'block'); } else { $("#legendapo").css('display', 'none'); map.removeLayer(marques); } } else if (zoom >= 14 && (!lastZoom || lastZoom < 14)) { if (xxx.checked == true) { map.removeLayer(marques); map.addLayer(xnxx); } else { map.removeLayer(xnxx); } } lastZoom = zoom; }) } function changetabs(params) { // console.log(params) var hrf = $(params).find("a").attr("href"); if (hrf == '#right-tab2-feas-upli') { $("#left-tab1-feas-upli").removeClass("show") // $("#right-tab2-feas-upli").attr("display", "block") } else { $("#right-tab2-feas-upli").removeClass("show") // $("#left-tab1-feas-upli").attr("display", "block") } } function swiftAlert(itype, ititle, itext) { if (itype == 'success') { swal({ title: ititle, text: itext, confirmButtonColor: "#66BB6A", type: "success" }); } else if (itype == 'error') { swal({ title: ititle, text: itext, confirmButtonColor: "#EF5350", type: "error" }); } else if (itype == 'warning') { swal({ title: ititle, text: itext, confirmButtonColor: "#2196F3", type: "warning", }); } } //3d begin Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJhOTc0NDkxMi02N2NkLTQwYjMtOTE1Yi1iMGNkZDU0Zjg3MGMiLCJpZCI6NDQ1ODgsImlhdCI6MTYxNDE0NjM5NH0.sRHzNNa7uV_huqGxERySWlL8J5UVx1VwU-pRwNd0GJk'; var map_cesium = new Cesium.Viewer('map-cesium'); // // //function mapsganti() { // $("#modalsearch3d").modal() //} function mapsganti() { var checkBox_3d = document.getElementById("mapschange"); if (checkBox_3d.checked == true) { $("#modalsearch3d").modal() $.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 = `<option value="` + desa + `,` + kec + `">` + desa + `,` + kec + `</option>`; data_de.push(da) } $("#search_desa").html(data_de); checkBox_3d.checked = false; } }) } else { //location.reload(); $("#labelchange").html(`<img src="static/img/icon-1/Vector3d.svg" alt="" style="height: 50px; width: 50px;">`) map_cesium.entities.removeAll(); //map_cesium.destroy(); setTimeout(function() { map.invalidateSize(); }, 1000); $("#map").css('display', 'block'); $(".no3d").css('display', 'block'); $(".rar").css('display', 'block'); $("#map-cesium").css('display', 'none'); $(".tooltip-3d").html(`3D`) //$(".filter3d").removeClass("d3filter"); } } $("#search3D").click(function() { $("#map").css('display', 'none'); $("#map-cesium").css('display', 'block'); $(".no3d").css('display', 'none'); $("#legendapo").css('display', 'none'); $(".rar").css('display', 'none'); $("#labelchange").html(`<img src="static/img/icon-1/Vector2d.svg" alt="" style="height: 35px;width: 35px;margin: 7px;filter: invert(48%) sepia(79%) saturate(2398%) hue-rotate(190deg) brightness(77%) contrast(170%);z-index:1;">`) $(".tooltip-3d").html(`2D`) var nama_desa = $("#search_desa").val(); $.ajax({ url: "{% url 'api:ressearch' %}", data: { 'id_desa_search': nama_desa }, dataType: 'json', success: function(data) { document.getElementById("mapschange").checked = true; $("#modalsearch3d").modal("toggle") // console.log(data['polygon_o']) // console.log(data['line_o']) // console.log(data['kantor_administrasi']) map_cesium.camera.flyTo({ destination: Cesium.Cartesian3.fromDegrees(data['lat'], data['lng'], 750) }); for (var i = 0; i < data["polygon_o"].length; i++) { polygon_oo = data["polygon_o"][i][0].replace(/'/g, ''); poll = JSON.parse("[" + polygon_oo + "]"); maxheight = []; minheight = []; for (var x = 0; x < (poll.length / 2); x++) { max = data["tinggi_pol"][i]; maxheight.push(max); min = 0; minheight.push(min); } var poly_osm = map_cesium.entities.add({ wall: { positions: Cesium.Cartesian3.fromDegreesArray( poll ), maximumHeights: maxheight, minimumHeights: minheight, // height: 0, material: new Cesium.ImageMaterialProperty({ image: "static/image/bangunan/3d/" + data["tampak_depan_pol"][i] + "" }), // closeTop: false, // maximumHeights : data["tinggi_pol"][i], // minimumHeights : 0, outline: true, outlineColor: Cesium.Color.GREEN, }, name: data["info_polygon"][i] }); // poly_osm.polygon.extrudedHeight = data["tinggi_pol"][i]; var atap = map_cesium.entities.add({ polygon: { hierarchy: Cesium.Cartesian3.fromDegreesArray( poll ), // material: materialatas, material: new Cesium.ImageMaterialProperty({ image: "static/image/bangunan/3d/" + data["tampak_atas_pol"][i] + "" }), outline: true, height: data["tinggi_pol"][i], fill: true, outlineColor: Cesium.Color.GREEN, }, name: data["info_polygon"][i] }); }; for (var i = 0; i < data["line_o"].length; i++) { line_oo = data["line_o"][i][0].replace(/'/g, ''); lin = JSON.parse("[" + line_oo + "]"); var redLine = map_cesium.entities.add({ polyline: { positions: Cesium.Cartesian3.fromDegreesArray( lin ), width: 5, material: Cesium.Color.RED, clampToGround: true, }, }); } for (var i = 0; i < data["kantor_administrasi"].length; i++) { var kadm = data['kantor_administrasi'] var lati = data['latadm']; var long = data['longadm']; var poin = data['infoadm']; var rema = data['remaadm'][i]; var surfacePosition = Cesium.Cartesian3.fromDegrees( long[i], lati[i], 0 ); var heightPosition = Cesium.Cartesian3.fromDegrees( long[i], lati[i], 100 ); if (rema == 'Kantor Polisi') { var color = Cesium.Color.DARKCYAN; var gmbcok = "3d_police.svg" } else if (rema == 'Instalasi TNI (AD/AL/AU)') { var color = Cesium.Color.DARKRED; var gmbcok = "3d_army.svg" } else if (rema == 'Lembaga Pemasyarakatan') { var color = Cesium.Color.DARKCYAN; var gmbcok = "3d_jail.svg" } else if (rema == 'Kantor Pemerintah Lainnya') { var color = Cesium.Color.GAINSBORO; var gmbcok = "3d_kadm_lain.svg" } else { var color = Cesium.Color.GAINSBORO; var gmbcok = "3d_kadm.svg" } var polyline = new Cesium.PolylineGraphics(); polyline.material = new Cesium.ColorMaterialProperty(color); polyline.width = new Cesium.ConstantProperty(2); polyline.arcType = new Cesium.ConstantProperty( Cesium.ArcType.NONE ); polyline.positions = new Cesium.ConstantProperty([ surfacePosition, heightPosition, ]); map_cesium.entities.add({ position: Cesium.Cartesian3.fromDegrees(long[i], lati[i], 100), billboard: { // icon: facilityUrl, image: `static/img/icon/` + gmbcok + ``, // image: `static/img/icon/3d_police.svg`, show: true, // default scale: 2.0, // default: 1.0 width: 15, // default: undefined height: 15, // default: undefined }, nameadm: data['infoadm'][i] }); // console.log(nameadm) var entity = new Cesium.Entity({ polyline: polyline, // name: data['infoadm'][i] }); // console.log(name) map_cesium.entities.add(entity); } for (var i = 0; i < data["layanan_kesehatan"].length; i++) { var lk = data['layanan_kesehatan'] var lati = data['latlk']; var long = data['longlk']; var poin = data['infolk']; var rema = data['remalk'][i]; var surfacePosition = Cesium.Cartesian3.fromDegrees( long[i], lati[i], 0 ); var heightPosition = Cesium.Cartesian3.fromDegrees( long[i], lati[i], 100 ); if (rema == 'Poliklinik/Polindes/Posyandu') { var color = Cesium.Color.INDIANRED; var gmbcok = "3d_lk.svg" } else { var color = Cesium.Color.INDIANRED; var gmbcok = "3d_lk.svg" } var polyline = new Cesium.PolylineGraphics(); polyline.material = new Cesium.ColorMaterialProperty(color); polyline.width = new Cesium.ConstantProperty(2); polyline.arcType = new Cesium.ConstantProperty( Cesium.ArcType.NONE ); polyline.positions = new Cesium.ConstantProperty([ surfacePosition, heightPosition, ]); map_cesium.entities.add({ position: Cesium.Cartesian3.fromDegrees(long[i], lati[i], 100), billboard: { // icon: facilityUrl, image: `static/img/icon/` + gmbcok + ``, // image: `static/img/icon/3d_police.svg`, show: true, // default scale: 2.0, // default: 1.0 width: 15, // default: undefined height: 15, // default: undefined }, namelk: data['infolk'][i] }); // console.log(nameadm) var entitylk = new Cesium.Entity({ polyline: polyline, // name: data['infoadm'][i] }); // console.log(name) map_cesium.entities.add(entitylk); } for (var i = 0; i < data["puskesmas"].length; i++) { var pks = data['puskesmas'] var lati = data['latpks']; var long = data['longpks']; var poin = data['infopks']; var rema = data['remapks'][i]; var surfacePosition = Cesium.Cartesian3.fromDegrees( long[i], lati[i], 0 ); var heightPosition = Cesium.Cartesian3.fromDegrees( long[i], lati[i], 100 ); if (rema == 'Puskesmas/Puskesmas Pembantu') { var color = Cesium.Color.INDIANRED; var gmbcok = "3d_pks.svg" } else { var color = Cesium.Color.INDIANRED; var gmbcok = "3d_pks.svg" } var polyline = new Cesium.PolylineGraphics(); polyline.material = new Cesium.ColorMaterialProperty(color); polyline.width = new Cesium.ConstantProperty(2); polyline.arcType = new Cesium.ConstantProperty( Cesium.ArcType.NONE ); polyline.positions = new Cesium.ConstantProperty([ surfacePosition, heightPosition, ]); map_cesium.entities.add({ position: Cesium.Cartesian3.fromDegrees(long[i], lati[i], 100), billboard: { // icon: facilityUrl, image: `static/img/icon/` + gmbcok + ``, // image: `static/img/icon/3d_police.svg`, show: true, // default scale: 2.0, // default: 1.0 width: 15, // default: undefined height: 15, // default: undefined }, namepks: data['infopks'][i] }); // console.log(nameadm) var entitypks = new Cesium.Entity({ polyline: polyline, // name: data['infoadm'][i] }); // console.log(name) map_cesium.entities.add(entitypks); } for (var i = 0; i < data["rumah_sakit"].length; i++) { var rs = data['rumah_sakit'] var lati = data['latrs']; var long = data['longrs']; var poin = data['infors']; var rema = data['remars'][i]; console.log(rema) var surfacePosition = Cesium.Cartesian3.fromDegrees( long[i], lati[i], 0 ); var heightPosition = Cesium.Cartesian3.fromDegrees( long[i], lati[i], 100 ); if (rema == 'Rumah Sakit Umum') { var color = Cesium.Color.INDIANRED; var gmbcok = "3d_rs.svg" } else { var color = Cesium.Color.INDIANRED; var gmbcok = "3d_rs.svg" } var polyline = new Cesium.PolylineGraphics(); polyline.material = new Cesium.ColorMaterialProperty(color); polyline.width = new Cesium.ConstantProperty(2); polyline.arcType = new Cesium.ConstantProperty( Cesium.ArcType.NONE ); polyline.positions = new Cesium.ConstantProperty([ surfacePosition, heightPosition, ]); map_cesium.entities.add({ position: Cesium.Cartesian3.fromDegrees(long[i], lati[i], 100), billboard: { // icon: facilityUrl, image: `static/img/icon/` + gmbcok + ``, // image: `static/img/icon/3d_police.svg`, show: true, // default scale: 2.0, // default: 1.0 width: 15, // default: undefined height: 15, // default: undefined }, namers: data['infors'][i] }); // console.log(nameadm) var entityrs = new Cesium.Entity({ polyline: polyline, // name: data['infoadm'][i] }); // console.log(name) map_cesium.entities.add(entityrs); } for (var i = 0; i < data["sarana_ibadah"].length; i++) { var kadm = data['sarana_ibadah'] var lati = data['latsi']; var long = data['longsi']; var poin = data['infosi']; var rema = data['remasi'][i]; var surfacePosition = Cesium.Cartesian3.fromDegrees( long[i], lati[i], 0 ); var heightPosition = Cesium.Cartesian3.fromDegrees( long[i], lati[i], 100 ); if (rema == 'Masjid') { var color = Cesium.Color.DIMGREY; var gmbcok = "3d_masjid.svg" } else if (rema == 'Peribadatan/Sosial Lainnya') { var color = Cesium.Color.DIMGREY; var gmbcok = "3d_ibadah_lain.svg" } else if (rema == 'Gereja') { var color = Cesium.Color.DIMGREY; var gmbcok = "3d_gereja.svg" } else if (rema == 'Pura') { var color = Cesium.Color.DIMGREY; var gmbcok = "3d_pura.svg" } else { var color = Cesium.Color.DIMGREY; var gmbcok = "3d_ibadah_lain.svg" } var polyline = new Cesium.PolylineGraphics(); polyline.material = new Cesium.ColorMaterialProperty(color); polyline.width = new Cesium.ConstantProperty(2); polyline.arcType = new Cesium.ConstantProperty( Cesium.ArcType.NONE ); polyline.positions = new Cesium.ConstantProperty([ surfacePosition, heightPosition, ]); map_cesium.entities.add({ position: Cesium.Cartesian3.fromDegrees(long[i], lati[i], 100), billboard: { // icon: facilityUrl, image: `static/img/icon/` + gmbcok + ``, // image: `static/img/icon/3d_police.svg`, show: true, // default scale: 2.0, // default: 1.0 width: 15, // default: undefined height: 15, // default: undefined }, namesi: data['infosi'][i] }); // console.log(nameadm) var entitysi = new Cesium.Entity({ polyline: polyline, // name: data['infoadm'][i] }); // console.log(name) map_cesium.entities.add(entitysi); } for (var i = 0; i < data["sarana_pendidikan"].length; i++) { var kadm = data['sarana_pendidikan'] var lati = data['latsp']; var long = data['longsp']; var poin = data['infosp']; var rema = data['remasp'][i]; var surfacePosition = Cesium.Cartesian3.fromDegrees( long[i], lati[i], 0 ); var heightPosition = Cesium.Cartesian3.fromDegrees( long[i], lati[i], 100 ); if (rema == 'Pendidikan Dasar') { var color = Cesium.Color.INDIANRED; var gmbcok = "3d_sd.svg" } else if (rema == 'Pendidikan Menengah Pertama') { var color = Cesium.Color.DARKCYAN; var gmbcok = "3d_smp.svg" } else if (rema == 'Pendidikan Menengah Umum') { var color = Cesium.Color.GAINSBORO; var gmbcok = "3d_sma.svg" } else if (rema == 'Pendidikan Tinggi') { var color = Cesium.Color.DIMGREY; var gmbcok = "3d_univ.svg" } else { var color = Cesium.Color.GOLDENROD; var gmbcok = "3d_sp_lain.svg" } var polyline = new Cesium.PolylineGraphics(); polyline.material = new Cesium.ColorMaterialProperty(color); polyline.width = new Cesium.ConstantProperty(2); polyline.arcType = new Cesium.ConstantProperty( Cesium.ArcType.NONE ); polyline.positions = new Cesium.ConstantProperty([ surfacePosition, heightPosition, ]); map_cesium.entities.add({ position: Cesium.Cartesian3.fromDegrees(long[i], lati[i], 100), billboard: { // icon: facilityUrl, image: `static/img/icon/` + gmbcok + ``, // image: `static/img/icon/3d_police.svg`, show: true, // default scale: 2.0, // default: 1.0 width: 15, // default: undefined height: 15, // default: undefined }, namesp: data['infosp'][i] }); // console.log(nameadm) var entitysp = new Cesium.Entity({ polyline: polyline, // name: data['infoadm'][i] }); // console.log(name) map_cesium.entities.add(entitysp); } for (var i = 0; i < data["spbu"].length; i++) { var kadm = data['spbu'] var lati = data['latspbu']; var long = data['longspbu']; var poin = data['infospbu']; var rema = data['remaspbu'][i]; var surfacePosition = Cesium.Cartesian3.fromDegrees( long[i], lati[i], 0 ); var heightPosition = Cesium.Cartesian3.fromDegrees( long[i], lati[i], 100 ); if (rema == 'Stasiun Pompa Bahan Bakar Umum') { var color = Cesium.Color.FORESTGREEN; var gmbcok = "3d_spbu.svg" } else { var color = Cesium.Color.FORESTGREEN; var gmbcok = "3d_spbu.svg" } var polyline = new Cesium.PolylineGraphics(); polyline.material = new Cesium.ColorMaterialProperty(color); polyline.width = new Cesium.ConstantProperty(2); polyline.arcType = new Cesium.ConstantProperty( Cesium.ArcType.NONE ); polyline.positions = new Cesium.ConstantProperty([ surfacePosition, heightPosition, ]); map_cesium.entities.add({ position: Cesium.Cartesian3.fromDegrees(long[i], lati[i], 100), billboard: { // icon: facilityUrl, image: `static/img/icon/` + gmbcok + ``, // image: `static/img/icon/3d_police.svg`, show: true, // default scale: 2.0, // default: 1.0 width: 15, // default: undefined height: 15, // default: undefined }, namespbu: data['infospbu'][i] }); // console.log(nameadm) var entityspbu = new Cesium.Entity({ polyline: polyline, // name: data['infoadm'][i] }); // console.log(name) map_cesium.entities.add(entityspbu); } for (var i = 0; i < data["stasiun"].length; i++) { var kadm = data['stasiun'] var lati = data['latst']; var long = data['longst']; var poin = data['infost']; var rema = data['remast'][i]; var surfacePosition = Cesium.Cartesian3.fromDegrees( long[i], lati[i], 0 ); var heightPosition = Cesium.Cartesian3.fromDegrees( long[i], lati[i], 100 ); if (rema == 'Stasiun Kereta Api') { var color = Cesium.Color.FORESTGREEN; var gmbcok = "3d_stasiun.svg" } else { var color = Cesium.Color.FORESTGREEN; var gmbcok = "3d_stasiun.svg" } var polyline = new Cesium.PolylineGraphics(); polyline.material = new Cesium.ColorMaterialProperty(color); polyline.width = new Cesium.ConstantProperty(2); polyline.arcType = new Cesium.ConstantProperty( Cesium.ArcType.NONE ); polyline.positions = new Cesium.ConstantProperty([ surfacePosition, heightPosition, ]); map_cesium.entities.add({ position: Cesium.Cartesian3.fromDegrees(long[i], lati[i], 100), billboard: { // icon: facilityUrl, image: `static/img/icon/` + gmbcok + ``, // image: `static/img/icon/3d_police.svg`, show: true, // default scale: 2.0, // default: 1.0 width: 15, // default: undefined height: 15, // default: undefined }, namest: data['infost'][i] }); // console.log(nameadm) var entityst = new Cesium.Entity({ polyline: polyline, // name: data['infoadm'][i] }); // console.log(name) map_cesium.entities.add(entityst); } for (var i = 0; i < data["stasiun"].length; i++) { var kadm = data['stasiun'] var lati = data['latst']; var long = data['longst']; var poin = data['infost']; var rema = data['remast'][i]; var surfacePosition = Cesium.Cartesian3.fromDegrees( long[i], lati[i], 0 ); var heightPosition = Cesium.Cartesian3.fromDegrees( long[i], lati[i], 100 ); if (rema == 'Stasiun Kereta Api') { var color = Cesium.Color.FORESTGREEN; var gmbcok = "3d_stasiun.svg" } else { var color = Cesium.Color.FORESTGREEN; var gmbcok = "3d_stasiun.svg" } var polyline = new Cesium.PolylineGraphics(); polyline.material = new Cesium.ColorMaterialProperty(color); polyline.width = new Cesium.ConstantProperty(2); polyline.arcType = new Cesium.ConstantProperty( Cesium.ArcType.NONE ); polyline.positions = new Cesium.ConstantProperty([ surfacePosition, heightPosition, ]); map_cesium.entities.add({ position: Cesium.Cartesian3.fromDegrees(long[i], lati[i], 100), billboard: { // icon: facilityUrl, image: `static/img/icon/` + gmbcok + ``, // image: `static/img/icon/3d_police.svg`, show: true, // default scale: 2.0, // default: 1.0 width: 15, // default: undefined height: 15, // default: undefined }, namest: data['infost'][i] }); // console.log(nameadm) var entityst = new Cesium.Entity({ polyline: polyline, // name: data['infoadm'][i] }); // console.log(name) map_cesium.entities.add(entityst); } for (var i = 0; i < data["terminal"].length; i++) { var kadm = data['terminal'] var lati = data['lattr']; var long = data['longtr']; var poin = data['infotr']; var rema = data['rematr'][i]; var surfacePosition = Cesium.Cartesian3.fromDegrees( long[i], lati[i], 0 ); var heightPosition = Cesium.Cartesian3.fromDegrees( long[i], lati[i], 100 ); if (rema == 'Terminal Bus/Angkutan Kendaraan Lainnya') { var color = Cesium.Color.FORESTGREEN; var gmbcok = "3d_terminal.svg" } else { var color = Cesium.Color.FORESTGREEN; var gmbcok = "3d_terminal.svg" } var polyline = new Cesium.PolylineGraphics(); polyline.material = new Cesium.ColorMaterialProperty(color); polyline.width = new Cesium.ConstantProperty(2); polyline.arcType = new Cesium.ConstantProperty( Cesium.ArcType.NONE ); polyline.positions = new Cesium.ConstantProperty([ surfacePosition, heightPosition, ]); map_cesium.entities.add({ position: Cesium.Cartesian3.fromDegrees(long[i], lati[i], 100), billboard: { // icon: facilityUrl, image: `static/img/icon/` + gmbcok + ``, // image: `static/img/icon/3d_police.svg`, show: true, // default scale: 2.0, // default: 1.0 width: 15, // default: undefined height: 15, // default: undefined }, nametr: data['infotr'][i] }); // console.log(nameadm) var entitytr = new Cesium.Entity({ polyline: polyline, // name: data['infoadm'][i] }); // console.log(name) map_cesium.entities.add(entitytr); } for (var i = 0; i < data["cagar_budaya"].length; i++) { var kadm = data['cagar_budaya'] var lati = data['latcb']; var long = data['longcb']; var poin = data['infocb']; var rema = data['remacb'][i]; var surfacePosition = Cesium.Cartesian3.fromDegrees( long[i], lati[i], 0 ); var heightPosition = Cesium.Cartesian3.fromDegrees( long[i], lati[i], 100 ); var color = Cesium.Color.ORANGE; var gmbcok = "3d_cagar.svg" var polyline = new Cesium.PolylineGraphics(); polyline.material = new Cesium.ColorMaterialProperty(color); polyline.width = new Cesium.ConstantProperty(2); polyline.arcType = new Cesium.ConstantProperty( Cesium.ArcType.NONE ); polyline.positions = new Cesium.ConstantProperty([ surfacePosition, heightPosition, ]); map_cesium.entities.add({ position: Cesium.Cartesian3.fromDegrees(long[i], lati[i], 100), billboard: { // icon: facilityUrl, image: `static/img/icon/` + gmbcok + ``, // image: `static/img/icon/3d_police.svg`, show: true, // default scale: 2.0, // default: 1.0 width: 15, // default: undefined height: 15, // default: undefined }, namecb: data['infocb'][i] }); // console.log(nameadm) var entitycb = new Cesium.Entity({ polyline: polyline, // name: data['infoadm'][i] }); // console.log(name) map_cesium.entities.add(entitycb); } for (var i = 0; i < data["gardu_listrik"].length; i++) { var kadm = data['gardu_listrik'] var lati = data['latgl']; var long = data['longgl']; var poin = data['infogl']; var rema = data['remagl'][i]; var surfacePosition = Cesium.Cartesian3.fromDegrees( long[i], lati[i], 0 ); var heightPosition = Cesium.Cartesian3.fromDegrees( long[i], lati[i], 100 ); var color = Cesium.Color.YELLOW; var gmbcok = "3d_gardu.svg" var polyline = new Cesium.PolylineGraphics(); polyline.material = new Cesium.ColorMaterialProperty(color); polyline.width = new Cesium.ConstantProperty(2); polyline.arcType = new Cesium.ConstantProperty( Cesium.ArcType.NONE ); polyline.positions = new Cesium.ConstantProperty([ surfacePosition, heightPosition, ]); map_cesium.entities.add({ position: Cesium.Cartesian3.fromDegrees(long[i], lati[i], 100), billboard: { // icon: facilityUrl, image: `static/img/icon/` + gmbcok + ``, // image: `static/img/icon/3d_police.svg`, show: true, // default scale: 2.0, // default: 1.0 width: 15, // default: undefined height: 15, // default: undefined }, namegl: data['infogl'][i] }); // console.log(nameadm) var entitygl = new Cesium.Entity({ polyline: polyline, // name: data['infoadm'][i] }); // console.log(name) map_cesium.entities.add(entitygl); } 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) { $("#modal_detail_non_kelurahan").modal('show'); if (data['administrasi']['f9'] == 'None') { var path_img = "static/img/image_null.jpg" } else { var path_img = `"static/image/bangunan/` + data['administrasi']['f9'] + `"` } content_tampak = ` <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">Upload Tampak Bangunan</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-tampak" style="width: 450px;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;"> <p> <input type="text" class="hidden" name="coordinatebangunan" id="coordinatebangunantampak" value=""> </p> <p> <input type="text" name="idbangunan" id="idbangunantampak" class="form-control hidden" value="` + data['properties']['f1'] + `" disable> </p> <p> <input type="text" name="namebangunan" id="namebangunantampak" class="form-control" value="` + data['properties']['f2'] + `"> </p> <p> <input type="text" name="infobangunan" id="infobangunantampak" class="form-control" value="` + data['administrasi']['f12'] + `"> </p> <p> <span>Gambar Tampak Atas</span> <input type="file" id="imgbangunanatas" name="images[]" multiple accept="image/jpg,image/png,image/jpeg,image/gif"> <input style="display:none;" id="gambaratas" type="text" class="form-control" value="` + data['administrasi']['f14'] + `"required> </p> <p> <span>Gambar Tampak Depan</span> <input type="file" id="imgbangunandepan" name="images[]" multiple accept="image/jpg,image/png,image/jpeg,image/gif"> <input style="display:none;" id="gambardepan" type="text" class="form-control" value="` + data['administrasi']['f15'] + `"required> </p> </div> </div> </div> <div class="modal-footer"> <button type="button" id="btnsavetampakbangunan" class="btn btn-info">Save</button> </div> </div> </div>`; $(".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(`<div> <span style="font-size: large;"> ` + data['properties']['f2'] + ` </span> </div> <div> <span> ` + data['administrasi']['f1'] + `, ` + data['administrasi']['f2'] + `, ` + data['administrasi']['f3'] + `, ` + data['administrasi']['f4'] + ` </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> <div> <span>Jenis Bangunan</span> </div> <div> <span> ` + data['administrasi']['f12'] + ` </span> </div> </div> <div> <div> <span>Luas Bangunan</span> </div> <div> <span style="font-family: 'Roboto';">` + data['administrasi']['f6'] + ` m</span> </div> </div> <div> <div> <span>Luas Tanah</span> </div> <div> <span style="font-family: 'Roboto';">` + data['administrasi']['f7'] + ` m</span> </div> </div> <div> <div> <span>Tinggi Bangunan</span> </div> <div> <span style="font-family: 'Roboto';">` + data['administrasi']['f8'] + ` m</span> </div> </div> <div> <div> <span>Pemilik</span> </div> <div> <span style="font-family: 'Roboto';">` + data['administrasi']['f10'] + ` m</span> </div> </div>`); $(".btn_action").html(`<div class="tombol-edit-keterangan text-center" style="background-color: #5A9AFB;position: absolute;width: 212px;height: 40px;bottom: 2px;right: 5px;border: 1pt solid rosybrown;border-radius: 8px;"> <a href="#" class="btn btn-primary" data-toggle="modal" data-target="#modal_tampak" id="btn_upload_tampak" data-backdrop="static" data-keyboard="false"><i>Upload Tampak Bangunan 3D</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_delete_adm" data-toggle="modal" data-target="#modald_adm" data-backdrop="static" data-keyboard="false" class="btn" style="border-bottom-left-radius: 8px;border-top-right-radius: 8px;width: 100%;height: 100%;bottom: 0px;color: white;" title="Delete"><i class="icon-eraser2"></i></a> </div> `) 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: 237px;height:237"> </th> </tr> </thead> <tbody> <div class= "container"> <tr style="height: 100px;"> <th> <div> <h1 style="font-family: Google Sans,Roboto,Arial,sans-serif; letter-spacing: 0; font-weight: 400;"> <span style="font-size: x-large;"> ` + data['properties']['f2'] + ` </span> </h1> </div> </th> </tr> </div> <div class= "container"> <tr style="height: 30px;"> <th> <span> ` + data['administrasi']['f12'] + ` </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> <div class= "container"> <tr style="height: 40px;"> <th> <p class="text-center" style="margin-top: 25px;"> <a href="#" class="btn btn-primary" data-toggle="modal" data-target="#modal_tampak" id="btn_upload_tampak" data-backdrop="static" data-keyboard="false"><i>Upload Tampak Bangunan 3D</i></a> </p> </th> </tr> </div> </tbody> </table>`; $("#isi_panel").html(content); $("#modal_tampak").html(content_tampak); panel_samp(); } }) } else if (Cesium.defined(selectedEntity.nameadm)) { var id_3dadm = selectedEntity.nameadm $.ajax({ url: "{% url 'api:editkantor' %}", data: { 'id_point': id_3dadm }, dataType: 'json', success: function(data) { if (data['administrasi']['f8'] == 'None') { var path_img = "static/img/image_null.jpg" } else { var path_img = `"static/img/image/` + data['administrasi']['f8'] + `"` } 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: 237px;height:237"> </th> </tr> </thead> <tbody> <div class= "container"> <tr style="height: 100px;"> <th> <div> <h1 style="font-family: Google Sans,Roboto,Arial,sans-serif; letter-spacing: 0; font-weight: 400;"> <span style="font-size: x-large;"> ` + data['administrasi']['f1'] + ` </span> </h1> </div> </th> </tr> </div> <div class= "container"> <tr style="height: 30px;"> <th> <span> ` + data['administrasi']['f2'] + ` </span> </th> </tr> </div> <div class= "container"> <tr style="height: 40px;"> <th> <span> ` + data['administrasi']['f3'] + `, ` + data['administrasi']['f14'] + `, ` + data['administrasi']['f13'] + `, ` + data['administrasi']['f12'] + ` </span> </th> </tr> </div> <div class= "container"> <tr style="height: 40px;"> <th> <p> <span>Luas : ` + data['administrasi']['f5'] + `</span> </p> <p> <span>Pimpinan : ` + data['administrasi']['f10'] + `</span> </p> </th> </tr> </div> </tbody> </table>`; $("#isi_panel").html(content); panel_samp(); } }) } else if (Cesium.defined(selectedEntity.namelk)) { var id_3dadm = selectedEntity.namelk $.ajax({ url: "{% url 'api:editlakes' %}", data: { 'id_point': id_3dadm }, dataType: 'json', success: function(data) { if (data['administrasi']['f8'] == 'None') { var path_img = "static/img/image_null.jpg" } else { var path_img = `"static/img/image/` + data['administrasi']['f8'] + `"` } 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: 237px;height:237"> </th> </tr> </thead> <tbody> <div class= "container"> <tr style="height: 100px;"> <th> <div> <h1 style="font-family: Google Sans,Roboto,Arial,sans-serif; letter-spacing: 0; font-weight: 400;"> <span style="font-size: x-large;"> ` + data['administrasi']['f1'] + ` </span> </h1> </div> </th> </tr> </div> <div class= "container"> <tr style="height: 30px;"> <th> <span> ` + data['administrasi']['f2'] + ` </span> </th> </tr> </div> <div class= "container"> <tr style="height: 40px;"> <th> <span> ` + data['administrasi']['f3'] + `, ` + data['administrasi']['f14'] + `, ` + data['administrasi']['f13'] + `, ` + data['administrasi']['f12'] + ` </span> </th> </tr> </div> <div class= "container"> <tr style="height: 40px;"> <th> <p> <span>Luas : ` + data['administrasi']['f5'] + `</span> </p> <p> <span>Pimpinan : ` + data['administrasi']['f10'] + `</span> </p> </th> </tr> </div> </tbody> </table>`; $("#isi_panel").html(content); panel_samp(); } }) } else if (Cesium.defined(selectedEntity.namepks)) { var id_3dadm = selectedEntity.namepks $.ajax({ url: "{% url 'api:editpks' %}", data: { 'id_point': id_3dadm }, dataType: 'json', success: function(data) { if (data['administrasi']['f8'] == 'None') { var path_img = "static/img/image_null.jpg" } else { var path_img = `"static/img/image/` + data['administrasi']['f8'] + `"` } 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: 237px;height:237"> </th> </tr> </thead> <tbody> <div class= "container"> <tr style="height: 100px;"> <th> <div> <h1 style="font-family: Google Sans,Roboto,Arial,sans-serif; letter-spacing: 0; font-weight: 400;"> <span style="font-size: x-large;"> ` + data['administrasi']['f1'] + ` </span> </h1> </div> </th> </tr> </div> <div class= "container"> <tr style="height: 30px;"> <th> <span> ` + data['administrasi']['f2'] + ` </span> </th> </tr> </div> <div class= "container"> <tr style="height: 40px;"> <th> <span> ` + data['administrasi']['f3'] + `, ` + data['administrasi']['f14'] + `, ` + data['administrasi']['f13'] + `, ` + data['administrasi']['f12'] + ` </span> </th> </tr> </div> <div class= "container"> <tr style="height: 40px;"> <th> <p> <span>Luas : ` + data['administrasi']['f5'] + `</span> </p> <p> <span>Pimpinan : ` + data['administrasi']['f10'] + `</span> </p> </th> </tr> </div> </tbody> </table>`; $("#isi_panel").html(content); panel_samp(); } }) } else if (Cesium.defined(selectedEntity.namers)) { var id_3dadm = selectedEntity.namers $.ajax({ url: "{% url 'api:editrs' %}", data: { 'id_point': id_3dadm }, dataType: 'json', success: function(data) { if (data['administrasi']['f8'] == 'None') { var path_img = "static/img/image_null.jpg" } else { var path_img = `"static/img/image/` + data['administrasi']['f8'] + `"` } 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: 237px;height:237"> </th> </tr> </thead> <tbody> <div class= "container"> <tr style="height: 100px;"> <th> <div> <h1 style="font-family: Google Sans,Roboto,Arial,sans-serif; letter-spacing: 0; font-weight: 400;"> <span style="font-size: x-large;"> ` + data['administrasi']['f1'] + ` </span> </h1> </div> </th> </tr> </div> <div class= "container"> <tr style="height: 30px;"> <th> <span> ` + data['administrasi']['f2'] + ` </span> </th> </tr> </div> <div class= "container"> <tr style="height: 40px;"> <th> <span> ` + data['administrasi']['f3'] + `, ` + data['administrasi']['f14'] + `, ` + data['administrasi']['f13'] + `, ` + data['administrasi']['f12'] + ` </span> </th> </tr> </div> <div class= "container"> <tr style="height: 40px;"> <th> <p> <span>Luas : ` + data['administrasi']['f5'] + `</span> </p> <p> <span>Pimpinan : ` + data['administrasi']['f10'] + `</span> </p> </th> </tr> </div> </tbody> </table>`; $("#isi_panel").html(content); panel_samp(); } }) } else if (Cesium.defined(selectedEntity.namesi)) { var id_3dadm = selectedEntity.namesi $.ajax({ url: "{% url 'api:editsi' %}", data: { 'id_point': id_3dadm }, dataType: 'json', success: function(data) { if (data['administrasi']['f8'] == 'None') { var path_img = "static/img/image_null.jpg" } else { var path_img = `"static/img/image/` + data['administrasi']['f8'] + `"` } 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: 237px;height:237"> </th> </tr> </thead> <tbody> <div class= "container"> <tr style="height: 100px;"> <th> <div> <h1 style="font-family: Google Sans,Roboto,Arial,sans-serif; letter-spacing: 0; font-weight: 400;"> <span style="font-size: x-large;"> ` + data['administrasi']['f1'] + ` </span> </h1> </div> </th> </tr> </div> <div class= "container"> <tr style="height: 30px;"> <th> <span> ` + data['administrasi']['f2'] + ` </span> </th> </tr> </div> <div class= "container"> <tr style="height: 40px;"> <th> <span> ` + data['administrasi']['f3'] + `, ` + data['administrasi']['f14'] + `, ` + data['administrasi']['f13'] + `, ` + data['administrasi']['f12'] + ` </span> </th> </tr> </div> <div class= "container"> <tr style="height: 40px;"> <th> <p> <span>Luas : ` + data['administrasi']['f5'] + `</span> </p> <p> <span>Pimpinan : ` + data['administrasi']['f10'] + `</span> </p> </th> </tr> </div> </tbody> </table>`; $("#isi_panel").html(content); panel_samp(); } }) } else if (Cesium.defined(selectedEntity.namesp)) { var id_3dadm = selectedEntity.namesp $.ajax({ url: "{% url 'api:editsp' %}", data: { 'id_point': id_3dadm }, dataType: 'json', success: function(data) { if (data['administrasi']['f8'] == 'None') { var path_img = "static/img/image_null.jpg" } else { var path_img = `"static/img/image/` + data['administrasi']['f8'] + `"` } 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: 237px;height:237"> </th> </tr> </thead> <tbody> <div class= "container"> <tr style="height: 100px;"> <th> <div> <h1 style="font-family: Google Sans,Roboto,Arial,sans-serif; letter-spacing: 0; font-weight: 400;"> <span style="font-size: x-large;"> ` + data['administrasi']['f1'] + ` </span> </h1> </div> </th> </tr> </div> <div class= "container"> <tr style="height: 30px;"> <th> <span> ` + data['administrasi']['f2'] + ` </span> </th> </tr> </div> <div class= "container"> <tr style="height: 40px;"> <th> <span> ` + data['administrasi']['f3'] + `, ` + data['administrasi']['f14'] + `, ` + data['administrasi']['f13'] + `, ` + data['administrasi']['f12'] + ` </span> </th> </tr> </div> <div class= "container"> <tr style="height: 40px;"> <th> <p> <span>Luas : ` + data['administrasi']['f5'] + `</span> </p> <p> <span>Pimpinan : ` + data['administrasi']['f10'] + `</span> </p> </th> </tr> </div> </tbody> </table>`; $("#isi_panel").html(content); panel_samp(); } }) } else if (Cesium.defined(selectedEntity.namespbu)) { var id_3dadm = selectedEntity.namespbu $.ajax({ url: "{% url 'api:editpom' %}", data: { 'id_point': id_3dadm }, dataType: 'json', success: function(data) { if (data['administrasi']['f8'] == 'None') { var path_img = "static/img/image_null.jpg" } else { var path_img = `"static/img/image/` + data['administrasi']['f8'] + `"` } 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: 237px;height:237"> </th> </tr> </thead> <tbody> <div class= "container"> <tr style="height: 100px;"> <th> <div> <h1 style="font-family: Google Sans,Roboto,Arial,sans-serif; letter-spacing: 0; font-weight: 400;"> <span style="font-size: x-large;"> ` + data['administrasi']['f1'] + ` </span> </h1> </div> </th> </tr> </div> <div class= "container"> <tr style="height: 30px;"> <th> <span> ` + data['administrasi']['f2'] + ` </span> </th> </tr> </div> <div class= "container"> <tr style="height: 40px;"> <th> <span> ` + data['administrasi']['f3'] + `, ` + data['administrasi']['f14'] + `, ` + data['administrasi']['f13'] + `, ` + data['administrasi']['f12'] + ` </span> </th> </tr> </div> <div class= "container"> <tr style="height: 40px;"> <th> <p> <span>Luas : ` + data['administrasi']['f5'] + `</span> </p> <p> <span>Pimpinan : ` + data['administrasi']['f10'] + `</span> </p> </th> </tr> </div> </tbody> </table>`; $("#isi_panel").html(content); panel_samp(); } }) } else if (Cesium.defined(selectedEntity.namest)) { var id_3dadm = selectedEntity.namest $.ajax({ url: "{% url 'api:editst' %}", data: { 'id_point': id_3dadm }, dataType: 'json', success: function(data) { if (data['administrasi']['f8'] == 'None') { var path_img = "static/img/image_null.jpg" } else { var path_img = `"static/img/image/` + data['administrasi']['f8'] + `"` } 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: 237px;height:237"> </th> </tr> </thead> <tbody> <div class= "container"> <tr style="height: 100px;"> <th> <div> <h1 style="font-family: Google Sans,Roboto,Arial,sans-serif; letter-spacing: 0; font-weight: 400;"> <span style="font-size: x-large;"> ` + data['administrasi']['f1'] + ` </span> </h1> </div> </th> </tr> </div> <div class= "container"> <tr style="height: 30px;"> <th> <span> ` + data['administrasi']['f2'] + ` </span> </th> </tr> </div> <div class= "container"> <tr style="height: 40px;"> <th> <span> ` + data['administrasi']['f3'] + `, ` + data['administrasi']['f14'] + `, ` + data['administrasi']['f13'] + `, ` + data['administrasi']['f12'] + ` </span> </th> </tr> </div> <div class= "container"> <tr style="height: 40px;"> <th> <p> <span>Luas : ` + data['administrasi']['f5'] + `</span> </p> <p> <span>Pimpinan : ` + data['administrasi']['f10'] + `</span> </p> </th> </tr> </div> </tbody> </table>`; $("#isi_panel").html(content); panel_samp(); } }) } else if (Cesium.defined(selectedEntity.nametr)) { var id_3dadm = selectedEntity.nametr $.ajax({ url: "{% url 'api:edittr' %}", data: { 'id_point': id_3dadm }, dataType: 'json', success: function(data) { if (data['administrasi']['f8'] == 'None') { var path_img = "static/img/image_null.jpg" } else { var path_img = `"static/img/image/` + data['administrasi']['f8'] + `"` } 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: 237px;height:237"> </th> </tr> </thead> <tbody> <div class= "container"> <tr style="height: 100px;"> <th> <div> <h1 style="font-family: Google Sans,Roboto,Arial,sans-serif; letter-spacing: 0; font-weight: 400;"> <span style="font-size: x-large;"> ` + data['administrasi']['f1'] + ` </span> </h1> </div> </th> </tr> </div> <div class= "container"> <tr style="height: 30px;"> <th> <span> ` + data['administrasi']['f2'] + ` </span> </th> </tr> </div> <div class= "container"> <tr style="height: 40px;"> <th> <span> ` + data['administrasi']['f3'] + `, ` + data['administrasi']['f14'] + `, ` + data['administrasi']['f13'] + `, ` + data['administrasi']['f12'] + ` </span> </th> </tr> </div> <div class= "container"> <tr style="height: 40px;"> <th> <p> <span>Luas : ` + data['administrasi']['f5'] + `</span> </p> <p> <span>Pimpinan : ` + data['administrasi']['f10'] + `</span> </p> </th> </tr> </div> </tbody> </table>`; $("#isi_panel").html(content); panel_samp(); } }) } else if (Cesium.defined(selectedEntity.namecb)) { var id_3dadm = selectedEntity.namecb $.ajax({ url: "{% url 'api:editcb' %}", data: { 'id_point': id_3dadm }, dataType: 'json', success: function(data) { if (data['administrasi']['f8'] == 'None') { var path_img = "static/img/image_null.jpg" } else { var path_img = `"static/img/image/` + data['administrasi']['f4'] + `"` } 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: 237px;height:237"> </th> </tr> </thead> <tbody> <div class= "container"> <tr style="height: 100px;"> <th> <div> <h1 style="font-family: Google Sans,Roboto,Arial,sans-serif; letter-spacing: 0; font-weight: 400;"> <span style="font-size: x-large;"> ` + data['administrasi']['f1'] + ` </span> </h1> </div> </th> </tr> </div> <div class= "container"> <tr style="height: 30px;"> <th> <span> ` + data['administrasi']['f2'] + ` </span> </th> </tr> </div> <div class= "container"> <tr style="height: 40px;"> <th> <span> ` + data['administrasi']['f3'] + `, ` + data['administrasi']['f9'] + `, ` + data['administrasi']['f8'] + `, ` + data['administrasi']['f7'] + ` </span> </th> </tr> </div> <div class= "container"> <tr style="height: 40px;"> <th> <p> <span>Luas : ` + data['administrasi']['f10'] + `</span> </p> <p> <span>Pimpinan : ` + data['administrasi']['f15'] + `</span> </p> </th> </tr> </div> </tbody> </table>`; $("#isi_panel").html(content); panel_samp(); } }) } else if (Cesium.defined(selectedEntity.namegl)) { var id_3dadm = selectedEntity.namegl $.ajax({ url: "{% url 'api:editgl' %}", data: { 'id_point': id_3dadm }, dataType: 'json', success: function(data) { if (data['administrasi']['f8'] == 'None') { var path_img = "static/img/image_null.jpg" } else { var path_img = `"static/img/image/` + data['administrasi']['f8'] + `"` } 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: 237px;height:237"> </th> </tr> </thead> <tbody> <div class= "container"> <tr style="height: 100px;"> <th> <div> <h1 style="font-family: Google Sans,Roboto,Arial,sans-serif; letter-spacing: 0; font-weight: 400;"> <span style="font-size: x-large;"> ` + data['administrasi']['f1'] + ` </span> </h1> </div> </th> </tr> </div> <div class= "container"> <tr style="height: 30px;"> <th> <span> ` + data['administrasi']['f2'] + ` </span> </th> </tr> </div> <div class= "container"> <tr style="height: 40px;"> <th> <span> ` + data['administrasi']['f3'] + `, ` + data['administrasi']['f14'] + `, ` + data['administrasi']['f13'] + `, ` + data['administrasi']['f12'] + ` </span> </th> </tr> </div> <div class= "container"> <tr style="height: 40px;"> <th> <p> <span>Luas : ` + data['administrasi']['f5'] + `</span> </p> <p> <span>Pimpinan : ` + data['administrasi']['f10'] + `</span> </p> </th> </tr> </div> </tbody> </table>`; $("#isi_panel").html(content); panel_samp(); } }) } else { console.log('Unknown entity selected.'); } } else { console.log('Deselected.'); } }); } }); }); function load3dbang() { $(".label-bangunan").css("display", "none"); } $(document).on("click", "#btn_upload_tampak", function() { var map_tampak = new L.map('map-tampak', { 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_tampak); var id_polytmpk = $('#idbangunantampak').val(); // console.log(id_polyhps) loaderPage(true); $.ajax({ url: "{% url 'api:edit' %}", data: { 'id_poly': id_polytmpk }, dataType: 'json', success: function(data) { setTimeout(function() { map_tampak.invalidateSize(); }, 1000); loaderPage(false); map_tampak.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_tampak) $('#btnsavetampakbangunan').click(function() { var hasil = (JSON.stringify(polyly.toGeoJSON())) $("#coordinatebangunantampak").val(hasil); }) } }) }); $(document).on("click", "#btnsavetampakbangunan", function() { var data = new FormData(); data.append('id_poly', $('#idbangunantampak').val()) data.append('name_b', $('#namebangunantampak').val()) data.append('gambar_atas', $('#gambaratas').val()) data.append('gambar_depan', $('#gambardepan').val()) data.append("fileatas", $("input[id^='imgbangunanatas']")[0].files[0]); data.append("filedepan", $("input[id^='imgbangunandepan']")[0].files[0]); data.append("csrfmiddlewaretoken", "{{ csrf_token }}"); $.ajax({ url: "{% url 'api:tampak' %}", 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_tampak").css('display', 'none'); location.reload() }) } else { swal({ title: 'Error', text: 'Terjadi Kesalahan', type: "warning", icon: "error", confirmButtonColor: "#00BCD4" }) } } }) }); //3d end 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) { $("#modal_detail_non_kelurahan").modal('show'); 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.f4 // for (var i = 0; i < list_history.length; i++) { // var dt_history = list_history[i].split(","); // console.log(dt_history[0]) // console.log(dt_history[1]) // console.log(dt_history[2]) // } // if (feature.administrasi.f11 != 'None'){ // var cbb = `<option value="null" disabled>-- Pilih Jenis Point --</option> // <option value="bangunan" `if(feature.administrasi.f11 != 'bangunan'){`selected`};` >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>` // } var history if (feature.administrasi.f11 == 'kantor_administrasi' || feature.administrasi.f11 == 'layanan_kesehatan' || feature.administrasi.f11 == 'puskesmas' || feature.administrasi.f11 == 'rumah_sakit' || feature.administrasi.f11 == 'sarana_pendidikan' || feature.administrasi.f11 == 'stasiun' || feature.administrasi.f11 == 'terminal_bus' || feature.administrasi.f11 == 'cagar_budaya' || feature.administrasi.f11 == 'gardu_listrik') { if (feature.properties.f4 != null) { var list_history = feature.properties.f4 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> <label class="col-md-6">` + dt_history[2] + `</label> </div> </div>`; list_history_panel += data_history }; history = ` <div> <div style="margin-top: 150px;"> <span>Perbaikan Terakhir</span> <span> <a id='btn_detail_per_bang' onclick="getdetailperbang(` + feature.properties.f1 + `)" data-toggle="modal" data-target="#modal_detail" style = "text-align:right; margin-right:26px;"><i>Detail</i></a> </span> </div> <div> <span> <tr style="height: 40px;"> <th id="history_panel"> <div class="form-group" style="margin-bottom:0px;"> <div class="row"> <label class="col-md-6">` + list_history[0].split(",")[1] + `</label> <label class="col-md-6">` + list_history[0].split(",")[2] + `</label> </div> </div> <p class="text-center" style="margin-top: 5px;"> <a class="btn" id="btn_perbaikan_bangunan" data-toggle="modal" data-target="#input_perbaikan_bang"><i>Input Perbaikan</i></a> </p> </th> </tr> </span> </div> </div> `; } else { history = ` <div> <div style="margin-top: 150px;"> <span>Perbaikan Terakhir</span> </div> <div> <span> <tr style="height: 40px;"> <th id="history_panel"> <p class="text-center" style="margin-top: 10px;"><i>Belum Ada History</i></p> <p class="text-center" style="margin-top: 10px;"> <a class="btn" id="btn_perbaikan_bangunan" data-toggle="modal" data-target="#input_perbaikan_bang"><i>Input Perbaikan</i></a> </p> </th> </tr> </span> </div> </div> `; } } else { history = `` } // if (feature.properties.f4 != null) { // var list_history = feature.properties.f4 // console.log(list_history[0].split(",")[0]) // var perbaikan_bg = ` // <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="#input_perbaikan_bang"><i>Detail</i></a> // </div> // <a class="btn" id="btn_perbaikan_bangunan" data-toggle="modal" data-target="#input_perbaikan_bang"><i>Input Perbaikan</i></a>` // } else { // var perbaikan_bg = `<div class='row'> // <div class="col-md-6"> // <label class="col-md-6">-</label> // </div> // </div> // <a class="btn" id="btn_perbaikan_bangunan" data-toggle="modal" data-target="#input_perbaikan_bang"><i>Input Perbaikan</i></a> // ` // } 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="overflow-x: hidden;max-height: 300px;overflow-y: scroll;padding-left: 15px;"> <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 style="margin-top: 10px"> <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>Jenis Bangunan</th> <td> <input type="text" class="hidden" name="tipe1" id="tipe111" value="` + feature.administrasi.f11 + `"> <input type="text" class="hidden" name="tipe1" id="tipe222" value="` + feature.administrasi.f12 + `"> <input type="text" class="hidden" name="tipe1" id="tipe333" value="` + feature.administrasi.f13 + `"> <input type="text" class="hidden" name="tipe1" id="tipe444" value="` + feature.administrasi.f14 + `"> <select style="border-bottom: 1px solid rgb(83, 83, 83) !important;width: 220px;" id="tipe_point_b_e" 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> </td> </tr> <tr> <th>Tipe Bangunan</th> <td> <select style="border-bottom: 1px solid rgb(83, 83, 83) !important;width: 220px;" id="tipe_point_2_b_e" data-placeholder="select point.." class="select-size-md"> <option value="null" selected disabled>-- Pilih Tipe Point --</option> </td> </tr> <tr> <th>Point Bangunan</th> <td> <select style="border-bottom: 1px solid rgb(83, 83, 83) !important;width: 220px;" id="tipe_point_3_b_e" data-placeholder="select point.." class="select-size-md"> <option value="null" selected disabled>-- Pilih Point --</option> </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 " 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 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_inp_his_bang = ` <div class="modal-dialog" style="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">Renovasi Bangunan</h6> </div> <div class="modal-body" style="max-height: 450px;overflow-y: auto;"> <div class="tab-pane has-padding" id="panel-tab2"> <div class="tab-pane" id="bottom-justified-data"> <div class="tabbable"> <ul class="nav nav-tabs nav-tabs-bottom nav-justified"> <li onclick="changetabs(this)" class="active"><a href="#left-tab1-feas-upl" data-toggle="tab">Koordinat</a></li> <li onclick="changetabs(this)"><a href="#right-tab2-feas-upl" data-toggle="tab">Informasi Umum</a></li> </ul> <div class="tab-content"> <div class="tab-pane active" id="left-tab1-feas-upl"> <input type="text" class="hidden" id="poly_create_input_bang"> <input type="text" class="hidden" id="id_bang_perbaikan" value="` + feature.properties.f1 + `" disable> <input type="text" class="hidden" id="type_id_bang"> <div id="map-insert-renov-bang" style="height: 375px;width: 100%"> </div> </div> <div class="tab-pane" id="right-tab2-feas-upl"> <div class="row"> <div class="col-md-6"> <div class="form-group"> <label>Nama :</label> <input type="text" id="nama_bang" class="form-control" value=""> </div> <div class="form-group"> <label>Jenis :</label> <input type="text" id="type_bang" class="form-control" value=""> </div> <div class="form-group"> <label>Kelurahan :</label> <input type="text" id="kelurahan_bang" class="form-control" value=""> </div> <div class="form-group"> <label>Kecamatan :</label> <input type="text" id="kecamatan_bang" class="form-control" value=""> </div> <div class="form-group"> <label>Tanggal Disetujui :</label> <input type="date" id="tgldisetujui_bang" class="form-control" value=""> </div> <div class="form-group"> <label>Tanggal Mulai Perbaikan :</label> <input type="date" id="tglmulaiperbaikan_bang" class="form-control" value=""> </div> <div class="form-group"> <label>Tanggal Selesai Perbaikan :</label> <input type="date" id="tglselesaiperbaikan_bang" class="form-control" value=""> </div> </div> <div class="col-md-6"> <div class="form-group"> <label>Anggaran :</label> <input type="text" id="anggaran_bang" class="form-control" value=""> </div> <div class="form-group"> <label>Pihak yang Mengesahkan :</label> <input type="text" id="pihakpengesahan_bang" class="form-control" value=""> </div> <div class="form-group"> <label>Penanggung Jawab Lapangan :</label> <input type="text" id="pjlapangan_bang" class="form-control" value=""> </div> <div class="form-group"> <label>Jenis Perbaikan :</label> <input type="text" id="jenisperbaikan_bang" class="form-control" value=""> </div> <div class="form-group"> <label>Kontraktor/Vendor :</label> <input type="text" id="kontraktor_bang" class="form-control" value=""> </div> <div class="form-group"> <label>Proposal (.pdf):</label> <input type="file" id="proposal_bang"> </div> <div class="form-group"> <label>Bukti Selesai Perbaikan (.png/.jpg/.jpeg/):</label> <input type="file" id="buktiselesai_bang"> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="modal-footer"> <input type="text" id="coorbangbaru" class="hidden" value=""> <button type="button" class="btn btn-info" id="save-perbaikan_bang" style="float: right; margin-top: 5px; margin-right: 10px;">SAVE</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.administrasi.f12 + ` </span> </th> </tr> </div> <div class= "container"> <tr style="height: 40px;"> <th> <p style="text-align:center;"> <img src="static/img/icon/samping_location.svg" alt="Image" style="height: 30px; width: 30px;"> </p> <p> <span> ` + alamat + feature.administrasi.f1 + `, ` + feature.administrasi.f2 + `, ` + feature.administrasi.f3 + `, ` + feature.administrasi.f4 + ` </span> </p> </th> </tr> </div> <div class= "container"> <tr style="height: 40px;"> <th> <p style="text-align:center;"> <img src="static/img/icon/samping_informasi.svg" alt="Image" style="height: 30px; width: 30px;"> </p> <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> </th> </tr> </div> <div class= "container"> <tr style="height: 40px;"> <th> <p class="text-center" style="margin-top: 5px;"> <a href="#" class="btn btn-primary" data-toggle="modal" data-target="#modal_bangunan_edit" id="btn_edit_bangunan" data-backdrop="static" data-keyboard="false" style="border-radius: 200px; margin-bottom: 5px;"><i class="fa fa-edit" style="color:#ffffff"> </i><i style="margin-left: 5px;">Edit Informasi Bangunan</i></a> <a href="#" id='btn_delete_bangunan' class='btn btn-primary btn_edit_bangunan' data-toggle="modal" data-target="#modal_bangunan_delete" data-backdrop="static" data-keyboard="false" style="border-radius: 200px; margin-bottom: 5px;"><i class="fa fa-trash" style="color:#ffffff"> </i><i style="margin-left: 5px;">Delete Bangunan</i></a> </p> </th> </tr> </div> <div class="container"> ` + history + ` </div> </tbody> </table>`; $(".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(`<div> <span style="font-size: large;"> ` + feature.properties.f2 + ` </span> </div> <div> <span> ` + alamat + feature.administrasi.f1 + `, ` + feature.administrasi.f2 + `, ` + feature.administrasi.f3 + `, ` + feature.administrasi.f4 + ` </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="col-md-6"> <div> <div> <span style="font-family: 'gilroylight';">Jenis Bangunan</span> </div> <div> <span style="font-family: 'gilroysemibold';">` + feature.administrasi.f12 + `</span> </div> </div> <div> <div style="margin-top:5px;"> <span style="font-family: 'gilroylight';">Luas Bangunan</span> </div> <div> <span style="font-family: 'gilroysemibold';">` + feature.administrasi.f6 + ` m</span> </div> </div> <div> <div> <span style="font-family: 'gilroylight';">Luas Tanah</span> </div> <div> <span style="font-family: 'gilroysemibold';">` + feature.administrasi.f7 + ` m</span> </div> </div> </div> <div class="col-md-6"> <div> <div> <span style="font-family: 'gilroylight';">Tinggi Bangunan</span> </div> <div> <span style="font-family: 'gilroysemibold';">` + feature.administrasi.f8 + ` m</span> </div> </div> <div> <div style="margin-top:5px;"> <span style="font-family: 'gilroylight';">Pemilik</span> </div> <div> <span style="font-family: 'gilroysemibold';">` + feature.administrasi.f10 + ` m</span> </div> </div> </div> ` + history + ` `); $(".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_edit_bangunan" data-toggle="modal" data-target="#modal_bangunan_edit" 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" data-toggle="modal" data-target="#modal_bangunan_delete" 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_delete_bangunan" data-toggle="modal" data-target="#modal_bangunan_delete" 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> `) $("#isi_panel").html(content); $("#modal_bangunan_edit").html(content_edit); $("#modal_bangunan_delete").html(content_delete); $("#input_perbaikan_bang").html(content_inp_his_bang); panel_samp(); }); // $("#tipe_point_b_e").val('feature.administrasi.f11').change(); // $('#tipe_point_b_e').val(feature.properties.f11).attr('selected','selected'); // $('#tipe_point_b_e option[value=bangunan]').attr('selected','selected'); // $('#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) } 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(); var checkBox_building = document.getElementById("geo_building"); if (checkBox_building.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() } }); $(document).on("click", "#btn_edit_bangunan", function() { $("#modal_detail_non_kelurahan").modal("hide") var tipe1 = $('#tipe111').val(); $('#tipe_point_b_e option[value=' + tipe1 + ']').attr('selected', 'selected'); $("#tipe_point_b_e").change(function() { $('#tipe_point_2_b_e').empty(); $('#tipe_point_3_b_e').empty(); 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]; // if (feature.administrasi.f12 == data_k){ // var data_kab = `<option value="` + data_k + `" selected>` + data_k + `</option>`; // } else{ // var data_kab = `<option value="` + data_k + `">` + data_k + `</option>`; // } var data_kab = `<option value="` + data_k + `">` + data_k + `</option>`; data_all_kab.push(data_kab) }; $('#tipe_point_2_b_e').html(`<option value="null" selected disabled>-- Pilih Tipe Point --</option>` + data_all_kab); } }); }); var tipe2 = $('#tipe222').val(); if (tipe2 == 'null') { $('#tipe_point_2_b_e').html(`<option value="null" selected disabled>-- Pilih Tipe Point --</option>`); } else { $('#tipe_point_2_b_e').html(`<option value="` + tipe2 + `" selected>` + tipe2 + `</option>`); } $("#tipe_point_2_b_e").change(function() { $('#tipe_point_3_b_e').empty(); var jenis = $(this).val(); var tipx = $("#tipe_point_b_e").val(); $.ajax({ url: "{% url 'api:change-jenis' %}", data: { 'tipe': tipx, 'jenis': jenis }, dataType: 'json', success: function(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>`; console.log(data_id) console.log(data_po) var data_kab = `<option value="` + data_id + `">` + data_po + `</option>`; data_all_kab.push(data_kab) }; $('#tipe_point_3_b_e').html(`<option value="null" selected disabled>-- Pilih Point --</option>` + data_all_kab); } }); }); var tipe3 = $('#tipe333').val(); var tipe4 = $('#tipe444').val(); if (tipe3 == 'null') { $('#tipe_point_3_b_e').html(`<option value="null" selected disabled>-- Pilih Point --</option>`); } else { $('#tipe_point_3_b_e').html(`<option value="` + tipe3 + `" selected>` + tipe4 + `</option>`); } 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) 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); $("#modal_bangunan_edit").modal("show") $(".modal_detail_non_kelurahan").modal("hide") 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(polylyly.toGeoJSON())) $('#btnsavebangunan').click(function() { var hasil = (JSON.stringify(polylyly.toGeoJSON())) $("#coordinatebangunan").val(hasil); // map_edit.remove() }) } }) }); $(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()) var polyg = $("#coordinatebangunan").val(); console.log(polyg) 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('tipedbbe', $('#tipe_point_b_e').val()) data.append('remarkbe', $('#tipe_point_2_b_e').val()) data.append('poinbe', $('#tipe_point_3_b_e').val()) var remark = $('#tipe_point_2_b_e').val(); var poin_id = $('#tipe_point_3_b_e').val(); var napo = $("#tipe_point_3_b_e option:selected").text(); console.log(remark) console.log(poin_id) console.log(napo) data.append('napo', $('#tipe_point_3_b_e option:selected').text()) data.append('luasbangunan_b', $('#luasbangunan').val()) data.append('luastanah_b', $('#luastanah').val()) data.append('tinggibangunan_b', $('#tinggibangunan').val()) data.append('pemilik_b', $('#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'); $("#modal_bangunan_edit").modal("hide") // $(".modal_detail_non_kelurahan").modal("hide") }) } 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) { $("#modal_bangunan_delete").modal("show") $(".modal_detail_non_kelurahan").modal("hide") loaderPage(false) } }) }); $(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").modal("hide") }) } else { swal({ title: 'Error', text: 'Hubungi Mereka', type: "warning", icon: "error", confirmButtonColor: "#00BCD4" }) } } }) }); $(document).on("click", "#btn_perbaikan_bangunan", function() { // $("#input_perbaikan_bang-s").css("display", "block"); var map_bang = new L.map('map-insert-renov-bang', { editable: false, zoomControl: false, drawControl: false }).setView([-2, 118], 5); mapssx = L.tileLayer('https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}', { maxZoom: 22, minZoom: 4, }).addTo(map_bang); // if (map_bang.hasLayer(polyxxx)) { // polyxxx.remove() // } var id_polyx = $('#id_bang_perbaikan').val(); loaderPage(true); $.ajax({ url: "{% url 'apps:input-perbaikan-bang' %}", data: { 'id_bangunan': id_polyx }, dataType: 'json', success: function(data) { setTimeout(function() { map_bang.invalidateSize(); }, 1000); loaderPage(false); $("#nama_bang").val(data[0]); $("#type_bang").val(data[4]); $("#id_bang_perbaikan").val(data[3]); $("#type_id_bang").val("1"); $("#kelurahan_bang").val(data[5]); $("#kecamatan_bang").val(data[6]); var latlngs = data[2]; var lattitud, longitud; map_bang.setView([data[2]['geometry']['coordinates'][0][0][0][1], data[2]['geometry']['coordinates'][0][0][0][0]], 19); let lop_poly_edit = data[2]['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_bang) polylyly.enableEdit(); var hasil = (JSON.stringify(polylyly.toGeoJSON())) $('#save-perbaikan_bang').click(function() { $("#coorbangbaru").val(hasil); }) } }) }); $(document).on("click", "#save-perbaikan_bang", function(e) { var polyginbang = $('#coorbangbaru').val(); var type_id = $("#type_id").val(); var idbang = $('#id_bang_perbaikan').val(); var namabang = $('#nama_bang').val(); var type = $("#type_bang").val(); var tgl_perbaikan = $("#tglmulaiperbaikan_bang").val(); var tgl_selesai = $("#tglselesaiperbaikan_bang").val(); var tgl_disetujui = $("#tgldisetujui_bang").val(); var anggaran = $("#anggaran_bang").val(); var proposal = $("#proposal_bang").val(); var bukti_selesai = $("#buktiselesai_bang").val(); var pj = $("#pihakpengesahan_bang").val(); var pj_lapangan = $("#pjlapangan_bang").val(); var kontraktor = $("#kontraktor_bang").val(); var jenis_perbaikan = $("#jenisperbaikan_bang").val(); var kelurahan = $("#kelurahan_bang").val(); var kecamatan = $("#kecamatan_bang").val(); var data_umum = [{ 'coordbang': polyginbang }, { 'object_idbang': idbang }, { 'type_idbang': type_id }, { 'namebang': namabang }, { 'typebang': type }, { 'tgl_selesaibang': tgl_selesai }, { 'tgl_perbaikanbang': tgl_perbaikan }, { 'tgl_disetujuibang': tgl_disetujui }, { 'anggaranbang': anggaran }, { 'pjbang': pj }, { 'pj_lapanganbang': pj_lapangan }, { 'jenis_perbaikanbang': jenis_perbaikan }, { 'kontraktorbang': kontraktor }, { 'kelurahanbang': kelurahan }, { 'kecamatanbang': kecamatan }] data = new FormData() data.append("proposal_bang", $("input[id^='proposal_bang']")[0].files[0]); data.append("bukti_selesai_bang", $("input[id^='buktiselesai_bang']")[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-bang' %}", 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_bang").css("display", "none"); }) } else { swal({ title: response.info, text: response.data, type: "warning", icon: "error", confirmButtonColor: "#00BCD4" }) } } }) }); function getdetailperbang(id) { $.ajax({ url: "{% url 'apps:get-detail-perbaikan-bang' %}", data: { 'id': id }, dataType: 'json', success: function(data) { isi_modal_detail = [] for (var i = 0; i < data.length; i++) { isi_modal_detail.push(` <tr> <td>` + i + `</td> <td>` + data[i].name + `</td> <td>` + data[i].type + `</td> <td>` + data[i].tgl_perbaikan + `</td> <td>` + data[i].anggaran + `</td> <td>` + data[i].pj + `</td> <td>` + data[i].pj_lapangan + `</td> <td>` + data[i].kontraktor + `</td> <td>` + data[i].jenis_perbaikan + `</td> <td><a href="media/proposal/` + data[i].proposal + `" id="downloadproposal" target="_blank">View</a></td> <td><a href="media/bukti_penyelesaian/` + data[i].bukti_selesai + `" onclick="viewBukti()" id="view-bukti" target="_blank">View</a></td> </tr>`) } $("#isi_modal_detail").html(` <table class="table table-responsive datatable-show-all table-sm" id="isi_detail" style="word-wrap:break-word;"> <thead> <tr> <th>No.</th> <th>Nama</th> <th>Type</th> <th>Tanggal Perbaikan</th> <th>Anggaran</th> <th>Penanggung Jawab</th> <th>Penanggung Jawab Lapangan</th> <th>Kontraktor</th> <th>Jenis Perbaikan</th> <th>Proposal</th> <th>Bukti Penyelesaian</th> </tr> </thead> <tbody> ` + isi_modal_detail + ` </tbody> </table>`) } }); }; </script>