{% 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>