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

    .leaflet-popup{
        display: block;
    }
</style>
{% endif %}{% endfor %}

<script>
    var kantor_administrasi = "{{ kantor_administrasi }}".replace(/&#x27;/g, '"');
    var result_kan_adm = JSON.parse("" + kantor_administrasi + "")
        // console.log(result_kan_adm[1]['administrasi']['f2'])

    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/police.svg',
                    shadowUrl: 'static/img/icon/shadow.svg',
                    shadowSize: [38, 38],
                    shadowAnchor: [20, 32]
                });
                var marker = L.marker(latlng, {
                    icon: smallIcon
                });
                marker.bindTooltip(feature.administrasi.f1, {
                    permanent: false,
                    className: "my-label",
                    offset: [0, 0]
                });
                return marker
            } else if (feature.administrasi.f2 == 'Instalasi TNI (AD/AL/AU)') {
                var smallIcon = new L.Icon({
                    iconSize: [20, 20],
                    iconAnchor: [13, 27],
                    popupAnchor: [1, -24],
                    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
                });
                marker.bindTooltip(feature.administrasi.f1, {
                    permanent: false,
                    className: "my-label",
                    offset: [0, 0]
                });
                return marker
            } else if (feature.administrasi.f2 == 'Bangunan/Kantor Pertahanan Keamanan Lainnya') {
                var smallIcon = new L.Icon({
                    iconSize: [20, 20],
                    iconAnchor: [13, 27],
                    popupAnchor: [1, -24],
                    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
                });
                marker.bindTooltip(feature.administrasi.f1, {
                    permanent: false,
                    className: "my-label",
                    offset: [0, 0]
                });
                return marker
            } else if (feature.administrasi.f2 == 'Kantor Pemerintah Lainnya') {
                var smallIcon = new L.Icon({
                    iconSize: [20, 20],
                    iconAnchor: [13, 27],
                    popupAnchor: [1, -24],
                    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
                });
                marker.bindTooltip(feature.administrasi.f1, {
                    permanent: false,
                    className: "my-label",
                    offset: [0, 0]
                });
                return marker
            } else if (feature.administrasi.f2 == 'Kantor Camat') {
                var smallIcon = new L.Icon({
                    iconSize: [20, 20],
                    iconAnchor: [13, 27],
                    popupAnchor: [1, -24],
                    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
                });
                marker.bindTooltip(feature.administrasi.f1, {
                    permanent: false,
                    className: "my-label",
                    offset: [0, 0]
                });
                return marker
            } else if (feature.administrasi.f2 == 'Kantor Kepala Desa') {
                var smallIcon = new L.Icon({
                    iconSize: [20, 20],
                    iconAnchor: [13, 27],
                    popupAnchor: [1, -24],
                    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
                });
                marker.bindTooltip(feature.administrasi.f1, {
                    permanent: false,
                    className: "my-label",
                    offset: [0, 0]
                });
                return marker
            } else if (feature.administrasi.f2 == 'Kantor DPRD') {
                var smallIcon = new L.Icon({
                    iconSize: [20, 20],
                    iconAnchor: [13, 27],
                    popupAnchor: [1, -24],
                    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
                });
                marker.bindTooltip(feature.administrasi.f1, {
                    permanent: false,
                    className: "my-label",
                    offset: [0, 0]
                });
                return marker
            } else if (feature.administrasi.f2 == 'Kantor Lurah') {
                var smallIcon = new L.Icon({
                    iconSize: [20, 20],
                    iconAnchor: [13, 27],
                    popupAnchor: [1, -24],
                    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
                });
                marker.bindTooltip(feature.administrasi.f1, {
                    permanent: false,
                    className: "my-label",
                    offset: [0, 0]
                });
                return marker
            } else if (feature.administrasi.f2 == 'Lembaga Pemasyarakatan') {
                var smallIcon = new L.Icon({
                    iconSize: [20, 20],
                    iconAnchor: [13, 27],
                    popupAnchor: [1, -24],
                    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
                });
                marker.bindTooltip(feature.administrasi.f1, {
                    permanent: false,
                    className: "my-label",
                    offset: [0, 0]
                });
                return marker
            } else if (feature.administrasi.f2 == 'Kantor Bupati') {
                var smallIcon = new L.Icon({
                    iconSize: [20, 20],
                    iconAnchor: [13, 27],
                    popupAnchor: [1, -24],
                    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
                });
                marker.bindTooltip(feature.administrasi.f1, {
                    permanent: false,
                    className: "my-label",
                    offset: [0, 0]
                });
                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 = `
                                <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; margin-top: 40px;"> 
                                            </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 : ` + 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>Pimpinan : </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_adm' class="btn btn-default" data-toggle="modal" data-target="#modal_adm" data-backdrop="static" data-keyboard="false"><i>Edit Informasi Point</i></a>
                                                        <a href="#" id='btn_delete_adm' class='btn btn-default' data-toggle="modal" data-target="#modald_adm" data-backdrop="static" data-keyboard="false"><i>Delete Point</i></a>
                                                    </p>
                                                </th>
                                            </tr>
                                        </div>
                                    </tbody>
                                </table>`;
                            content_delete_adm = `
                            <div class="modal-dialog md">
                                        <div class="modal-content">
                                            <div class="modal-header bg-info" style="background-color: #40777c !important;">
                                                    <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="min-height: 450px;overflow-y: auto;">
                                                <div id="map-for-delete" style="width: 400px;height: 300px;position: relative;margin-left: 100px;"></div>
                                                <input style="display:none;" id="id_adm_del" type="text" class="form-control" value="` + feature.administrasi.f15 + `"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-link" data-dismiss="modal" onclick="destroyfade()">Close</button>
                                                <button type="button" class="btn btn-info" id="savedeleteadm">Hapus</button>
                                            </div>
                                        </div>
                                    </div>`;
                            content_edit_adm = `
                            <div class="modal-dialog md">
                                        <div class="modal-content">
                                            <div class="modal-header bg-info" style="background-color: #40777c !important;">
                                                    <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-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">
                                                                        <div id="map-for-edit" style="width: 400px;height: 300px;position: relative;margin-left: 100px;"></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_adm_edit" type="text" class="form-control" value="` + feature.administrasi.f8 + `"required>
                                                                            </div>
                                                                        </div>
                                                                </div>

                                                                <div class="tab-pane" id="right-tab2-feas-upl">

                                                                    <div class="modal-body" style="min-height: 450px;overflow-y: auto;">

                                                                                <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-link" data-dismiss="modal" onclick="destroyfade()">Close</button>
                                                    <button type="button" class="btn btn-info" id="saveeditadm">Save changes</button>
                                                </div>
                                        </div>
                                    </div>`;
                            $("#isi_panel").html(content)
                            $("#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);
                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();
                $('#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^='file']")[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").css('display', 'none');
                        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", "#savedeleteadm", function() {
        var idka = $('#id_adm_del').val();
        var poi = $('#coordinateZoneedit_adm_del').val();
        var data = new FormData();
        data.append('id', idka)

        $.ajax({
            url: "{% url 'api:dkantor' %}",
            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").css('display', 'none');
                        location.reload();
                    })
                } else {
                    swal({
                        title: 'Error',
                        text: 'Hubungi Mereka',
                        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: [20, 20],
                iconAnchor: [13, 27],
                popupAnchor: [1, -24],
                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
            });
            marker.bindTooltip(feature.administrasi.f1, {
                permanent: false,
                className: "my-label",
                offset: [0, 0]
            });
            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_lk = `
                            <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 : ` + 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>Pimpinan : </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_lk' class="btn btn-default" 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>`;
                        content_edit_lk = `
                        <div class="modal-dialog md">
                            <div class="modal-content">
                                <div class="modal-header bg-info" style="background-color: #40777c !important;">
                                        <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-upl" data-toggle="tab">Koordinat</a></li>
                                                    <li onclick="changetabs(this)"><a href="#left-tab1-feas-upl" data-toggle="tab">Informasi Umum</a></li>
                                                    
                                                </ul>

                                                <div class="tab-content">

                                                    <div class="tab-pane" id="left-tab1-feas-upl">

                                                        <div class="modal-body" style="min-height: 450px;overflow-y: auto;">

                                                                    <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-upl">
                                                        <div class="form-group">
                                                            <div id="map-for-edit" style="width: 400px;height: 300px;position: relative;margin-left: 100px;"></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_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-link" data-dismiss="modal" onclick="destroyfade()">Close</button>
                                        <button type="button" class="btn btn-info" id="saveeditlk">Save changes</button>
                                    </div>
                            </div>
                        </div>`;
                        $("#isi_panel").html(content_lk)
                        $("#modal_adm").html(content_edit_lk)
                    })
                    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^='file']")[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").css('display', 'none');
                        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: [20, 20],
                iconAnchor: [13, 27],
                popupAnchor: [1, -24],
                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
            });
            marker.bindTooltip(feature.administrasi.f1, {
                permanent: false,
                className: "my-label",
                offset: [0, 0]
            });
            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_puskes = `
                            <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 : ` + 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>Pimpinan : </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_puskes' class="btn btn-default" 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>`;
                        content_edit_puskes = `
                        <div class="modal-dialog md">
                            <div class="modal-content">
                                <div class="modal-header bg-info" style="background-color: #40777c !important;">
                                        <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-upl" data-toggle="tab">Koordinat</a></li>
                                                    <li onclick="changetabs(this)"><a href="#left-tab1-feas-upl" data-toggle="tab">Informasi Umum</a></li>
                                                </ul>

                                                <div class="tab-content">

                                                    <div class="tab-pane" id="left-tab1-feas-upl">

                                                        <div class="modal-body" style="min-height: 450px;overflow-y: auto;">

                                                                    <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-upl">
                                                        <div class="form-group">
                                                            <div id="map-for-edit" style="width: 400px;height: 300px;position: relative;margin-left: 100px;"></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_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-link" data-dismiss="modal" onclick="destroyfade()">Close</button>
                                        <button type="button" class="btn btn-info" id="saveeditpuskes">Save changes</button>
                                    </div>
                            </div>
                        </div>`;
                        $("#isi_panel").html(content_puskes)
                        $("#modal_adm").html(content_edit_puskes)
                    })
                    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^='file']")[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").css('display', 'none');
                        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/rs.svg',
                shadowUrl: 'static/img/icon/shadow.svg',
                shadowSize: [35, 35],
                shadowAnchor: [19, 31]
            });
            var marker = L.marker(latlng, {
                icon: smallIcon
            });
            marker.bindTooltip(feature.administrasi.f1, {
                permanent: false,
                className: "my-label",
                offset: [0, 0]
            });
            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_rs = `
                            <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>Pimpinan : </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_rs' class="btn btn-default" 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>`;
                        content_edit_rs=`
                            <div class="modal-dialog md">
                                <div class="modal-content">
                                    <div class="modal-header bg-info" style="background-color: #40777c !important;">
                                            <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-upl" data-toggle="tab">Koordinat</a></li>
                                                        <li onclick="changetabs(this)"><a href="#left-tab1-feas-upl" data-toggle="tab">Informasi Umum</a></li>
                                                    </ul>

                                                    <div class="tab-content">

                                                        <div class="tab-pane" id="left-tab1-feas-upl">

                                                            <div class="modal-body" style="min-height: 450px;overflow-y: auto;">

                                                                        <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-upl">
                                                            <div class="form-group">
                                                                <div id="map-for-edit" style="width: 400px;height: 300px;position: relative;margin-left: 100px;"></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_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-link" data-dismiss="modal" onclick="destroyfade()">Close</button>
                                            <button type="button" class="btn btn-info" id="saveeditrs">Save changes</button>
                                        </div>
                                </div>
                            </div>`;
                        $("#isi_panel").html(content_rs)
                        $("#modal_adm").html(content_edit_rs)
                    })
                    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^='file']")[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").css('display', 'none');
                        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
                });
                marker.bindTooltip(feature.administrasi.f1, {
                    permanent: false,
                    className: "my-label",
                    offset: [0, 0]
                });
                return marker
            } else if (feature.administrasi.f2 == 'Gereja') {
                var smallIcon = new L.Icon({
                    iconSize: [20, 20],
                    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
                });
                marker.bindTooltip(feature.administrasi.f1, {
                    permanent: false,
                    className: "my-label",
                    offset: [0, 0]
                });
                return marker
            } else if (feature.administrasi.f2 == 'Peribadatan/Sosial Lainnya') {
                var smallIcon = new L.Icon({
                    iconSize: [20, 20],
                    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
                });
                marker.bindTooltip(feature.administrasi.f1, {
                    permanent: false,
                    className: "my-label",
                    offset: [0, 0]
                });
                return marker
            } else if (feature.administrasi.f2 == 'Pura') {
                var smallIcon = new L.Icon({
                    iconSize: [20, 20],
                    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
                });
                marker.bindTooltip(feature.administrasi.f1, {
                    permanent: false,
                    className: "my-label",
                    offset: [0, 0]
                });
                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_ibdh = `
                            <div class="modal-dialog md">
                                <div class="modal-content">
                                    <div class="modal-header bg-info" style="background-color: #40777c !important;">
                                            <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-upl" data-toggle="tab">Koordinat</a></li>
                                                        <li onclick="changetabs(this)"><a href="#left-tab1-feas-upl" data-toggle="tab">Informasi Umum</a></li>
                                                    </ul>

                                                    <div class="tab-content">

                                                        <div class="tab-pane" id="left-tab1-feas-upl">

                                                            <div class="modal-body" style="min-height: 450px;overflow-y: auto;">

                                                                        <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-upl">
                                                            <div class="form-group">
                                                                <div id="map-for-edit" style="width: 400px;height: 300px;position: relative;margin-left: 100px;"></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_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-link" data-dismiss="modal" onclick="destroyfade()">Close</button>
                                            <button type="button" class="btn btn-info" id="saveeditsi">Save changes</button>
                                        </div>
                                </div>
                            </div>`
                        content_ibdh = `
                            <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 : ` + feature.administrasi.f5 + ` </span><span style="font-weight: 700;">&#13217;</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_si' class="btn btn-default" 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>`;
                        $("#isi_panel").html(content_ibdh)
                        $("#modal_adm").html(content_edit_ibdh)
                    })
                    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^='file']")[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").css('display', 'none');
                        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: [20, 20],
                    iconAnchor: [13, 27],
                    popupAnchor: [1, -24],
                    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
                });
                marker.bindTooltip(feature.administrasi.f1, {
                    permanent: false,
                    className: "my-label",
                    offset: [0, 0]
                });
                return marker
            } else if (feature.administrasi.f2 == 'Perpustakaan') {
                var smallIcon = new L.Icon({
                    iconSize: [20, 20],
                    iconAnchor: [13, 27],
                    popupAnchor: [1, -24],
                    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
                });
                marker.bindTooltip(feature.administrasi.f1, {
                    permanent: false,
                    className: "my-label",
                    offset: [0, 0]
                });
                return marker
            } else {
                var smallIcon = new L.Icon({
                    iconSize: [20, 20],
                    iconAnchor: [13, 27],
                    popupAnchor: [1, -24],
                    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
                });
                marker.bindTooltip(feature.administrasi.f1, {
                    permanent: false,
                    className: "my-label",
                    offset: [0, 0]
                });
                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;
                        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" style="background-color: #40777c !important;">
                                            <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-upl" data-toggle="tab">Koordinat</a></li>
                                                        <li onclick="changetabs(this)"><a href="#left-tab1-feas-upl" data-toggle="tab">Informasi Umum</a></li>
                                                    </ul>

                                                    <div class="tab-content">

                                                        <div class="tab-pane" id="left-tab1-feas-upl">

                                                            <div class="modal-body" style="min-height: 450px;overflow-y: auto;">

                                                                        <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-upl">
                                                            <div class="form-group">
                                                                <div id="map-for-edit" style="width: 400px;height: 300px;position: relative;margin-left: 100px;"></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_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-link" data-dismiss="modal" onclick="destroyfade()">Close</button>
                                            <button type="button" class="btn btn-info" id="saveeditsp">Save changes</button>
                                        </div>
                                </div>
                            </div>`
                        content_sp = `
                            <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>Pimpinan : </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_sp' class="btn btn-default" 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>`;
                        $("#isi_panel").html(content_sp)
                        $("#modal_adm").html(content_edit_sp)
                    })
                    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^='file']")[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").css('display', 'none');
                        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
            });
            marker.bindTooltip(feature.administrasi.f1, {
                permanent: false,
                className: "my-label",
                offset: [0, 0]
            });
            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 = `
                            <input id='btn_edit_spbu' class="btn btn-default btn_edit_point" type="submit" value="Edit" style="position: absolute; 
                                top: 6px;right: 5px;width: 60px;" data data-toggle="modal" data-target="#modal_spbu">
                                <div class="modal fade" id="modal_spbu">
                                    <div class="modal-dialog md">
                                        <div class="modal-content">
                                            <div class="modal-header bg-info" style="background-color: #40777c !important;">
                                                    <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-upl" data-toggle="tab">Informasi Umum</a></li>
                                                                <li onclick="changetabs(this)"><a href="#right-tab2-feas-upl" data-toggle="tab">Koordinat</a></li>
                                                            </ul>

                                                            <div class="tab-content">

                                                                <div class="tab-pane active" id="left-tab1-feas-upl">

                                                                    <div class="modal-body" style="min-height: 450px;overflow-y: auto;">

                                                                                <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 Bangunan</label>
                                                                                    <div class="col-lg-6">
                                                                                        <input id="luas_bangunan" type="text" class="form-control" value="` + feature.administrasi.f4 + `"required>
                                                                                    </div>
                                                                                    <div class="col-lg-3">
                                                                                        <select id="satuan_luas_bangunan" 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;">Tinggi Bangunan</label>
                                                                                    <div class="col-lg-6">
                                                                                        <input id="tinggi_bangunan" type="text" class="form-control" value="` + feature.administrasi.f9 + `"required>
                                                                                        
                                                                                    </div>
                                                                                    <div class="col-lg-3" style="margin-top: 15px;">m</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 class="tab-pane" id="right-tab2-feas-upl">
                                                                    <div class="form-group">
                                                                        <div id="map-for-edit" style="width: 400px;height: 300px;position: relative;margin-left: 100px;"></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>
                                                        </div>
                                                    </div>
                                                </div>

                                                <hr>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-link" data-dismiss="modal" onclick="destroyfade()">Close</button>
                                                    <button type="button" class="btn btn-info" id="saveeditspbu">Save changes</button>
                                                </div>
                                        </div>
                                    </div>
                                </div>
                        <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 Bangunan : ` + feature.administrasi.f4 + ` </span><span style="font-weight: 700;">&#13217;</span>
                                                </p>
                                                <p>
                                                    <span>Luas Tanah : ` + feature.administrasi.f5 + ` </span><span style="font-weight: 700;">&#13217;</span>
                                                </p>
                                                <p>
                                                    <span>Tinggi Bangunan : ` + feature.administrasi.f9 + ` m</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>
                                </tbody>
                            </table>
                        </form>`;
                        showpanel(content);
                    })
                    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^='file']")[0].files[0]);
        data.append("csrfmiddlewaretoken", "{{ csrf_token }}");
        data.append('idspbu', idspbu)
        data.append('namobj', $('#namobj').val())
        data.append('remark', $('#remark').val())
        data.append('luasbangunan', $('#luas_bangunan').val())
        data.append('luastanah', $('#luas_tanah').val())
        data.append('tinggibangunan', $('#tinggi_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:spbu' %}",
            data: data,
            dataType: 'json',
            type: 'POST',
            processData: false,
            contentType: false,
            success: function(data) {
                alert("sukses")
                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: [20, 20],
                iconAnchor: [13, 27],
                popupAnchor: [1, -24],
                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
            });
            marker.bindTooltip(feature.administrasi.f1, {
                permanent: false,
                className: "my-label",
                offset: [0, 0]
            });
            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 = `
                            <input id='btn_edit_st' class="btn btn-default btn_edit_point" type="submit" value="Edit" style="position: absolute; 
                                top: 6px;right: 5px;width: 60px;" data data-toggle="modal" data-target="#modal_st">
                                <div class="modal fade" id="modal_st">
                                    <div class="modal-dialog md">
                                        <div class="modal-content">
                                            <div class="modal-header bg-info" style="background-color: #40777c !important;">
                                                    <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-upl" data-toggle="tab">Informasi Umum</a></li>
                                                                <li onclick="changetabs(this)"><a href="#right-tab2-feas-upl" data-toggle="tab">Koordinat</a></li>
                                                            </ul>

                                                            <div class="tab-content">

                                                                <div class="tab-pane active" id="left-tab1-feas-upl">

                                                                    <div class="modal-body" style="min-height: 450px;overflow-y: auto;">

                                                                                <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 Bangunan</label>
                                                                                    <div class="col-lg-6">
                                                                                        <input id="luas_bangunan" type="text" class="form-control" value="` + feature.administrasi.f4 + `"required>
                                                                                    </div>
                                                                                    <div class="col-lg-3">
                                                                                        <select id="satuan_luas_bangunan" 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;">Tinggi Bangunan</label>
                                                                                    <div class="col-lg-6">
                                                                                        <input id="tinggi_bangunan" type="text" class="form-control" value="` + feature.administrasi.f9 + `"required>
                                                                                        
                                                                                    </div>
                                                                                    <div class="col-lg-3" style="margin-top: 15px;">m</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 class="tab-pane" id="right-tab2-feas-upl">
                                                                    <div class="form-group">
                                                                        <div id="map-for-edit" style="width: 400px;height: 300px;position: relative;margin-left: 100px;"></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>
                                                        </div>
                                                    </div>
                                                </div>

                                                <hr>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-link" data-dismiss="modal" onclick="destroyfade()">Close</button>
                                                    <button type="button" class="btn btn-info" id="saveeditst">Save changes</button>
                                                </div>
                                        </div>
                                    </div>
                                </div>

                            <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 Bangunan : ` + feature.administrasi.f4 + ` </span><span style="font-weight: 700;">&#13217;</span>
                                                </p>
                                                <p>
                                                    <span>Luas Tanah : ` + feature.administrasi.f5 + ` </span><span style="font-weight: 700;">&#13217;</span>
                                                </p>
                                                <p>
                                                    <span>Tinggi Bangunan : ` + feature.administrasi.f9 + ` m</span>
                                                </p>
                                            </th>
                                        </tr>
                                    </div>
                                    <div class= "container">
                                        <tr style="height: 40px;">
                                            <th>
                                                <p>
                                                    <span>Pemimpin : </span>
                                                </p>
                                                <p>
                                                    <span>` + raja + `</span>
                                                </p>
                                            </th>
                                        </tr>
                                    </div>
                                </tbody>
                            </table>`;
                        showpanel(content);
                    })
                    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('luasbangunan', $('#luas_bangunan').val())
        data.append('luastanah', $('#luas_tanah').val())
        data.append('tinggibangunan', $('#tinggi_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:stasiun' %}",
            data: data,
            dataType: 'json',
            type: 'POST',
            processData: false,
            contentType: false,
            success: function(data) {
                alert("sukses")
                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: [18, 18],
                iconAnchor: [13, 27],
                popupAnchor: [1, -24],
                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
            });
            marker.bindTooltip(feature.administrasi.f1, {
                permanent: false,
                className: "my-label",
                offset: [0, 0]
            });
            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 = `
                            <input id='btn_edit_tr' class="btn btn-default btn_edit_point" type="submit" value="Edit" style="position: absolute; 
                                top: 6px;right: 5px;width: 60px;" data data-toggle="modal" data-target="#modal_tr">
                                <div class="modal fade" id="modal_tr">
                                    <div class="modal-dialog md">
                                        <div class="modal-content">
                                            <div class="modal-header bg-info" style="background-color: #40777c !important;">
                                                    <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-upl" data-toggle="tab">Informasi Umum</a></li>
                                                                <li onclick="changetabs(this)"><a href="#right-tab2-feas-upl" data-toggle="tab">Koordinat</a></li>
                                                            </ul>

                                                            <div class="tab-content">

                                                                <div class="tab-pane active" id="left-tab1-feas-upl">

                                                                    <div class="modal-body" style="min-height: 450px;overflow-y: auto;">

                                                                                <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 class="tab-pane" id="right-tab2-feas-upl">
                                                                    <div class="form-group">
                                                                        <div id="map-for-edit" style="width: 400px;height: 300px;position: relative;margin-left: 100px;"></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>
                                                        </div>
                                                    </div>
                                                </div>

                                                <hr>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-link" data-dismiss="modal" onclick="destroyfade()">Close</button>
                                                    <button type="button" class="btn btn-info" id="saveedittr">Save changes</button>
                                                </div>
                                        </div>
                                    </div>
                                </div>

                            <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 : ` + feature.administrasi.f15 + ` </span><span style="font-weight: 700;">&#13217;</span>
                                                </p>
                                            </th>
                                        </tr>
                                    </div>
                                </tbody>
                            </table>`;
                        showpanel(content);
                    })
                    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) {
                alert("sukses")
                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: [20, 20],
                iconAnchor: [13, 27],
                popupAnchor: [1, -24],
                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
            });
            marker.bindTooltip(feature.administrasi.f1, {
                permanent: false,
                className: "my-label",
                offset: [0, 0]
            });
            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.f5 == 'bpk') {
                            var raja = "";
                        } else {
                            var raja = feature.administrasi.f5;
                        }
                        content = `
                            <input id='btn_edit_cb' class="btn btn-default btn_edit_point" type="submit" value="Edit" style="position: absolute; 
                                top: 6px;right: 5px;width: 60px;" data data-toggle="modal" data-target="#modal_cb">
                                <div class="modal fade" id="modal_cb">
                                    <div class="modal-dialog md">
                                        <div class="modal-content">
                                            <div class="modal-header bg-info" style="background-color: #40777c !important;">
                                                    <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-upl" data-toggle="tab">Informasi Umum</a></li>
                                                                <li onclick="changetabs(this)"><a href="#right-tab2-feas-upl" data-toggle="tab">Koordinat</a></li>
                                                            </ul>

                                                            <div class="tab-content">

                                                                <div class="tab-pane active" id="left-tab1-feas-upl">

                                                                    <div class="modal-body" style="min-height: 450px;overflow-y: auto;">

                                                                                <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 class="tab-pane" id="right-tab2-feas-upl">
                                                                    <div class="form-group">
                                                                        <div id="map-for-edit" style="width: 400px;height: 300px;position: relative;margin-left: 100px;"></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>
                                                        </div>
                                                    </div>
                                                </div>

                                                <hr>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-link" data-dismiss="modal" onclick="destroyfade()">Close</button>
                                                    <button type="button" class="btn btn-info" id="saveeditcb">Save changes</button>
                                                </div>
                                        </div>
                                    </div>
                                </div>

                            <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.f4 + `" 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.f9 + `, ` + feature.administrasi.f8 + `, ` + feature.administrasi.f7 + `
                                                </span>
                                            </th>
                                        </tr>
                                    </div>
                                    <div class= "container">
                                        <tr style="height: 40px;">
                                            <th>
                                                <p>
                                                    <span>Luas : ` + feature.administrasi.f10 + ` </span><span style="font-weight: 700;">&#13217;</span>
                                                </p>
                                            </th>
                                        </tr>
                                    </div>
                                    <div class= "container">
                                        <tr style="height: 40px;">
                                            <th>
                                                <p>
                                                    <span>Pemimpin : </span>
                                                </p>
                                                <p>
                                                    <span>` + raja + `</span>
                                                </p>
                                            </th>
                                        </tr>
                                    </div>
                                </tbody>
                            </table>`;
                        showpanel(content);
                    })
                    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 {
            valket()
            geo_po_cagar_budaya.remove()
        }
    }

    $(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) {
                alert("sukses")
                location.reload()
            }
        })

    });

    var gardu_listrik = "{{ gardu_listrik }}".replace(/&#x27;/g, '"');
    var result_gardu_listrik = JSON.parse("" + gardu_listrik + "")

    var geo_po_gardu_listrik = L.geoJson(null, {
        pointToLayer: function(feature, latlng) {
            var smallIcon = new L.Icon({
                iconSize: [20, 20],
                iconAnchor: [13, 27],
                popupAnchor: [1, -24],
                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
            });
            marker.bindTooltip(feature.administrasi.f1, {
                permanent: false,
                className: "my-label",
                offset: [0, 0]
            });
            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 = `
                            <input id='btn_edit_gl' class="btn btn-default btn_edit_point" type="submit" value="Edit" style="position: absolute; 
                                top: 6px;right: 5px;width: 60px;" data data-toggle="modal" data-target="#modal_gl">
                                <div class="modal fade" id="modal_gl">
                                    <div class="modal-dialog md">
                                        <div class="modal-content">
                                            <div class="modal-header bg-info" style="background-color: #40777c !important;">
                                                    <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-upl" data-toggle="tab">Informasi Umum</a></li>
                                                                <li onclick="changetabs(this)"><a href="#right-tab2-feas-upl" data-toggle="tab">Koordinat</a></li>
                                                            </ul>

                                                            <div class="tab-content">

                                                                <div class="tab-pane active" id="left-tab1-feas-upl">

                                                                    <div class="modal-body" style="min-height: 450px;overflow-y: auto;">

                                                                                <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 Bangunan</label>
                                                                                    <div class="col-lg-6">
                                                                                        <input id="luas_bangunan" type="text" class="form-control" value="` + feature.administrasi.f4 + `"required>
                                                                                    </div>
                                                                                    <div class="col-lg-3">
                                                                                        <select id="satuan_luas_bangunan" 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;">Tinggi Bangunan</label>
                                                                                    <div class="col-lg-6">
                                                                                        <input id="tinggi_bangunan" type="text" class="form-control" value="` + feature.administrasi.f9 + `"required>
                                                                                        
                                                                                    </div>
                                                                                    <div class="col-lg-3" style="margin-top: 15px;">m</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 class="tab-pane" id="right-tab2-feas-upl">
                                                                    <div class="form-group">
                                                                        <div id="map-for-edit" style="width: 400px;height: 300px;position: relative;margin-left: 100px;"></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>
                                                        </div>
                                                    </div>
                                                </div>

                                                <hr>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-link" data-dismiss="modal" onclick="destroyfade()">Close</button>
                                                    <button type="button" class="btn btn-info" id="saveeditgl">Save changes</button>
                                                </div>
                                        </div>
                                    </div>
                                </div>

                                <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 Bangunan : ` + feature.administrasi.f4 + ` </span><span style="font-weight: 700;">&#13217;</span>
                                                    </p>
                                                    <p>
                                                        <span>Luas Tanah : ` + feature.administrasi.f5 + ` </span><span style="font-weight: 700;">&#13217;</span>
                                                    </p>
                                                    <p>
                                                        <span>Tinggi Bangunan : ` + feature.administrasi.f9 + ` m</span>
                                                    </p>
                                                </th>
                                            </tr>
                                        </div>
                                        <div class= "container">
                                            <tr style="height: 40px;">
                                                <th>
                                                    <p>
                                                        <span>Pemimpin : </span>
                                                    </p>
                                                    <p>
                                                        <span>` + raja + `</span>
                                                    </p>
                                                </th>
                                            </tr>
                                        </div>
                                    </tbody>
                                </table>`;

                        showpanel(content);
                    })
                    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) {
            valket()
            geo_po_gardu_listrik.addTo(map)
        } else {
            valket()
            geo_po_gardu_listrik.remove()
        }
    }

    $(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('luasbangunan', $('#luas_bangunan').val())
        data.append('luastanah', $('#luas_tanah').val())
        data.append('tinggibangunan', $('#tinggi_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:gardu' %}",
            data: data,
            dataType: 'json',
            type: 'POST',
            processData: false,
            contentType: false,
            success: function(data) {
                alert("sukses")
                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-upl') {
            $("#left-tab1-feas-upl").removeClass("show")
                // $("#right-tab2-feas-upl").attr("display", "block")

        } else {
            $("#right-tab2-feas-upl").removeClass("show")
                // $("#left-tab1-feas-upl").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
    function map3d() {
        var checkBox_3d = document.getElementById("3d-maps");
        if (checkBox_3d.checked == true) {
            $("#map").css('display', 'none');
            $("#map-cesium").css('display', 'block');

            Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJhOTc0NDkxMi02N2NkLTQwYjMtOTE1Yi1iMGNkZDU0Zjg3MGMiLCJpZCI6NDQ1ODgsImlhdCI6MTYxNDE0NjM5NH0.sRHzNNa7uV_huqGxERySWlL8J5UVx1VwU-pRwNd0GJk';
            var worldTerrain = new Cesium.ArcGISTiledElevationTerrainProvider({
                    url:
                        "https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer",
                });
            var map_cesium = new Cesium.Viewer('map-cesium');
            // var map_cesium = new Cesium.Viewer('map-cesium', {
            //         terrainProvider: worldTerrain,
            //     });
            
            map_cesium.camera.flyTo({
                destination: Cesium.Cartesian3.fromDegrees(104.171696, -4.120217, 10000)
            });
            
            map_cesium.camera.moveEnd.addEventListener(function() {
                var windowPosition = new Cesium.Cartesian2(map_cesium.container.clientWidth / 2, map_cesium.container.clientHeight / 2);
                var pickRay = map_cesium.scene.camera.getPickRay(windowPosition);
                var pickPosition = map_cesium.scene.globe.pick(pickRay, map_cesium.scene);
                var pickPositionCartographic = map_cesium.scene.globe.ellipsoid.cartesianToCartographic(pickPosition);
                var longitudee = pickPositionCartographic.longitude * (180 / Math.PI);
                var lattitudee = pickPositionCartographic.latitude * (180 / Math.PI);
                // map_cesium.terrainProvider = worldTerrain;
                console.log(lattitudee)
                console.log(longitudee)

                $.ajax({
                    url: "{% url 'api:3d-maps' %}",
                    data: {
                        'latt': lattitudee,
                        'loog': longitudee
                    },
                    dataType: 'json',
                    success: function(data) {
                        for (var i = 0; i < data["polygon_o"].length; i++) {
                            polygon_oo = data["polygon_o"][i][0].replace(/&#x27;/g, '');
                            poll = JSON.parse("[" + polygon_oo + "]");

                            var poly_osm = map_cesium.entities.add({
                                polygon: {
                                    hierarchy: Cesium.Cartesian3.fromDegreesArray(
                                        poll
                                    ),
                                    height: 0,
                                    material: Cesium.Color.FLORALWHITE.withAlpha(0.7),
                                    outline: true,
                                    outlineColor: Cesium.Color.GREEN,
                                },
                                name: data["info_polygon"][i]
                            });
                            poly_osm.polygon.extrudedHeight = data["tinggi_pol"][i];
                            // poly_osm.polygon.extrudedHeight = 10;
                            // console.log(data["tinggi_pol"])
                        };
                    }
                });
            });
            map_cesium.selectedEntityChanged.addEventListener(function(selectedEntity) {
                if (Cesium.defined(selectedEntity)) {
                    if (Cesium.defined(selectedEntity.name)) {
                        var id_poly = selectedEntity.name

                        $.ajax({
                            url: "{% url 'api:edit' %}",
                            data: {
                                'id_poly': id_poly
                            },
                            dataType: 'json',
                            success: function(data) {
                                if (data['administrasi']['f9'] == 'None') {
                                    var path_img = "static/img/image_null.jpg"
                                } else {
                                    var path_img = `"static/image/bangunan/` + data['administrasi']['f9'] + `"`
                                }
                                content = `<table class="table table-hover tasks-list">
                                    <thead style="text-align: center;">
                                        <tr>
                                            <th style="padding: 0 0 0 0px;">
                                                <img src=` + path_img + ` alt="Image" style="width: 100%;max-height: 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['properties']['f3'] + `
                                                    </span>
                                                </th>
                                            </tr>
                                        </div>
                                        <div class= "container">
                                            <tr style="height: 40px;">
                                                <th>
                                                    <span>
                                                        ` + data['administrasi']['f1'] + `, ` + data['administrasi']['f2'] + `, ` + data['administrasi']['f3'] + `, ` + data['administrasi']['f4'] + `
                                                    </span>
                                                </th>
                                            </tr>
                                        </div>
                                        <div class= "container">
                                            <tr style="height: 40px;">
                                                <th>
                                                    <p>
                                                        <span>Luas Bangunan : ` + data['administrasi']['f6'] + `</span>
                                                    </p>
                                                    <p>
                                                        <span>Luas Tanah : ` + data['administrasi']['f7'] + `</span>
                                                    </p>
                                                    <p>
                                                        <span>Tinggi Bangunan : ` + data['administrasi']['f8'] + `</span>
                                                    </p>
                                                    <p>
                                                        <span>Pemilik : ` + data['administrasi']['f10'] + `</span>
                                                    </p>
                                                </th>
                                            </tr>
                                        </div>
                                    </tbody>
                                </table>`;
                                $("#isi_panel").html(content)
                                
                                


                            }
                        })
                        console.log('Selected ' + selectedEntity.name);
                    } else {
                        console.log('Unknown entity selected.');
                    }
                } else {
                    console.log('Deselected.');
                }
            });

        } else {
            //map_cesium.entities.removeAll();
            //map_cesium.destroy();
            setTimeout(function() {
                map.invalidateSize();
            }, 1000);
            $("#map").css('display', 'block');
            $("#map-cesium").css('display', 'none');
        }
    }
//3d end

//klik kanan begin
    map.on('contextmenu', function(e) {
    $("#map-create").remove();

    // document.getElementsByClassName('leaflet-popup-content').style.width = "550px";
    var popup = L.popup()
        .setLatLng(e.latlng)
        .setContent(`
        <div class="tab-pane has-padding" id="panel-tab2">
            <div class="tab-pane" id="bottom-justified-data">

                <div class="tabbable" style="overflow:auto;height:450px!important;width: 450px!important;">
                    <ul class="nav nav-tabs nav-tabs-bottom nav-justified">
                        <li onclick="changetabs(this)" class="active"><a href="#right-tab2-feas-upl" data-toggle="tab">Koordinat</a></li>
                        <li onclick="changetabs(this)"><a href="#left-tab1-feas-upl" data-toggle="tab">Informasi Umum</a></li>
                    </ul>

                    <div class="tab-content">

                        <div class="tab-pane active" id="right-tab2-feas-upl">
                            <div class="form-group">
                                <div id="map-create" style="height: 250px;">
                                    <input type="button" id="create" value="Create" style="z-index: 1000;position:relative;">
                                </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=""required>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="tab-pane" id="left-tab1-feas-upl">

                            <div class="modal-body" style="overflow-y: auto;">

                                <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 Bangunan</label>
                                        <div class="col-lg-9">
                                            <input id="name_create" type="text" class="form-control" value=""required>    
                                        </div>  
                                    </div>
                                </div>

                                <div class="row" style="margin-top: 15px;">
                                    <div class="form-group">
                                        <label class="col-lg-3 control-label lbl-top" style="margin-top: 15px;">Informasi Bangunan</label>
                                        <div class="col-lg-9">
                                            <input id="info_create" type="text" class="form-control" value="" placeholder="Rumah/Gedung/Ruko/Pabrik/dsb"required>    
                                        </div>  
                                    </div>
                                </div>

                                <div class="row" style="margin-top: 15px;">
                                    <div class="form-group">
                                        <label class="col-lg-3 control-label lbl-top" style="margin-top: 15px;">Alamat</label>
                                        <div class="col-lg-9">
                                            <input id="alamat_create" type="text" class="form-control" value="" placeholder="cth : Jl. Contoh Rt 005/01 No.01" required>
                                        </div>
                                    </div>
                                </div>

                                <div class="row" style="margin-top: 15px;">
                                    <div class="form-group">
                                        <label class="col-lg-3 control-label lbl-top" style="margin-top: 15px;">Luas Bangunan</label>
                                        <div class="col-lg-6">
                                            <input id="luas_bangunan_create" type="text" class="form-control" value=""required>
                                        </div>
                                        <div class="col-lg-3">
                                            <select id="satuan_luas_bangunan" style="margin-top: 15px;">
                                                <option>m2</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <div class="row" style="margin-top: 15px;">
                                    <div class="form-group">
                                        <label class="col-lg-3 control-label lbl-top" style="margin-top: 15px;">Luas Tanah</label>
                                        <div class="col-lg-6">
                                            <input id="luas_tanah_create" type="text" class="form-control" value=""required>
                                        </div>
                                        <div class="col-lg-3">
                                            <select id="satuan_luas_tanah" style="margin-top: 15px;">
                                                <option>m2</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <div class="row" style="margin-top: 15px;">
                                    <div class="form-group">
                                        <label class="col-lg-3 control-label lbl-top" style="margin-top: 15px;">Tinggi Bangunan</label>
                                        <div class="col-lg-6">
                                            <input id="tinggi_bangunan_create" type="text" class="form-control" value=""required>
                                        </div>
                                        <div class="col-lg-3" style="margin-top: 15px;">m</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;">Jumlah Lantai</label>
                                        <div class="col-lg-9">
                                            <input id="lantai" type="text" class="form-control" value="" placeholder="Estimasi Per Lantai = 3m" required>
                                        </div>
                                    </div>
                                </div>
            
                                <div class="row" style="margin-top: 15px;">
                                    <div class="form-group">
                                        <label class="col-lg-3 control-label lbl-top" style="margin-top: 15px;">Pemilik</label>
                                        <div class="col-lg-9">
                                            <input id="pemilik_create" type="text" class="form-control" value="" placeholder="cth : Ali Budiman, S.Si."required>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <input type="button" class="btn btn-primary" id="create_save" value="SAVE" style="margin-right:30px;">
            </div>
            <input type="text" name="poly_create" class="hidden" id="poly_create" value="">
        </div>
        `)
        .openOn(map);

    map.openPopup(popup);

    var map_create = L.map('map-create', {
        editable: true,
        zoomControl: false,
        drawControl: true
    }).setView([e.latlng.lat, e.latlng.lng], 20.5);

    map_created = L.tileLayer('https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}', {
        maxZoom: 22,
        minZoom: 4,
    }).addTo(map_create);

    map_create.invalidateSize();

    $('#create').click(function() {

        polygonDraweredit.enable();
    });

    var Marker = {};
    var Poly = {};

    map_create.on(L.Draw.Event.CREATED, function(e) {
        var layer = e.layer;

        $("#poly_create").empty();

        var type = e.layerType;
        var layer = e.layer;

        var shape = layer.toGeoJSON();
        let geoShape = shape.geometry.coordinates[0];

        let kordinat = "";
        for (j in geoShape) {

            kordinat += geoShape[j][0] + ' ' + geoShape[j][1];

            if (j <= (geoShape.length - 2)) {
                kordinat += ', ';
            }
        }

        window.thisBaseDrawPolygonLayer = layer;

        $("#poly_create").val(JSON.stringify(kordinat));
    });

    polygon_options = {
        showArea: false,
        shapeOptions: {
            stroke: true,
            color: '#6e83f0',
            weight: 1.5,
            opacity: 2,
            fill: true,
            fillColor: null, //same as color by default
            fillOpacity: 0.3,
            clickable: true
        }
    }

    var polygonDraweredit = new L.Draw.Polygon(map_create, polygon_options);

    polygonDraweredit.on("click", function(event) {
        shapecoords.innerHTML = event.latlng.toString();
        map_create.fire("click", event); // Trigger a map click as well.
    });

    map_create.on('draw:created', function(e) {
        var type = e.layerType,
            layer = e.layer;

        var lay = layer.addTo(map_create);
        Poly = lay;
    });

});


$(document).on("click", "#create_save", function(e) {
    var polygin = $('#poly_create').val();
    var name_poly = $('#name_create').val();
    var info_poly = $('#info_create').val();
    var alamat_poly = $('#alamat_create').val();
    var lb_poly = $('#luas_bangunan_create').val();
    var lt_poly = $('#luas_tanah_create').val();
    var tb_poly = $('#tinggi_bangunan_create').val();
    var ltbang = $('#lantai').val();
    var mpu_poly = $('#pemilik_create').val();

    $.ajax({
        url: "{% url 'api:c_bangunan' %}",
        data: {
            'polygon': polygin,
            'name': name_poly,
            'info': info_poly,
            'alamat': alamat_poly,
            'lb': lb_poly,
            'lt': lt_poly,
            'tb': tb_poly,
            'ltb':ltbang,
            'pemilik': mpu_poly
        },
        dataType: 'json',
        // type: 'POST',
        // processData: false,
        // contentType: false,
        success: function(data) {
            let response = data
                if (response.status == 0) {
                    swal({
                        title: response.info,
                        text: response.data,
                        type: "success",
                        icon: "success",
                        confirmButtonColor: "#00BCD4"
                    })
                } else {
                    swal({
                        title: response.info,
                        text: response.data,
                        type: "warning",
                        icon: "error",
                        confirmButtonColor: "#00BCD4"
                    })

                }
            map.closePopup();
        }
    });
});
//klik kanan end

</script>