{% 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(/&#x27;/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()">&times;</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()">&times;</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(/&#x27;/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()">&times;</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()">&times;</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(/&#x27;/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()">&times;</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()">&times;</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(/&#x27;/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()">&times;</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()">&times;</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(/&#x27;/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()">&times;</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()">&times;</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(/&#x27;/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()">&times;</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()">&times;</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(/&#x27;/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()">&times;</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;">&#13217;</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(/&#x27;/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()">&times;</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()">&times;</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(/&#x27;/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()">&times;</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()">&times;</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(/&#x27;/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()">&times;</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()">&times;</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(/&#x27;/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()">&times;</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()">&times;</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(/&#x27;/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(/&#x27;/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">&times;</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">&times;</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">&times;</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">&times;</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>