{% load static %} {% for group in user.groups.all %} {% if group.name == 'Dinas Pekerjaan Umum dan Penataan Ruang' %}
<style>
    #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_adm {
        display: block;
    }
    
    #btn_delete_adm {
        display: block;
    }
    
    .leaflet-popup {
        display: block;
    }
    
    #btn_detail_per_bang {
        display: block;
    }
    
    #btn_perbaikan_bangunan {
        display: block;
    }
    
    #btn_upload_tampak {
        display: block;
    }
</style>
{% elif group.name == 'Dinas Kependudukan dan Pencatatan Sipil' %}
<style>
    #btn_edit_kelurahan {
        display: block;
    }
</style>
{% elif group.name == 'Dinas Kesehatan' %}
<style>
    #btn_edit_rs {
        display: block;
    }
    
    #btn_edit_puskes {
        display: block;
    }
    
    #btn_edit_lk {
        display: block;
    }
</style>
{% elif group.name == 'Dinas Ketahanan Pangan' %}
<style>
    #btn_edit_tuplah {
        display: block;
    }
</style>
{% elif group.name == 'Dinas Lingkungan Hidup' %}
<style>
    #btn_edit_tuplah {
        display: block;
    }
    
    #btn_edit_bangunan {
        display: block;
    }
    
    #btn_delete_bangunan {
        display: block;
    }
    
    #btn_jalan {
        display: block;
    }
    
    #btn_edit_cb {
        display: block;
    }
    
    #btn_upload_tampak {
        display: block;
    }
    
    .leaflet-popup {
        display: block;
    }
</style>
{% elif group.name == 'Dinas Pariwisata dan Kebudayaan' %}
<style>
    #btn_edit_cb {
        display: block;
    }
</style>
{% elif group.name == 'Dinas Pemberdayaan Masyarakat Desa' %}
<style>
    #btn_edit_kelurahan {
        display: block;
    }
</style>
{% elif group.name == 'Dinas Pemberdayaan Perempuan dan PA' %}
<style>
    #btn_edit_kelurahan {
        display: block;
    }
</style>
{% elif group.name == 'Dinas Kearsipan dan Perpustakaan' %}
<style>
    #btn_edit_adm {
        display: block;
    }
</style>
{% elif group.name == 'Dinas Pendidikan' %}
<style>
    #btn_edit_sp {
        display: block;
    }
</style>
{% elif group.name == 'Dinas Perdagangan dan Perindustrian' %}
<style>
    #btn_edit_spbu {
        display: block;
    }
</style>
{% elif group.name == 'Dinas Perhubungan' %}
<style>
    #btn_edit_st {
        display: block;
    }
    
    #btn_edit_tr {
        display: block;
    }
</style>
{% elif group.name == 'Dinas Perikanan dan Peternakan' %}
<style>
    #btn_edit_tuplah {
        display: block;
    }
</style>
{% elif group.name == 'Dinas Pertanian' %}
<style>
    #btn_edit_tuplah {
        display: block;
    }
</style>
{% elif group.name == 'Dinas Perumahan dan Kawasan Permukiman' %}
<style>
    #btn_edit_tuplah {
        display: block;
    }
    
    #btn_edit_bangunan {
        display: block;
    }
    
    #btn_delete_bangunan {
        display: block;
    }
    
    #btn_upload_tampak {
        display: block;
    }
    
    .leaflet-popup {
        display: block;
    }
</style>
{% elif group.name == 'Dinas Sosial' %}
<style>
    #btn_edit_si {
        display: none;
    }
</style>
{% endif %}{% endfor %}
<script>
    //tes
    function panel_samp() {
        $("#panel-samping").addClass("move");
        $("#button_unhide_panel").addClass("move-btn");

    }

    var toggler = document.getElementsByClassName("ceret");
    var i;

    for (i = 0; i < toggler.length; i++) {
        toggler[i].addEventListener("click", function() {
            this.parentElement.querySelector(".nasted").classList.toggle("active");
            this.classList.toggle("ceret-down");
        });
    }


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


    var kelurahan = "{{ kelurahan }}".replace(/&#x27;/g, '"');
    var result_kel = JSON.parse("" + kelurahan + "")
    var geo_batas_kel = batas_desa_desa();

    function batas_desa_desa() {
        return L.geoJson(null, {
            style: function(feature) {
                return {
                    color: "#8E0B0B",
                    weight: 0.5,
                    opacity: 2,
                    fillcolor: "#F79997",
                    fillOpacity: 0.1
                };
            },
            onEachFeature: function(feature, layer) {
                layer.on({
                    click: function(e) {
                        $('#modal_detail_kelurahan').modal('show');

                        if (feature.administrasi.f9 == 'NONE') {
                            var path_img = "static/img/image_null.png"
                        } else {
                            var path_img = `"static/image/kelurahan/` + feature.administrasi.f9 + `"`
                        }

                        $(".gambar_kelurahan").html(`<img src="` + path_img + `" alt="" style="width:360px;height:290px;border-top-left-radius: 10px;">`)

                        $(".nama_kelurahan").html(feature.administrasi.f2 + ` , ` + feature.administrasi.f3 + `, ` + feature.administrasi.f4)

                        $(".kode_kelurahan").html(feature.administrasi.f1)
                        $(".jumlah_penduduk_kelurahan").html(feature.administrasi.f6)
                        $(".luas_wilayah_kelurahan").html(feature.administrasi.f10)
                        $(".jumlah_kk_kelurahan").html(feature.administrasi.f7)
                        $(".tombol-edit").html(`<a href="/editkelurahan?kode_dagri=` + encodeURIComponent(feature.administrasi.f1) + `" class='btn'>Edit</a>`)


                        var nama_data_penduduk = ['pria', 'wanita', 'belum_kawin', 'kawin', 'cerai_hidup', 'cerai_mati', 'wajib_ktp'];
                        var dataset_penduduk = [feature.penduduk.f1, feature.penduduk.f2, feature.penduduk.f3, feature.penduduk.f4, feature.penduduk.f5, feature.penduduk.f6, feature.penduduk.f7];

                        var nama_data_agama = ['islam', 'kristen', 'khatolik', 'hindu', 'budha', 'konghucu', 'kepercayaan_lain', ]
                        var dataset_agama = [feature.penduduk.f8, feature.penduduk.f9, feature.penduduk.f10, feature.penduduk.f11, feature.penduduk.f12, feature.penduduk.f13, feature.penduduk.f14]

                        var nama_data_pendidik = ['tidak_sekolah', 'belum_tamat', 'tamat_sd', 'sltp', 'slta', 'diploma_i', 'diploma_ii', 'diploma_iv', 'strata_ii', 'strata_iii'];
                        var dataset_pendidik = [feature.pekerjaan_pendidikan.f1, feature.pekerjaan_pendidikan.f2, feature.pekerjaan_pendidikan.f3, feature.pekerjaan_pendidikan.f4, feature.pekerjaan_pendidikan.f5, feature.pekerjaan_pendidikan.f6, feature.pekerjaan_pendidikan.f7, feature.pekerjaan_pendidikan.f8, feature.pekerjaan_pendidikan.f9, feature.pekerjaan_pendidikan.f10];


                        var nama_data_umur = ['Umur 0-4', 'Umur 5-9', 'Umur 10-14', 'Umur 15-19', 'Umur 20-24', 'Umur 25-29', 'Umur 30-34', 'Umur 35-39', 'Umur 40-44', 'Umur 45-49', 'Umur 50-54', 'Umur 55-59', 'Umur 60-64', 'Umur 65-69', 'Umur 70-74', 'Umur > 75'];
                        var dataset_umur = [feature.penduduk.f16, feature.penduduk.f17, feature.penduduk.f18, feature.penduduk.f19, feature.penduduk.f20, feature.penduduk.f21, feature.penduduk.f22, feature.penduduk.f23, feature.penduduk.f24, feature.penduduk.f25, feature.penduduk.f26, feature.penduduk.f27, feature.penduduk.f28, feature.penduduk.f29, feature.penduduk.f30];


                        var nama_data_pekerja = ['tidak_bekerja', 'aparatur_pemerintah', 'tenaga_pendidik', 'wiraswasta', 'pertanian', 'tenaga_kesehatan', 'pegawai', 'dokter', 'bidan', 'perawat', 'lainnya'];
                        var dataset_pekerja = [feature.pekerjaan_pendidikan.f11, feature.pekerjaan_pendidikan.f12, feature.pekerjaan_pendidikan.f13, feature.pekerjaan_pendidikan.f14, feature.pekerjaan_pendidikan.f15, feature.pekerjaan_pendidikan.f16, feature.pekerjaan_pendidikan.f18, feature.pekerjaan_pendidikan.f40, feature.pekerjaan_pendidikan.f41, feature.pekerjaan_pendidikan.f42, feature.pekerjaan_pendidikan.f45];

                        var colorPalette = ['#00D8B6', '#008FFB', '#FEB019', '#FF4560', '#775DD0']

                        var options_penduduk = {

                            series: [{
                                name: 'Penduduk',
                                data: dataset_penduduk
                            }],
                            chart: {
                                type: 'bar',
                                height: 350,
                                toolbar: {
                                    tools: {
                                        download: '<div style="margin-left: 25px;"><i class=" icon-download4"></i><span>&nbsp;&nbsp; Download</span></div>',
                                    }
                                }
                            },
                            plotOptions: {
                                bar: {
                                    horizontal: false,
                                    columnWidth: '55%',
                                    endingShape: 'rounded'
                                },
                            },
                            dataLabels: {
                                enabled: false
                            },
                            stroke: {
                                show: true,
                                width: 2,
                                colors: ['transparent']
                            },
                            xaxis: {
                                categories: nama_data_penduduk,
                            },
                            yaxis: {
                                title: {
                                    text: 'Jumlah'
                                },
                                show: true
                            },
                            fill: {
                                type: 'gradient',
                                gradient: {
                                    type: "vertical",
                                    shadeIntensity: 1,
                                    opacityFrom: 0.7,
                                    opacityTo: 0.9,
                                    colorStops: [{
                                        offset: 0,
                                        color: "#6BB8FF",
                                        opacity: 1
                                    }, {
                                        offset: 20,
                                        color: "#6BB8FF",
                                        opacity: 1
                                    }, {
                                        offset: 60,
                                        color: "#7282D8",
                                        opacity: 1
                                    }, {
                                        offset: 100,
                                        color: "#7282D8",
                                        opacity: 1
                                    }]
                                }
                            },
                            tooltip: {
                                y: {
                                    formatter: function(val) {
                                        var reverse = val.toString().split('').reverse().join(''),
                                            ribuan = reverse.match(/\d{1,3}/g);
                                        var ribuan = ribuan.join('.').split('').reverse().join('');
                                        return ribuan
                                    }
                                }
                            }
                        };

                        var options_agama = {
                            series: [{
                                name: 'Agama',
                                data: dataset_agama
                            }],
                            chart: {
                                type: 'bar',
                                height: 350,
                                toolbar: {
                                    tools: {
                                        download: '<div style="margin-left: 25px;"><i class=" icon-download4"></i><span>&nbsp;&nbsp; Download</span></div>',
                                    }
                                }

                            },
                            plotOptions: {
                                bar: {
                                    horizontal: false,
                                    columnWidth: '55%',
                                    endingShape: 'rounded'
                                },
                            },
                            dataLabels: {
                                enabled: false
                            },
                            stroke: {
                                show: true,
                                width: 2,
                                colors: ['transparent']
                            },
                            xaxis: {
                                categories: nama_data_agama,
                            },
                            yaxis: {
                                title: {
                                    text: 'Jumlah'
                                },
                                show: true
                            },
                            fill: {
                                type: 'gradient',
                                gradient: {
                                    type: "vertical",
                                    shadeIntensity: 1,
                                    opacityFrom: 0.7,
                                    opacityTo: 0.9,
                                    colorStops: [{
                                        offset: 0,
                                        color: "#6BB8FF",
                                        opacity: 1
                                    }, {
                                        offset: 20,
                                        color: "#6BB8FF",
                                        opacity: 1
                                    }, {
                                        offset: 60,
                                        color: "#7282D8",
                                        opacity: 1
                                    }, {
                                        offset: 100,
                                        color: "#7282D8",
                                        opacity: 1
                                    }]
                                }

                            },
                            tooltip: {
                                y: {
                                    formatter: function(val) {
                                        var reverse = val.toString().split('').reverse().join(''),
                                            ribuan = reverse.match(/\d{1,3}/g);
                                        var ribuan = ribuan.join('.').split('').reverse().join('');
                                        return ribuan
                                    }
                                }
                            }
                        };

                        var options_pendidik = {
                            series: [{
                                name: 'Informasi Pendidikan',
                                data: dataset_pendidik
                            }],
                            chart: {
                                type: 'bar',
                                height: 350,
                                toolbar: {
                                    tools: {
                                        download: '<div style="margin-left: 25px;"><i class=" icon-download4"></i><span>&nbsp;&nbsp; Download</span></div>',
                                    }
                                }

                            },
                            plotOptions: {
                                bar: {
                                    horizontal: false,
                                    columnWidth: '55%',
                                    endingShape: 'rounded'
                                },
                            },
                            dataLabels: {
                                enabled: false
                            },
                            stroke: {
                                show: true,
                                width: 2,
                                colors: ['transparent']
                            },
                            xaxis: {
                                categories: nama_data_pendidik,
                            },
                            yaxis: {
                                title: {
                                    text: 'Jumlah'
                                },
                                show: true
                            },
                            fill: {
                                type: 'gradient',
                                gradient: {
                                    type: "vertical",
                                    shadeIntensity: 1,
                                    opacityFrom: 0.7,
                                    opacityTo: 0.9,
                                    colorStops: [{
                                        offset: 0,
                                        color: "#6BB8FF",
                                        opacity: 1
                                    }, {
                                        offset: 20,
                                        color: "#6BB8FF",
                                        opacity: 1
                                    }, {
                                        offset: 60,
                                        color: "#7282D8",
                                        opacity: 1
                                    }, {
                                        offset: 100,
                                        color: "#7282D8",
                                        opacity: 1
                                    }]
                                }

                            },
                            tooltip: {
                                y: {
                                    formatter: function(val) {
                                        var reverse = val.toString().split('').reverse().join(''),
                                            ribuan = reverse.match(/\d{1,3}/g);
                                        var ribuan = ribuan.join('.').split('').reverse().join('');
                                        return ribuan
                                    }
                                }
                            }
                        };

                        var options_umur = {
                            series: [{
                                name: 'Umur',
                                data: dataset_umur
                            }],
                            chart: {
                                type: 'bar',
                                height: 350,
                                toolbar: {
                                    tools: {
                                        download: '<div style="margin-left: 25px;"><i class=" icon-download4"></i><span>&nbsp;&nbsp; Download</span></div>',
                                    }
                                }

                            },
                            plotOptions: {
                                bar: {
                                    horizontal: true,
                                    columnWidth: '55%',
                                    endingShape: 'rounded'
                                },
                            },
                            dataLabels: {
                                enabled: false
                            },
                            stroke: {
                                show: true,
                                width: 2,
                                colors: ['transparent']
                            },
                            xaxis: {
                                categories: nama_data_umur,
                            },
                            yaxis: {
                                title: {
                                    text: 'Jumlah'
                                },
                                show: true
                            },
                            fill: {
                                type: 'gradient',
                                gradient: {
                                    type: "horizontal",
                                    shadeIntensity: 1,
                                    opacityFrom: 0.7,
                                    opacityTo: 0.9,
                                    colorStops: [{
                                        offset: 0,
                                        color: "#6BB8FF",
                                        opacity: 1
                                    }, {
                                        offset: 20,
                                        color: "#6BB8FF",
                                        opacity: 1
                                    }, {
                                        offset: 60,
                                        color: "#7282D8",
                                        opacity: 1
                                    }, {
                                        offset: 100,
                                        color: "#7282D8",
                                        opacity: 1
                                    }]
                                }

                            },
                            tooltip: {
                                y: {
                                    formatter: function(val) {
                                        var reverse = val.toString().split('').reverse().join(''),
                                            ribuan = reverse.match(/\d{1,3}/g);
                                        var ribuan = ribuan.join('.').split('').reverse().join('');
                                        return ribuan
                                    }
                                }
                            }
                        };

                        var options_pekerja = {
                            series: [{
                                name: 'Informasi Pekerjaan',
                                data: dataset_pekerja
                            }],
                            chart: {
                                type: 'bar',
                                height: 350,
                                toolbar: {
                                    tools: {
                                        download: '<div style="margin-left: 25px;"><i class=" icon-download4"></i><span>&nbsp;&nbsp; Download</span></div>',
                                    }
                                }

                            },
                            plotOptions: {
                                bar: {
                                    borderRadius: 4,
                                    horizontal: true,
                                },
                            },
                            dataLabels: {
                                enabled: false
                            },
                            xaxis: {
                                categories: nama_data_pekerja,
                            },
                            fill: {
                                type: 'gradient',
                                gradient: {
                                    type: "horizontal",
                                    shadeIntensity: 1,
                                    opacityFrom: 0.7,
                                    opacityTo: 0.9,
                                    colorStops: [{
                                        offset: 0,
                                        color: "#6BB8FF",
                                        opacity: 1
                                    }, {
                                        offset: 20,
                                        color: "#6BB8FF",
                                        opacity: 1
                                    }, {
                                        offset: 60,
                                        color: "#7282D8",
                                        opacity: 1
                                    }, {
                                        offset: 100,
                                        color: "#7282D8",
                                        opacity: 1
                                    }]
                                }

                            },
                            tooltip: {
                                y: {
                                    formatter: function(val) {
                                        var reverse = val.toString().split('').reverse().join(''),
                                            ribuan = reverse.match(/\d{1,3}/g);
                                        var ribuan = ribuan.join('.').split('').reverse().join('');
                                        return ribuan
                                    }
                                }
                            }
                        };

                        var chart_penduduk = new ApexCharts(document.querySelector("#info_penduduk"), options_penduduk);

                        setTimeout(function() {
                            chart_penduduk.render();
                        }, 100);


                        var chart_pendidik = new ApexCharts(document.querySelector("#info_pendidik"), options_pendidik);
                        setTimeout(function() {
                            chart_pendidik.render();

                        }, 100);
                        var chart_umur = new ApexCharts(document.querySelector("#info_umur"), options_umur);
                        setTimeout(function() {
                            chart_umur.render();
                        }, 100);
                        var chart_pekerja = new ApexCharts(document.querySelector("#info_pekerjaan"), options_pekerja);
                        setTimeout(function() {
                            chart_pekerja.render();
                        }, 100);
                        var chart_agama = new ApexCharts(document.querySelector("#info_agama"), options_agama);
                        setTimeout(function() {
                            chart_agama.render();
                        }, 100);




                    },
                    mouseover: function(e) {
                        var info_foot = `
                        <div class="col-xs-12">
                            <div class="row">
                            <div class="col-md-5" style="min-width: 300px;">
                                <div class="form-group">
                                    <div>
                                        <table>
                                            <tr>
                                                <th>Kode Desa</th>
                                                <td>:&nbsp` + feature.administrasi.f1 + `</td>
                                            </tr>
                                            <tr>
                                                <th>Desa/Kelurahan</th>
                                                <td>:&nbsp` + feature.administrasi.f2 + `</td>
                                            </tr>
                                            <tr>
                                                <th>Kecamatan</th>
                                                <td>:&nbsp` + feature.administrasi.f3 + `</td>
                                            </tr>
                                            <tr>
                                                <th>Kabupaten/Kota</th>
                                                <td>:&nbsp` + feature.administrasi.f4 + `</td>
                                            </tr>
                                            <tr>
                                                <th>Provinsi</th>
                                                <td>:&nbsp` + feature.administrasi.f5 + `</td>
                                            </tr>
                                            <tr>
                                                <th>Luas Wilayah</th>
                                                <td>:&nbsp` + feature.administrasi.f10 + `</td>
                                            </tr>
                                        </table>
                                    </div>
                
                                </div>
                            </div>
                            <div class="col-md-4" style="min-width: 150px;">
                                <div class="form-group">
                                    <table>

                                        <tr>
                                            <th>Jumlah Penduduk</th>
                                            <td>:&nbsp` + feature.administrasi.f6 + `</td>
                                        </tr>
                                        <tr>
                                            <th>Jumlah KK</th>
                                            <td>:&nbsp` + feature.administrasi.f7 + `</td>
                                        </tr>
                                        <tr>
                                            <th>Jumlah Laki-laki</th>
                                            <td>:&nbsp` + feature.penduduk.f1 + `</td>
                                        </tr>
                                        <tr>
                                            <th>Jumlah Perempuan</th>
                                            <td>:&nbsp` + feature.penduduk.f2 + `</td>
                                        </tr>
                                        <tr>
                                        <tr>
                                            <th>Jumlah Puskesmas</th>
                                            <td>:&nbsp` + feature.poi.f1 + `</td>
                                        </tr>
                                        <tr>
                                            <th>Jumlah Sekolah</th>
                                            <td>:&nbsp` + feature.poi.f2 + `</td>
                                        </tr>
                                        <tr>
                                            <th>Jumlah Sarana Ibadah</th>
                                            <td>:&nbsp` + feature.poi.f3 + `</td>
                                        </tr>
                                        <tr>

                                    </table>
                                </div>
                            </div>
                            <div class="" style="min-width: 150px;padding-left:50px;bottom:-128px">
                                <i><b>
                                Sumber : DUKCAPIL, 2019
                                </b></i>
                
                            </div>
                            </div>
                        </div>`;
                        $('#info-footer').html(info_foot)
                        var layer = e.target;
                        layer.setStyle({
                            weight: 0.5,
                            Color: "#067800",
                            fillColor: "#067800",

                        });
                        if (!L.Browser.ie && !L.Browser.opera) {
                            layer.bringToFront();
                        }

                    },
                    mouseout: function(e) {
                        geo_batas_kel.resetStyle(e.target);
                    }
                });

            }
        });
    };
    // $(document).on("click", "#btn_edit_kelurahan", function() {

    //     var map_kel = L.map('map-kelurahan', {
    //         editable: true,
    //         zoomControl: false,
    //         drawControl: true
    //     }).setView([-4.125826277307029, 104.1881561279297], 10);

    //     mapxxx = L.tileLayer('https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}&s=Gal&apistyle=s.t:0|s.e:l|p.v:off', {
    //         maxZoom: 22,
    //         minZoom: 4,
    //     }).addTo(map_kel);

    //     $("#edit_kelurahan").css("display", "block")
    //     var id = $("#kode_desa_dagri").val()

    //     setTimeout(function() {
    //         map_kel.invalidateSize();
    //     }, 1000);

    //     $.ajax({
    //         url: "{% url 'apps:editkelurahan'%}",
    //         data: {
    //             'kode_dagri': id
    //         },
    //         dataType: 'json',
    //         success: function(data) {

    //             var ket_kel = ['kodekelurahan', 'kelurahan', 'kecamatan', 'kabupaten', 'provinsi', 'jumlahpenduduk', 'jumlahkk', 'luasdesa']

    //             var ket_penduduk = ['jumlahlakilaki', 'jumlahperempuan', 'belumkawin', 'kawin', 'ceraihidup', 'ceraimati', 'wajibktp', 'islam', 'kristen', 'katolik', 'hindu', 'budha', 'konghucu', 'kepercayaanlain', 'u0', 'u5', 'u10', 'u15', 'u20', 'u25', 'u30', 'u35', 'u40', 'u45', 'u50', 'u55', 'u60', 'u65', 'u70', 'u75']

    //             var ket_pendidik = ['tidaksekolah', 'belumtamat', 'tamatsd', 'tamatsltp', 'tamatslta', 'diplomai', 'diplomaiii', 'diplomaiv', 'strataii', 'strataiii', 'tidakbekerja', 'aparaturpemerintah', 'tenagapendidik', 'wiraswasta', 'pertanian', 'tenagakesehatan', 'pensiunan', 'pegawai', 'tentara', 'kepolisian', 'dosen', 'guru', 'pilot', 'pedagang', 'petani', 'peternak', 'nelayan', 'karyawan', 'buruh', 'pembantu', 'tukang', 'pendeta', 'pastor', 'ustadz', 'pengacara', 'notaris', 'arsitek', 'akuntan', 'dokter', 'bidan', 'perawat', 'psikiater', 'sopir', 'lainnya']

    //             var result_kelurahan = data.result_poly.administrasi;
    //             var result_penduduk = data.result_poly.penduduk;
    //             var result_pend_pekerja = data.result_poly.pekerjaan_pendidikan;
    //             var result_poi = data.result_poly.poi;

    //             for (var i = 0; i < result_kelurahan.length; i++) {
    //                 $("#" + ket_kel[i] + "").val(result_kelurahan[i])
    //             }
    //             for (var i = 0; i < result_penduduk.length; i++) {
    //                 $("#" + ket_penduduk[i] + "").val(result_penduduk[i])
    //             }
    //             for (var i = 0; i < result_pend_pekerja.length; i++) {
    //                 $("#" + ket_pendidik[i] + "").val(result_pend_pekerja[i])
    //             }

    //             var poldit = data.result_poly;

    //             map_kel.setView([data.avg_lo, data.avg_la], 12);
    //             //
    //             let lop_poly_edit = poldit['geometry']['coordinates'][0][0];
    //             let list_poly_edit = [];
    //             for (var i = 0; i < lop_poly_edit.length; i++) {
    //                 geoj = lop_poly_edit[i][0];
    //                 polygigi = [lop_poly_edit[i][1], lop_poly_edit[i][0]]
    //                 list_poly_edit.push(polygigi);
    //             };

    //             var polygon_kel = L.polygon(list_poly_edit).addTo(map_kel)

    //             polygon_kel.enableEdit();

    //             var hasil = (JSON.stringify(polygon_kel.toGeoJSON()))
    //             $("#coordinatekel").val(hasil)
    //         }
    //     })
    // });

    map.on('zoomend', function() {
        var zoom = map.getZoom();


        if (map.hasLayer(geo_batas_kel)) {
            geo_batas_kel.eachLayer(function(layer) {
                if (zoom >= 13 && (!layer.getTooltip())) {

                    layer.bindTooltip(layer.feature.administrasi.f2, {
                        sticky: true,
                        permanent: true,
                        interactive: false,
                        direction: 'center',
                        className: 'label-desa'
                    });
                } else if (zoom < 13 && (layer.getTooltip())) {
                    //console.log('remove tooltip');
                    layer.unbindTooltip();
                }
            });
        }

        if (map.hasLayer(geo_batas_kec)) {
            geo_batas_kec.eachLayer(function(layer) {
                if (zoom >= 11 && (!layer.getTooltip())) {

                    layer.bindTooltip(`KEC. ` + layer.feature.administrasi.f2, {
                        sticky: true,
                        permanent: true,
                        interactive: false,
                        direction: 'center',
                        className: 'label-kec'
                    });
                } else if (zoom < 11 && (layer.getTooltip())) {
                    layer.unbindTooltip();
                }
            });
        }

    });




    var geo_batas_kec = L.geoJson(null, {
        style: function(feature) {
            return {
                color: "#08c96b",
                weight: 0.5,
                opacity: 1,
                fillcolor: "#98ff98",
                fillOpacity: 0.2
            };
        },
        onEachFeature: function(feature, layer) {
            layer.on({
                mouseover: function(e) {
                    var layer = e.target;
                    layer.setStyle({
                        weight: 0.5,
                        Color: "#067800",
                        fillColor: "#067800",

                    });
                    if (!L.Browser.ie && !L.Browser.opera) {
                        layer.bringToFront();
                    }

                },
                mouseout: function(e) {
                    geo_batas_kec.resetStyle(e.target);
                }
            });
        }
    });

    function geo_json_kel(data) {
        geo_batas_kel.addData(data)
    }

    function geo_json_kec(data) {
        geo_batas_kec.addData(data)
    }

    geo_json_kel(result_kel);
    //geo_json_jalan(result_jln)
    geo_json_kec(result_kec);

    function onEachFeature(feature, layer) {
        if (feature.properties && feature.properties.popupContent) {
            layer.bindPopup(feature.properties.popupContent);
        }
    }


    function batasdesa() {
        var checkBox = document.getElementById("batas_desa");
        if (checkBox.checked == true) {
            geo_batas_kel.addTo(map)
        } else {
            geo_batas_kel.remove()
        }
    }

    function bataskota() {
        var checkBox = document.getElementById("batas_kota");
        if (checkBox.checked == true) {
            geo_batas.addTo(map)
        } else {
            geo_batas.remove()
        }
    }

    function bataskec() {
        var checkBox = document.getElementById("batas_kec");
        if (checkBox.checked == true) {
            geo_batas_kec.addTo(map)
        } else {
            geo_batas_kec.remove()
        }
    }

    function batasall() {
        var checkBox = document.getElementById("batas_all");
        if (checkBox.checked == true) {
            document.getElementById("batas_kec").checked = true;
            document.getElementById("batas_kota").checked = true;
            document.getElementById("batas_desa").checked = true;
            geo_batas_kec.addTo(map)
            geo_batas.addTo(map)
            geo_batas_kel.addTo(map)
        } else {
            document.getElementById("batas_kec").checked = false;
            document.getElementById("batas_kota").checked = false;
            document.getElementById("batas_desa").checked = false;
            geo_batas_kec.remove()
            geo_batas_kel.remove()
            geo_batas.remove()
        }
    }

    var search_desa = batas_desa_desa();

    function geo_json_search(data) {
        search_desa.addData(data)
    }

    $("#search_desa").keyup(function() {
        var search = $(this).val();

        $.ajax({
            url: "{% url 'api:search'%}",
            data: {
                'namadesa': search
            },
            dataType: 'json',
            success: function(response) {

                var len = response['nama_des'].length;
                var data_de = []
                for (var i = 0; i < len; i++) {

                    var id = response['nama_des'][i][0];
                    var desa = response['nama_des'][i][1];
                    var kec = response['nama_des'][i][2];

                    var da = `<li value='` + desa + `,` + kec + `'>` + desa + `,` + kec + `</li>`;
                    data_de.push(da)
                }

                $("#searchResult").html(data_de);


                // binding click event to li
                $("#searchResult li").bind("click", function() {
                    setsearch(this);
                });

            }
        })

    });

    //3d begin


    function setsearch(element) {

        var value = $(element).text();
        var id = $(element).val();

        $("#search_desa").val(value);
        $("#searchResult").empty();

        $.ajax({
            url: "{% url 'api:ressearch' %}",
            data: {
                'id_desa_search': id
            },
            dataType: 'json',
            success: function(response) {

                console.log(response)
            }
        });
    }

    function overll() {
        $("#offsid").css('display', 'none');
        $("#sidebar").css('display', 'none');
        $("#sid").css('display', 'block');
    }

    function normalse() {
        $("#searchResult").css('display', 'none');
    }

    function resse() {
        $("#searchResult").css('display', 'block');
    }
    // NEW
    var legenda = ['Belukar',
        'Belukar Rawa',
        'Hutan Lahan Kering Primer',
        'Hutan Lahan Kering Sekunder',
        'Hutan Tanaman',
        'Pemukiman',
        'Perkebunan',
        'Pertambangan',
        'Pertanian Lahan Kering',
        'Pertanian Lahan Kering Campur',
        'Savana / Padang rumput',
        'Sawah',
        'Tanah Terbuka',
        'Transmigrasi'
    ];

    var color = ['#002400',
        '#424200',
        '#004200',
        '#009e00',
        '#00db00',
        '#ffff00',
        '#5cff5c',
        '#caa677',
        '#b9894b',
        '#C0C0C0',
        '#ffc65c',
        '#ece0cf',
        '#ff1fff',
        '#c2a500'
    ]

    var geo_tuplah = L.geoJson(null, {
        style: function(feature) {

            for (var i = 0; i < legenda.length; i++) {
                var leg = legenda[i]
                var warna = color[i]
                if (feature.legend.f2 == legenda[i]) {
                    return {
                        color: color[i],
                        weight: 0.5,
                        opacity: 2,
                        fillcolor: color[i],
                        fillOpacity: 5
                    };
                }
            }

        },
        onEachFeature: function(feature, layer) {
            layer.on({
                click: function(e) {
                    $("#modal_detail_non_kelurahan").modal("show")

                    if (feature.legend.f4 == 'NONE') {
                        var path_img = "static/img/image_null.png"
                    } else {
                        var path_img = `"static/image/tuplah/` + feature.legend.f4 + `"`
                    }

                    $(".gambar_keterangan").html(`<img src="` + path_img + `" alt="" style="width:100%;height:240px;border-top-left-radius: 10px;border-bottom-right-radius: 10px;">`)

                    $(".btn_action").html(`<div class="tombol-edit-keterangan text-center" style="
                    background-color: #5A9AFB;
                    position: absolute;
                    width: 40px;
                    height: 40px;
                    bottom: 2px;
                    right: 5px;
                    border: 1pt solid rosybrown;
                    border-radius: 8px;
                    ">
                            <a href="#" class="btn" id="btn_edit_tuplah" style="border-bottom-left-radius: 8px;border-top-right-radius: 8px;width: 100%;height: 100%;bottom: 0px;color: white;"><i class="icon-pencil5"></i></a>
                        </div>`)

                    $(".nama_keterangan").html(feature.legend.f2)

                    $(".isi_keterangan").html(`
                            <input type="text" name="idtuplah" id="idtuplah" class="hidden" value="">

                            <input type="text" name="coordinatetuplah" id="coordinatetuplah" class="hidden" value="">
                            <input type="text" name="luastuplah" id="lwastuplah" class="hidden" value="">
        
                            <div class="col-md-12">
                                <div>
                                    <div>
                                        <span>Jenis Lahan</span>
                                    </div>
                                    <div>
                                        <span>Null</span>
                                    </div>
                                </div>
                                <div>
                                    <div>
                                        <span>Luas Lahan</span>
                                    </div>
                                    <div>
                                        <span style="font-family: 'Roboto';">` + feature.legend.f3 + ` m2</span>
                                    </div>
                                </div>
                            </div>`)


                    $('#idtuplah').val(feature.legend.f1);
                    $('#lwastuplah').val(feature.legend.f3);

                    $("#coordinatetuplah").val(feature.geometry);
                    $("#button_hide_panel").css("display", "block");
                },
                mouseover: function(e) {
                    var layer = e.target;
                    layer.setStyle({
                        weight: 0.5,
                        fillOpacity: 0.5

                    });
                    if (!L.Browser.ie && !L.Browser.opera) {
                        layer.bringToFront();
                    }

                },
                mouseout: function(e) {
                    geo_tuplah.resetStyle(e.target);
                }

            });
        }
    });

    var geo_tuplah_edit = L.geoJson(null, {
        style: function(feature) {
            return {
                weight: 0.5,
                opacity: 2,
            };
        }
    });

    function geo_json_tuplah(data) {
        geo_tuplah.addData(data)
    }

    function geotuplah() {
        var checkBox = document.getElementById("geo_tuplah");
        if (checkBox.checked == true) {
            loaderPage(true);
            $.ajax({
                url: "{% url 'api:tuplah'%}",
                dataType: 'json',
                type: 'GET',
                success: function(response) {
                    loaderPage(false);
                    map.setView([-4.125826277307029, 104.1881561279297], 13);
                    var len = response['tuplah'].length;
                    var data_de = []
                    for (var i = 0; i < response['tuplah'].length; i++) {
                        geoj = response['tuplah'][i][0];
                        data_de.push(geoj);
                    }
                    geo_json_tuplah(data_de);
                }
            });

            $("#thisFooter").css('display', 'none');
            $("#legenda").css('display', 'block');
            geo_tuplah.addTo(map)
        } else {
            $("#button_unhide").css('display', 'block');
            $("#legenda").css('display', 'none');
            geo_tuplah.remove()
        }
    }


    var map_edit_tuplah = L.map('map-edit-tuplah', {
        editable: true,
        zoomControl: false,
        drawControl: true
    }).setView([-2, 118], 5);

    mapss = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
        maxZoom: 22,
        minZoom: 4,
    }).addTo(map_edit_tuplah);

    var polygon_edit_tuplah = L.polygon([
        [-4.1283969, 104.1674575],
        [-4.128396, 104.1674947],
        [-4.1284664, 104.1674964],
        [-4.1284674, 104.1674593],
        [-4.1283969, 104.1674575]
    ]).addTo(map_edit_tuplah)


    $(document).on("click", "#btn_edit_tuplah", function() {
        if (map_edit_tuplah.hasLayer(polygon_edit_tuplah)) {
            polygon_edit_tuplah.remove()
        }
        var id_poly = $('#idtuplah').val();

        var lwastup = $("#lwastuplah").val();

        $.ajax({
            url: "{% url 'api:edit-tuplah' %}",
            data: {
                'idtuplah': id_poly
            },
            dataType: 'json',
            success: function(data) {
                $("#modal-edit-tuplah").modal("show")
                $("#modal_detail_non_kelurahan").modal("toggle")
                loaderPage(false);
                $("#luas_tuplah_edit").val(lwastup);
                let response = data
                if (response.code == 0) {
                    setTimeout(function() {
                        map_edit_tuplah.invalidateSize();
                    }, 1000);

                    let lop_poly_edit = data['tuplah']['geometry']['coordinates'];
                    let list_poly_edit = [];
                    var latt = 0;
                    var longg = 0;
                    for (var i = 0; i < lop_poly_edit.length; i++) {
                        geoj = lop_poly_edit[i];

                        for (var i = 0; i < geoj.length; i++) {
                            polygigi = [geoj[i][1], geoj[i][0]]
                            list_poly_edit.push(polygigi);
                            latt += geoj[i][0]
                            longg += geoj[i][1]
                        }
                    };
                    var lattt = latt / list_poly_edit.length
                    var longgg = longg / list_poly_edit.length

                    map_edit_tuplah.setView([longgg, lattt], 14);

                    polygon_edit_tuplah = L.polygon(list_poly_edit).addTo(map_edit_tuplah)
                    polygon_edit_tuplah.enableEdit();
                    $('#btnsavetuplah').click(function() {
                        var hasil = (JSON.stringify(polygon_edit_tuplah.toGeoJSON()))
                        $("#coordinatetuplah").val(hasil);
                    })
                } else {
                    $("#modal-edit-tuplah").css('display', 'none');
                    swal({
                        title: response.info,
                        text: response.data,
                        type: "warning",
                        icon: "error",
                        confirmButtonColor: "#00BCD4"
                    })
                }
            },
        })



    });

    $(document).on("click", "#btnsavetuplah", function() {
        var id_poly = $('#idtuplah').val();
        var cord = $("#coordinatetuplah").val();

        var data = new FormData();
        data.append("file", $("input[id^='imgtuplah']")[0].files[0]);
        data.append("csrfmiddlewaretoken", "{{ csrf_token }}");

        data.append('idtuplah', id_poly)
        data.append('cord', cord)

        $.ajax({
            url: "{% url 'api:edit-tuplah-valid' %}",
            data: data,
            dataType: 'json',
            type: 'POST',
            processData: false,
            contentType: false,
            success: function(data) {

                loaderPage(false);
                let response = data;

                if (response.code == 0) {
                    swal({
                        title: response.info,
                        text: response.data,
                        type: "success",
                        icon: "success",
                        confirmButtonColor: "#00BCD4"
                    }, function() {
                        $("#modal-edit-tuplah").css('display', 'none');
                    })
                } else {
                    swal({
                        title: response.info,
                        text: response.data,
                        type: "warning",
                        icon: "error",
                        confirmButtonColor: "#00BCD4"
                    })

                }
            }
        })

    });

    // var geocodeService = L.esri.Geocoding.geocodeService();
    // var geocoderNominatim = new L.Control.Geocoder.Nominatim();

    // var geo_bangunan = L.geoJson(null, {
    //     style: function(feature) {
    //         return {
    //             color: "#ff0008",
    //             weight: 1,
    //             opacity: 2,
    //             zIndex: 1000
    //         };
    //     },

    //     onEachFeature: function(feature, layer) {
    //         if (feature.properties) {

    //             var lattitud, longitud;
    //             if (feature.geometry.type == 'MultiPolygon') {
    //                 lattitud = feature.geometry.coordinates[0][0][0][1];
    //                 longitud = feature.geometry.coordinates[0][0][0][0];

    //             } else {
    //                 lattitud = feature.geometry.coordinates[0][0][1];
    //                 longitud = feature.geometry.coordinates[0][0][0];
    //             };

    //             layer.on({
    //                 click: function(e) {
    //                     var geogeo = geocodeService.reverse().latlng(e.latlng).run(function(error, result) {

    //                         if (result.address.Address != '') {
    //                             var alamat = result.address.Address + `, `
    //                         } else {
    //                             var alamat = ''
    //                         };

    //                         if (feature.administrasi.f9 == 'None') {
    //                             var path_img = "static/img/image_null.jpg"
    //                         } else {
    //                             var path_img = `"static/image/bangunan/` + feature.administrasi.f9 + `"`
    //                         }

    //                         // var list_history = feature.properties.f7

    //                         // var list_history_panel = ``
    //                         //     for (var i = 0; i < list_history.length; i++) {
    //                         //         var dt_history = list_history[i].split(",");

    //                         //         var data_history = `<div class="form-group" style="margin-bottom:0px;">
    //                         //                                 <div class="row">
    //                         //                                     <label class="col-md-6">` + dt_history[1] + `</label>
    //                         //                                     <a class="col-md-3" onclick="getjalanper(` + dt_history[0] + `)"><i>View Ruas</i></a>
    //                         //                                     <a class="col-md-3" onclick="getdetailper(` + dt_history[0] + `)" data-toggle="modal" data-target="#modal_detail"><i>View Detail</i></a>
    //                         //                                 </div>
    //                         //                             </div>`;
    //                         //         list_history_panel += data_history
    //                         //     };

    //                         //     history = `<p class="text-center">
    //                         //                     History Perbaikan
    //                         //                 </p>
    //                         //                     <br>
    //                         //                     ` + list_history_panel + `
    //                         //                 <p class="text-center" style="margin-top: 10px;">
    //                         //                     <a href="#" id='btn_perbaikan_jalan' class="btn btn-default"><i>Tambah History Perbaikan</i></a>
    //                         //                 </p>`;

    //                         content_edit = `
    //                         <div class="modal-dialog" style="width: max-content;height: max-content;">
    //                             <div class="modal-content">
    //                                 <div class="modal-header bg-info" style="background-color:#40777c;">
    //                                     <button type="button" class="close" data-dismiss="modal">&times;</button>
    //                                     <h6 class="modal-title">Edit Polygon Bangunan dan Informasinya</h6>
    //                                 </div>
    //                                 <div class="modal-body" style="max-height: 450px;overflow-y: auto;">
    //                                     <div class="row">
    //                                         <div class="col-md-5">
    //                                             <div id="map-edit" style="width:400px;height: 350px;">
    //                                             </div>
    //                                         </div>
    //                                         <div class="col-md-4">
    //                                             <input type="text" class="hidden" name="coordinatebangunan" id="coordinatebangunan" value="`+feature.geometry+`">
    //                                             <table>
    //                                                 <tr>
    //                                                     <th>
    //                                                         Image
    //                                                     </th>
    //                                                     <td>
    //                                                         <input type="file" id="imgbangunan" name="images[]" multiple accept="image/jpg,image/png,image/jpeg,image/gif">
    //                                                         <input style="display:none;" id="gambar" type="text" class="form-control" value="`+feature.administrasi.f9+`"required>
    //                                                     </td>
    //                                                 </tr>
    //                                                 <tr>
    //                                                     <td>
    //                                                         <input type="text" name="idbangunan" id="idbangunan" class="form-control hidden" value="`+feature.properties.f1+`" disable>
    //                                                         <input style="display:none;" id="coordinateZoneeditbang" type="text" class="form-control" value=""required>
    //                                                     </td>
    //                                                 </tr>
    //                                                 <tr>
    //                                                     <th>Nama Bangunan</th>
    //                                                     <td>
    //                                                         <input type="text" name="namebangunan" id="namebangunan" class="form-control" value="`+feature.properties.f2+`">
    //                                                     </td>
    //                                                 </tr>
    //                                                 <tr>
    //                                                     <th>Informasi Bangunan</th>
    //                                                     <td>
    //                                                         <input type="text" name="infobangunan" id="infobangunan" class="form-control" value="`+feature.properties.f3+`">
    //                                                     </td>
    //                                                 </tr>
    //                                                 <tr>
    //                                                     <th>Kelurahan</th>
    //                                                     <td>
    //                                                         <input type=" text " name="nmkelurahan " id="nmkelurahan" class="form-control " value="`+feature.administrasi.f1+`">
    //                                                     </td>
    //                                                 </tr>
    //                                                 <tr>
    //                                                     <th>Kecamatan</th>
    //                                                     <td>
    //                                                         <input type="text " name="nmkecamatan " id="nmkecamatan" class="form-control " value="`+feature.administrasi.f2+`">
    //                                                     </td>
    //                                                 </tr>
    //                                                 <tr>
    //                                                     <th>Kab/Kota</th>
    //                                                     <td>
    //                                                         <input type="text " name="nmkabkota " id="nmkabkota" class="form-control " value="`+feature.administrasi.f3+`">
    //                                                     </td>
    //                                                 </tr>
    //                                                 <tr>
    //                                                     <th>Provinsi</th>
    //                                                     <td>
    //                                                         <input type="text " name="nmprovinsi " id="nmprovinsi" class="form-control " value="`+feature.administrasi.f4+`">
    //                                                     </td>
    //                                                 </tr>

    //                                             </table>
    //                                         </div>

    //                                         <div class="col-md-3 ">

    //                                             <table>
    //                                                 <tr>
    //                                                     <th>Luas Bangunan</th>
    //                                                     <td>
    //                                                         <input type="text " name="luasbangunan " id="luasbangunan" class="form-control " value="`+feature.administrasi.f6+`">
    //                                                     </td>
    //                                                 </tr>
    //                                                 <tr>
    //                                                     <th>Luas Tanah</th>
    //                                                     <td>
    //                                                         <input type="text " name="luastanah " id="luastanah" class="form-control " value="`+feature.administrasi.f7+`">
    //                                                     </td>
    //                                                 </tr>
    //                                                 <tr>
    //                                                     <th>Tinggi Bangunan</th>
    //                                                     <td>
    //                                                         <input type="text " name="tinggibangunan " id="tinggibangunan" class="form-control " value="`+feature.administrasi.f8+`">
    //                                                     </td>
    //                                                 </tr>
    //                                                 <tr>
    //                                                     <th>Pemilik</th>
    //                                                     <td>
    //                                                         <input type="text " name="pemilik " id="pemilik" class="form-control " value="`+feature.administrasi.f10+`">
    //                                                     </td>
    //                                                 </tr>
    //                                             </table>
    //                                         </div>
    //                                     </div>
    //                                 </div>

    //                                 <div class="modal-footer ">
    //                                     <button type="button " class="btn btn-link " data-dismiss="modal ">Close</button>
    //                                     <button type="button " id="btnsavebangunan" class="btn btn-info ">Save changes</button>
    //                                 </div>
    //                             </div>
    //                         </div>`;
    //                         content_delete=`
    //                         <div class="modal-dialog" style="width: max-content;height: max-content;">
    //                             <div class="modal-content">
    //                                 <div class="modal-header bg-info" style="background-color:#40777c;">
    //                                     <table>
    //                                         <tr>
    //                                             <th><h6 class="modal-title">Delete Bangunan dan Informasinya</h6></th>
    //                                             <td><button type="button" class="close" data-dismiss="modal">&times;</button></td>
    //                                         </tr>
    //                                     </table>
    //                                 </div>
    //                                 <div class="form-group" style="margin-bottom:10px;">
    //                                     <div id="map-delete" style="width: 300px;height: 250px;position: relative;margin-left: 10px;margin-right: 10px;margin-top: 10px;"></div>
    //                                     <div class="form-group">
    //                                         <div class="col-lg-12" style="margin-top:10px;margin-bottom:10px;">
    //                                             <input type="text" class="hidden" name="coordinatebangunan" id="coordinatebangunanhps" value="">
    //                                             <input type="text" name="idbangunan" id="idbangunanhps" class="form-control hidden" value="`+feature.properties.f1+`" disable>
    //                                             <input type="text" name="namebangunan" id="namebangunanhps" class="form-control" value="`+feature.properties.f2+`">
    //                                             <input type="text" name="infobangunan" id="infobangunanhps" class="form-control" value="`+feature.properties.f3+`">
    //                                         </div>
    //                                     </div>
    //                                 </div>

    //                                 <div class="modal-footer">
    //                                     <button type="button" id="btnsavedeletebangunan" class="btn btn-info">Hapus</button>
    //                                 </div>
    //                             </div>
    //                         </div>`;
    //                         content = `
    //                         <table class="table tasks-list">
    //                             <thead style="text-align: center;">
    //                                 <tr>
    //                                     <th style="padding: 0 0 0 0px;">
    //                                         <img src=` + path_img + ` alt="Image" style="width: 100%;max-height: 368px;height:368"> 
    //                                     </th>
    //                                 </tr>
    //                             </thead>
    //                             <tbody>
    //                                 <div class= "container">
    //                                     <tr style="height: 100px;">
    //                                         <th>
    //                                             <div>
    //                                                 <h1 style="font-family: Google Sans,Roboto,Arial,sans-serif;
    //                                                 letter-spacing: 0;
    //                                                 font-weight: 400;">
    //                                                     <span style="font-size: x-large;">
    //                                                         ` + feature.properties.f2 + `
    //                                                     </span>
    //                                                 </h1>
    //                                             </div>
    //                                         </th>
    //                                     </tr>
    //                                 </div>
    //                                 <div class= "container">
    //                                     <tr style="height: 30px;">
    //                                         <th>
    //                                             <span>
    //                                                 ` + feature.properties.f3 + `
    //                                             </span>
    //                                         </th>
    //                                     </tr>
    //                                 </div>
    //                                 <div class= "container">
    //                                     <tr style="height: 40px;">
    //                                         <th>
    //                                             <span>
    //                                                 ` + alamat + feature.administrasi.f1 + `, ` + feature.administrasi.f2 + `, ` + feature.administrasi.f3 + `, ` + feature.administrasi.f4 + `
    //                                             </span>
    //                                         </th>
    //                                     </tr>
    //                                 </div>
    //                                 <div class= "container">
    //                                     <tr style="height: 40px;">
    //                                         <th>
    //                                             <p>
    //                                                 <span>Luas Bangunan : ` + feature.administrasi.f6 + `</span>
    //                                             </p>
    //                                             <p>
    //                                                 <span>Luas Tanah : ` + feature.administrasi.f7 + `</span>
    //                                             </p>
    //                                             <p>
    //                                                 <span>Tinggi Bangunan : ` + feature.administrasi.f8 + `</span>
    //                                             </p>
    //                                             <p>
    //                                                 <span>Pemilik : ` + feature.administrasi.f10 + `</span>
    //                                             </p>
    //                                             <p class="text-center" style="margin-top: 25px;">
    //                                                 <a href="#" class="btn btn-default" data-toggle="modal" data-target="#modal_bangunan_edit" id="btn_edit_bangunan" data-backdrop="static" data-keyboard="false"><i>Edit Informasi Bangunan</i></a>
    //                                                 <a href="#" id='btn_delete_bangunan' class='btn 
    //                                                     btn-default btn_edit_bangunan' data-toggle="modal" data-target="#modal_bangunan_delete" data-backdrop="static" data-keyboard="false"><i>Delete Bangunan</i></a>
    //                                             </p>
    //                                         </th>
    //                                     </tr>
    //                                 </div>
    //                                 <div class="container">
    //                                     <tr style="height: 40px;">
    //                                         <th id="history_panel">
    //                                             ` + history + `
    //                                         </th>
    //                                     </tr>
    //                                 </div>
    //                             </tbody>
    //                         </table>`;
    //                         $("#isi_panel").html(content);
    //                         $("#modal_bangunan_edit").html(content_edit);
    //                         $("#modal_bangunan_delete").html(content_delete);
    //                     });
    //                     // $('#idbangunan').val(feature.properties.f1);
    //                     // $('#namebangunan').val(feature.properties.f2);
    //                     // $('#infobangunan').val(feature.properties.f3);

    //                     // $('#nmkelurahan').val(feature.administrasi.f1);
    //                     // $('#nmkecamatan').val(feature.administrasi.f2);
    //                     // $('#nmkabkota').val(feature.administrasi.f3);
    //                     // $('#nmprovinsi').val(feature.administrasi.f4);

    //                     // $('#luasbangunan').val(feature.administrasi.f6);
    //                     // $('#luastanah').val(feature.administrasi.f7);
    //                     // $('#tinggibangunan').val(feature.administrasi.f8);
    //                     // $('#pemilik').val(feature.administrasi.f10);
    //                     // $('#gambar').val(feature.administrasi.f9);

    //                     // $("#coordinatebangunan").val(feature.geometry);
    //                     $("#panel-samping").css("display", "block");
    //                     $("#button_hide_panel").css("display", "block");

    //                     // $('#idbangunanhps').val(feature.properties.f1);
    //                     // $('#namebangunanhps').val(feature.properties.f2);
    //                     // $('#infobangunanhps').val(feature.properties.f3);

    //                     panel_samp()
    //                 }
    //             });

    //             pool.push({
    //                 name: feature.properties.f2,
    //                 id: L.stamp(layer),
    //                 lat: lattitud,
    //                 lng: longitud
    //             });
    //         }
    //         layer.on({
    //             mouseover: function(e) {
    //                 var layer = e.target;
    //                 layer.setStyle({
    //                     weight: 1,
    //                     Color: "#067800",
    //                     fillColor: "#067800",

    //                 });
    //                 if (!L.Browser.ie && !L.Browser.opera) {
    //                     layer.bringToFront();
    //                 }
    //             },
    //             mouseout: function(e) {
    //                 geo_bangunan.resetStyle(e.target);
    //             }
    //         });
    //     }
    // });

    // function geo_json_bangunan(data) {
    //     geo_bangunan.addData(data)
    // }


    // var checkBox_building = document.getElementById("geo_building");
    // var checkBox_2d = document.getElementById("2d-maps");

    // map.on("movestart", function() {
    //     geo_bangunan.clearLayers();
    // });

    // map.on("moveend", function() {
    //     var wetan = map.getBounds().getEast();
    //     var kulon = map.getBounds().getWest();
    //     var lor = map.getBounds().getNorth()
    //     var kidul = map.getBounds().getSouth();
    //     var center = map.getBounds().getCenter();
    //     var zoom = map.getZoom();

    //     if (checkBox_building.checked == true || checkBox_2d.checked == true) {

    //         if (zoom > 17) {
    //             if (map.hasLayer(geo_bangunan)) {
    //                 geo_bangunan.clearLayers()
    //                 geo_bangunan.remove()
    //             }
    //             $.ajax({
    //                 url: "{% url 'api:building' %}",
    //                 data: {
    //                     'wetan': wetan,
    //                     'kulon': kulon,
    //                     'lor': lor,
    //                     'kidul': kidul
    //                 },
    //                 dataType: 'json',
    //                 success: function(data) {

    //                     let list_poly = [];
    //                     for (var i = 0; i < data['gen'].length; i++) {
    //                         geoj = data['gen'][i][0];
    //                         list_poly.push(geoj);
    //                     };
    //                     geo_json_bangunan(list_poly);
    //                 }
    //             });
    //         }

    //         geo_bangunan.addTo(map)
    //     } else {
    //         geo_bangunan.clearLayers();
    //         geo_bangunan.remove()
    //     }
    // });

    // var map_edit = new L.map('map-edit', {
    //     editable: true,
    //     zoomControl: false,
    //     drawControl: true
    // }).setView([-2, 118], 5);

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

    // var polylyly = L.polygon([
    //     [-4.1283969, 104.1674575],
    //     [-4.128396, 104.1674947],
    //     [-4.1284664, 104.1674964],
    //     [-4.1284674, 104.1674593],
    //     [-4.1283969, 104.1674575]
    // ]).addTo(map_edit)

    // $(document).on("click", "#btn_edit_bangunan", function() {
    //     if (map_edit.hasLayer(polylyly)) {
    //         polylyly.remove()
    //     }
    //     var id_poly = $('#idbangunan').val();
    //     loaderPage(true);

    //     $.ajax({
    //         url: "{% url 'api:edit' %}",
    //         data: {
    //             'id_poly': id_poly
    //         },
    //         dataType: 'json',
    //         success: function(data) {

    //             setTimeout(function() {
    //                 map_edit.invalidateSize();
    //             }, 1000);
    //             loaderPage(false);

    //             map_edit.setView([data['geometry']['coordinates'][0][0][0][1], data['geometry']['coordinates'][0][0][0][0]], 19);



    //             let lop_poly_edit = data['geometry']['coordinates'][0][0];
    //             let list_poly_edit = [];
    //             for (var i = 0; i < lop_poly_edit.length; i++) {
    //                 geoj = lop_poly_edit[i][0];
    //                 polygigi = [lop_poly_edit[i][1], lop_poly_edit[i][0]]
    //                 list_poly_edit.push(polygigi);
    //             };

    //             polylyly = L.polygon(list_poly_edit).addTo(map_edit)
    //             polylyly.enableEdit();
    //             var hasil = (JSON.stringify(polyly.toGeoJSON()))
    //             $('#btnsavebangunan').click(function() {
    //                 var hasil = (JSON.stringify(polylyly.toGeoJSON()))
    //                 $("#coordinatebangunan").val(hasil);
    //             })
    //         }
    //     })
    // });

    // $(document).on("click", "#btnsavebangunan", function() {
    //     var data = new FormData();
    //     data.append("file", $("input[id^='imgbangunan']")[0].files[0]);
    //     data.append("csrfmiddlewaretoken", "{{ csrf_token }}");
    //     data.append('name_b', $('#namebangunan').val())
    //     data.append('polygon', $('#coordinatebangunan').val())
    //     data.append('info_b', $('#infobangunan').val())
    //     data.append('desa_b', $('#nmkelurahan').val())
    //     data.append('kec_b', $('#nmkecamatan').val())
    //     data.append('kab_b', $('#nmkabkota').val())
    //     data.append('pro_b', $('#nmprovinsi').val())
    //     data.append('id_poly', $('#idbangunan').val())
    //     data.append('gambar', $('#gambar').val())

    //     data.append('luasbangunan', $('#luasbangunan').val())
    //     data.append('luastanah', $('#luastanah').val())
    //     data.append('tinggibangunan', $('#tinggibangunan').val())
    //     data.append('pemilik', $('#pemilik').val())

    //     $.ajax({
    //         url: "{% url 'api:validatedit' %}",
    //         data: data,
    //         dataType: 'json',
    //         type: 'POST',
    //         processData: false,
    //         contentType: false,
    //         success: function(data) {
    //             let response = data
    //             if (response.code == 0) {
    //                 swal({
    //                     title: response.info,
    //                     text: response.data,
    //                     type: "success",
    //                     icon: "success",
    //                     confirmButtonColor: "#00BCD4"
    //                 }, function() {
    //                     $("#modal_bangunan_edit").css('display', 'none');
    //                 })
    //             } else {
    //                 swal({
    //                     title: response.info,
    //                     text: response.data,
    //                     type: "warning",
    //                     icon: "error",
    //                     confirmButtonColor: "#00BCD4"
    //                 })

    //             }
    //         }
    //     })

    // });

    // $(document).on("click", "#btn_delete_bangunan", function() {
    //     var map_delete = new L.map('map-delete', {
    //         editable: true,
    //         zoomControl: false,
    //         drawControl: true
    //     }).setView([-2, 118], 5);

    //     mapss = L.tileLayer('https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}', {
    //         maxZoom: 22,
    //         minZoom: 4,
    //     }).addTo(map_delete);
    //     var id_polyhps = $('#idbangunanhps').val();
    //     // console.log(id_polyhps)
    //     loaderPage(true);

    //     $.ajax({
    //         url: "{% url 'api:edit' %}",
    //         data: {
    //             'id_poly': id_polyhps
    //         },
    //         dataType: 'json',
    //         success: function(data) {

    //             setTimeout(function() {
    //                 map_delete.invalidateSize();
    //             }, 1000);
    //             loaderPage(false);

    //             map_delete.setView([data['geometry']['coordinates'][0][0][0][1], data['geometry']['coordinates'][0][0][0][0]], 19);

    //             let lop_poly_edit = data['geometry']['coordinates'][0][0];
    //             let list_poly_edit = [];
    //             for (var i = 0; i < lop_poly_edit.length; i++) {
    //                 geoj = lop_poly_edit[i][0];
    //                 polygigi = [lop_poly_edit[i][1], lop_poly_edit[i][0]]
    //                 list_poly_edit.push(polygigi);
    //             };

    //             var polyly = L.polygon(list_poly_edit).addTo(map_delete)
    //             $('#btnsavedeletebangunan').click(function() {
    //                 var hasil = (JSON.stringify(polyly.toGeoJSON()))
    //                 $("#coordinatebangunan").val(hasil);
    //             })
    //         }
    //     })
    // });

    // $(document).on("click", "#btnsavedeletebangunan", function() {

    //     var data = new FormData();
    //     data.append('id_poly', $('#idbangunan').val())

    //     $.ajax({
    //         url: "{% url 'api:hapus' %}",
    //         data: data,
    //         dataType: 'json',
    //         type: 'POST',
    //         processData: false,
    //         contentType: false,
    //         success: function(data) {
    //             let response = data
    //             if (response.code == 0) {
    //                 swal({
    //                     title: response.info,
    //                     text: response.data,
    //                     type: "success",
    //                     icon: "success",
    //                     confirmButtonColor: "#00BCD4"
    //                 }, function() {
    //                     $("#modal_bangunan_delete").css('display', 'none');
    //                 })
    //             } else {
    //                 swal({
    //                     title: 'Error',
    //                     text: 'Hubungi Mereka',
    //                     type: "warning",
    //                     icon: "error",
    //                     confirmButtonColor: "#00BCD4"
    //                 })
    //             }
    //         }
    //     })

    // });

    var geo_jalan = L.geoJson(null, {
        style: function(feature) {
            var zoom = map.getZoom()
            console.log(zoom)

            if (zoom < 18) {
                return {
                    color: "#808080",
                    weight: 8,
                    opacity: 2,
                    zIndex: 1000
                };
            } else if (zoom > 17 && zoom < 19) {
                return {
                    color: "#808080",
                    weight: 10,
                    opacity: 2,
                    zIndex: 1000
                };
            } else if (zoom > 18 && zoom < 20) {
                return {
                    color: "#808080",
                    weight: 20,
                    opacity: 2,
                    zIndex: 1000
                };
            } else if (zoom > 19 && zoom < 21) {
                return {
                    color: "#808080",
                    weight: 30,
                    opacity: 2,
                    zIndex: 1000
                };
            } else if (zoom > 20 && zoom < 22) {
                return {
                    color: "#808080",
                    weight: 50,
                    opacity: 2,
                    zIndex: 1000
                };
            } else if (zoom > 21 && zoom < 23) {

                return {
                    color: "#808080",
                    weight: 60,
                    opacity: 2,
                    zIndex: 1000
                };
            }
        },

        onEachFeature: function(feature, layer) {
            if (feature.properties) {
                layer.on({

                    click: function(e) {

                        $("#modal_detail_non_kelurahan").modal('show');

                        if (feature.properties.f2 == null) {
                            var namajalan = "unnamed"
                        }



                        if (feature.properties.f6 == 'None') {
                            var path_img = "static/img/image_null.png"
                        } else {
                            var path_img = `"static/image/jalan/` + feature.properties.f6 + `"`
                        }
                        $(".gambar_keterangan").html(`<img src="` + path_img + `" alt="" style="width:100%;height:240px;border-top-left-radius: 10px;border-bottom-left-radius: 10px;">`)

                        $(".nama_keterangan").html(namajalan)

                        $(".btn_action").html(`<div class="tombol-edit-keterangan text-center" style="background-color: #5A9AFB;position: absolute;width: 40px;height: 40px;bottom: 2px;right: 5px;border: 1pt solid rosybrown;border-radius: 8px;">
                            <a href="#" id="btn_jalan" class="btn" style="border-bottom-left-radius: 8px;border-top-right-radius: 8px;width: 100%;height: 100%;bottom: 0px;color: white;"><i class="icon-pencil5"></i></a>
                            </div>
                            <div class="tombol-delete-keterangan text-center" style="background-color: indianred;position: absolute;width: 40px;height: 40px;bottom: 2px;right: 50px;border: 1pt solid rosybrown;border-radius: 10px;">
                                <a href="#" id="btn_hapus_jalan" class="btn" style="border-bottom-left-radius: 8px;border-top-right-radius: 8px;width: 100%;height: 100%;bottom: 0px;color: white;"><i class="icon-eraser2"></i></a>
                            </div>
                            `)


                        if (feature.properties.f7 != null) {
                            console.log(feature.properties.f7)
                            var list_history = feature.properties.f7

                            console.log(list_history[0].split(",")[0])
                            var perbaikan_jl = `<div class='row'>
                                
                                <label class="col-md-8">` + list_history[0].split(",")[1] + `</label>
                                
    
                                <a class="col-md-4" onclick="getdetailper(` + list_history[0].split(",")[0] + `)" data-toggle="modal" data-target="#modal_detail_perbaikan_dash"><i>Detail</i></a>
    
                            </div>
                            <a class="col-md-6" class="btn" id="btn_perbaikan_jalan"><i>Input Perbaikan</i></a>`

                        } else {
                            var perbaikan_jl = `<div class='row'>
                                <div class="col-md-6">
                                    <label class="col-md-6">Null</label>
                                </div>
                                
                            </div>
                            <a class="col-md-6" class="btn" id="btn_perbaikan_jalan"><i>Input Perbaikan</i></a>
                            `
                        }
                        $(".nama_keterangan").html(`
                                            <div>
                                                <span style="font-size: large;">
                                                    ` + feature.properties.f2 + `
                                                </span>
                                            </div>
                                            <div>
                                                <span></span>
                                            </div>
                                            `)

                        $(".isi_keterangan").html(`
                                    <input type="text" name="idjalan" id="idjalan" class="hidden" value="">
                                    <input type="text" name="coordinatejalan" id="coordinatejalan" class="hidden" value="">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div>
                                                    <span>Panjang Jalan</span>
                                                </div>
                                                <div>
                                                    <span>` + feature.properties.f3 + `m</span>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div>
                                                    <span>Lebar Jalan</span>
                                                </div>
                                                <div>
                                                    <span style="font-family: 'Roboto';">` + feature.properties.f4 + ` m</span>
                                                </div>
                                            </div>
    
                                        </div>

                                        <div>
                                            <div>
                                                <span>Tipe Jalan</span>
                                            </div>
                                            <div>
                                                <span>` + feature.properties.f5 + `</span>
                                            </div>
                                        </div>

                                        <div>
                                            <div>
                                                <span>Perbaikan Terakhir</span>
                                            </div>
                                            <div>
                                                <span>` + perbaikan_jl + `</span>
                                            </div>
                                        </div>

                                    `)
                            //if (result.address.Address != '') {
                            //    var nmjalan = result.address.Address
                            //} else {
                            //    var nmjalan = feature.properties.f2
                            //};
                            //
                            //var history
                            //if (feature.properties.f7 != null) {
                            //    var list_history = feature.properties.f7
                            //
                            //    var list_history_panel = ``
                            //    for (var i = 0; i < list_history.length; i++) {
                            //        var dt_history = list_history[i].split(",");
                            //
                            //        var data_history = `<div class="form-group" style="margin-bottom:0px;">
                            //                                <div class="row">
                            //                                    <label class="col-md-6">` + dt_history[1] + `</label>
                            //                                    <a class="col-md-3" onclick="getjalanper(` + dt_history[0] + `)"><i>View Ruas<///i></a>
                            //                                    <a class="col-md-3" onclick="getdetailper(` + dt_history[0] + `)" //data-toggle="modal" data-target="#modal_detail"><i>View Detail</i></a>
                            //                                </div>
                            //                            </div>`;
                            //        list_history_panel += data_history
                            //    };
                            //
                            //    history = `<p class="text-center">
                            //                    History Perbaikan
                            //                </p>
                            //                    <br>
                            //                    ` + list_history_panel + `
                            //                <p class="text-center" style="margin-top: 10px;">
                            //                    <a href="#" id='btn_perbaikan_jalan' class="btn btn-default"><i>Tambah History Perbaikan</i><///a>
                            //                </p>`;
                            //} else {
                            //    history = `<p class="text-center">
                            //                    History Perbaikan
                            //                </p>
                            //                    <br>
                            //                <p class="text-center" style="margin-top: 10px;">
                            //                    <a href="#" id='btn_perbaikan_jalan' class="btn btn-default"><i>Input History Perbaikan</i></a>
                            //                </p>`;
                            //}
                            //

                        $('#namajalan').val(feature.properties.f2);


                        $('#idjalan').val(feature.properties.f1);
                        $('#panjangjalan').val(feature.properties.f3);
                        $('#lebarjalan').val(feature.properties.f4);
                        $('#tipejalan').val(feature.properties.f5);

                        $("#coordinatejalan").val(feature.geometry);
                    }
                });

                pool.push({
                    name: feature.properties.f2,
                    id: L.stamp(layer),
                });
            }
            layer.on({

                mouseover: function(e) {
                    var layer = e.target;
                    layer.setStyle({
                        weight: 10,
                        Color: "#fffc00",
                        fillColor: "#fffc00",
                        fillOpacity: 2,
                        opacity: 2,


                    });
                    if (!L.Browser.ie && !L.Browser.opera) {
                        layer.bringToFront();
                    }
                },
                mouseout: function(e) {
                    geo_jalan.resetStyle(e.target);
                }
            });
            var popupContent = feature.properties.f2;
            layer.bindTooltip(popupContent);


        }
    });

    function geo_json_jalan(data) {
        geo_jalan.addData(data)
    }

    function geojalan() {
        var checkBox = document.getElementById("geo_jalan");
        if (checkBox.checked == true) {
            map.on("movestart", function() {
                if (map.hasLayer(geo_jalan)) {
                    geo_jalan.clearLayers()
                    geo_jalan.remove()
                }
            });

            map.on("moveend", function(e) {
                var wetan = map.getBounds().getEast();
                var kulon = map.getBounds().getWest();
                var lor = map.getBounds().getNorth()
                var kidul = map.getBounds().getSouth();
                var center = map.getBounds().getCenter();
                var zoom = map.getZoom()

                if (zoom > 16 && checkBox.checked == true) {
                    $.ajax({
                        url: "{% url 'api:jalan' %}",
                        data: {
                            'wetan': wetan,
                            'kulon': kulon,
                            'lor': lor,
                            'kidul': kidul
                        },
                        dataType: 'json',
                        success: function(data) {

                            let list_poly = [];
                            for (var i = 0; i < data['gen'].length; i++) {
                                geoj = data['gen'][i][0];
                                list_poly.push(geoj);
                            };
                            geo_json_jalan(list_poly);
                        }
                    });
                }
                geo_jalan.addTo(map);
            });

        } else {
            geo_jalan.clearLayers();
            geo_jalan.remove();
        }
    }

    var map_edit_jalan = L.map('map-jalan', {
        editable: true,
        zoomControl: false,
        drawControl: true
    }).setView([-2, 118], 5);

    mapss = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
        maxZoom: 22,
        minZoom: 4,
    }).addTo(map_edit_jalan);
    var polygon_edit_jalan = new L.Polyline([
        [-4.11941282399997, 104.170558774],
        [-4.11965812399992, 104.170414073]
    ], {
        color: 'blue',
        weight: 3,
        opacity: 0.5,
        smoothFactor: 1
    });

    $(document).on("click", "#btn_jalan", function() {
        if (map_edit_jalan.hasLayer(polygon_edit_jalan)) {
            polygon_edit_jalan.remove()
        }
        var id_poly = $('#idjalan').val();
        $("#modal-jalan").modal("show")
        $.ajax({
            url: "{% url 'api:edit-jalan' %}",
            data: {
                'idjalan': id_poly
            },
            dataType: 'json',
            success: function(data) {
                loaderPage(false);

                $("#modal_detail_non_kelurahan").modal("hide")
                setTimeout(function() {
                    map_edit_jalan.invalidateSize();
                }, 1000);


                if (data['jalan']['geometry']['type'] == "MultiLineString") {
                    var alat = data['jalan']['geometry']['coordinates'][0][0][1];
                    var alng = data['jalan']['geometry']['coordinates'][0][0][0];
                    var lop_poly_edit = data['jalan']['geometry']['coordinates'][0];
                } else {
                    var alat = data['jalan']['geometry']['coordinates'][0][1];
                    var alng = data['jalan']['geometry']['coordinates'][0][0];
                    var lop_poly_edit = data['jalan']['geometry']['coordinates'];
                };
                map_edit_jalan.setView([alat, alng], 18);

                let list_poly_edit = [];
                for (var i = 0; i < lop_poly_edit.length; i++) {
                    geoj = lop_poly_edit[i][0];
                    polygigi = [lop_poly_edit[i][1], lop_poly_edit[i][0]]
                    list_poly_edit.push(polygigi);
                };


                polygon_edit_jalan = new L.Polyline(list_poly_edit, {
                    color: 'blue',
                    weight: 3,
                    opacity: 0.5,
                    smoothFactor: 1
                });
                polygon_edit_jalan.addTo(map_edit_jalan);
                polygon_edit_jalan.enableEdit();
                $('#btnsavejalan').click(function() {
                    var hasil = (JSON.stringify(polygon_edit_jalan.toGeoJSON()))
                    $("#coordinatejalan").val(hasil);
                })
            }
        })
    });


    $(document).on("click", "#btn_hapus_jalan", function() {
        $("#modal-hapus-jalan").modal("show")
        $("#modal_detail_non_kelurahan").modal("hide")
        var id_poly = $('#idjalan').val();

        $.ajax({
            url: "{% url 'api:edit-jalan' %}",
            data: {
                'idjalan': id_poly
            },
            dataType: 'json',
            success: function(data) {
                loaderPage(false);
                $("#isi_modal_delete").html(`Hapus Jalan dengan nama jalan ` + data['nama'] + ``);
                $("#idjlnhps").val(id_poly)
            }
        })
    });

    $('#btnhpsjalan').click(function() {
        var id_poly = $('#idjlnhps').val();
        $.ajax({
            url: "{% url 'api:hapus-jalan' %}",
            data: {
                'idjalan': id_poly
            },
            dataType: 'json',
            success: function(data) {
                let response = data;
                if (response.code == 0) {
                    swal({
                        title: response.info,
                        text: response.data,
                        type: "success",
                        icon: "success",
                        confirmButtonColor: "#00BCD4"
                    }, function() {
                        $("#modal-hapus-jalan").modal('hide');
                    })
                } else {
                    swal({
                        title: response.info,
                        text: response.data,
                        type: "warning",
                        icon: "error",
                        confirmButtonColor: "#00BCD4"
                    })
                }
            }
        });
    });

    $(document).on("click", "#btnsavejalan", function() {
        var data = new FormData();
        data.append("file", $("input[id^='imgjalan']")[0].files[0]);
        data.append("csrfmiddlewaretoken", "{{ csrf_token }}");

        data.append('idjalan', $("#idjalan").val())
        data.append('namajalan', $("#namajalan").val())
        data.append('panjangjalan', $("#panjangjalan").val())
        data.append('lebarjalan', $("#lebarjalan").val())
        data.append('tipejalan', $("#tipejalan").val())
        data.append('cord', $("#coordinatejalan").val())

        $.ajax({
            url: "{% url 'api:edit-jalan-valid' %}",
            data: data,
            dataType: 'json',
            type: 'POST',
            processData: false,
            contentType: false,
            success: function(data) {
                loaderPage(false);
                let response = data;
                if (response.code == 0) {
                    swal({
                        title: response.info,
                        text: response.data,
                        type: "success",
                        icon: "success",
                        confirmButtonColor: "#00BCD4"
                    }, function() {
                        $("#modal-jalan").modal('hide');
                    })
                } else {
                    swal({
                        title: response.info,
                        text: response.data,
                        type: "warning",
                        icon: "error",
                        confirmButtonColor: "#00BCD4"
                    })
                }
            }
        })
    });

    var geo_sungai = L.geoJson(null, {
        style: function(feature) {
            return {
                color: "#00FFFF",
                weight: 1,
                opacity: 2,
                zIndex: 1000
            };
        },

        onEachFeature: function(feature, layer) {
            if (feature.properties) {

                var lattitud, longitud;
                if (feature.geometry.type == 'MultiPolygon') {
                    lattitud = feature.geometry.coordinates[0][0][0][1];
                    longitud = feature.geometry.coordinates[0][0][0][0];

                } else {
                    lattitud = feature.geometry.coordinates[0][0][1];
                    longitud = feature.geometry.coordinates[0][0][0];
                };

                layer.on({
                    click: function(e) {
                        console.log('cdcd')
                    }
                });

                pool.push({
                    name: feature.properties.f2,
                    id: L.stamp(layer),
                    lat: lattitud,
                    lng: longitud
                });
            }
            layer.on({
                mouseover: function(e) {
                    var layer = e.target;
                    layer.setStyle({
                        weight: 1,
                        Color: "#067800",
                        fillColor: "#067800",

                    });
                    if (!L.Browser.ie && !L.Browser.opera) {
                        layer.bringToFront();
                    }
                },
                mouseout: function(e) {
                    geo_sungai.resetStyle(e.target);
                }
            });
        }
    });

    function geo_json_sungai(data) {
        geo_sungai.addData(data)
    }

    function geosungai() {
        var checkBox = document.getElementById("geo_sungai");
        if (checkBox.checked == true) {
            $.ajax({
                url: "{% url 'api:sungai' %}",
                dataType: 'json',
                success: function(data) {

                    let list_poly = [];
                    for (var i = 0; i < data['gen'].length; i++) {
                        geoj = data['gen'][i][0];
                        list_poly.push(geoj);
                    };
                    geo_json_sungai(list_poly);
                }
            });
            geo_sungai.addTo(map);
        } else {
            geo_sungai.remove();
        }
    }

    $(document).on("click", "#delet-pol", function(e) {
        $("#modal_delete_1").modal("show");
    });

    $(document).on("click", "#buttondelete", function(e) {
        var id_poly = $('#id_poly_delete').val();
        $("#modal_delete_1").modal("hide")

        $.ajax({
            url: "{% url 'api:hapus' %}",
            data: {
                'id_poly': id_poly
            },
            dataType: 'json',
            type: 'POST',
            success: function(data) {

                alert("berhasil gaess")
            }
        });
    });


    //
    //    map_cesium.camera.moveEnd.addEventListener(function() {
    //        var cartographic = new Cesium.Cartographic();
    //        var windowPosition = new Cesium.Cartesian2(map_cesium.container.clientWidth / 2, map_cesium.container.clientHeight / 2);
    //        var pickRay = map_cesium.scene.camera.getPickRay(windowPosition);
    //        var pickPosition = map_cesium.scene.globe.pick(pickRay, map_cesium.scene);
    //        var pickPositionCartographic = map_cesium.scene.globe.ellipsoid.cartesianToCartographic(pickPosition);
    //        var longitudee = pickPositionCartographic.longitude * (180 / Math.PI);
    //        var lattitudee = pickPositionCartographic.latitude * (180 / Math.PI)
    //        var tinggi = (cartographic.height * 0.001).toFixed(1);
    //        console.log(lattitudee)
    //        console.log(longitudee)

    //$.ajax({
    //    url: "{% url 'api:3d-maps' %}",
    //    data: {
    //        'latt': lattitudee,
    //        'loog': longitudee
    //    },
    //    dataType: 'json',
    //    type: 'POST',
    //    success: function(data) {
    //        alert('fgggg')
    //
    //    }
    //});





    // });


    //    if (checkBox_3d.checked == true && checkBox_2d.checked == false) {
    //
    //        $("#map").css("display", "none");
    //        $("#map-cesium").css("display", "block");
    //    } else if (checkBox_3d.checked == false && checkBox_2d.checked == true) {
    //        $("#map").css("display", "block");
    //        $("#map-cesium").css("display", "none");
    //
    //    }


    // function map3d() {
    //     var checkBox_3d = document.getElementById("3d-maps");
    //     if (checkBox_3d.checked == true) {
    //         $("#map").css('display', 'none');
    //         $("#map-cesium").css('display', 'block');

    //         Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJhOTc0NDkxMi02N2NkLTQwYjMtOTE1Yi1iMGNkZDU0Zjg3MGMiLCJpZCI6NDQ1ODgsImlhdCI6MTYxNDE0NjM5NH0.sRHzNNa7uV_huqGxERySWlL8J5UVx1VwU-pRwNd0GJk';

    //         var map_cesium = new Cesium.Viewer('map-cesium');

    //         map_cesium.camera.flyTo({
    //             destination: Cesium.Cartesian3.fromDegrees(104.171696, -4.120217, 10000)
    //         });
    //         map_cesium.camera.moveEnd.addEventListener(function() {
    //             var windowPosition = new Cesium.Cartesian2(map_cesium.container.clientWidth / 2, map_cesium.container.clientHeight / 2);
    //             var pickRay = map_cesium.scene.camera.getPickRay(windowPosition);
    //             var pickPosition = map_cesium.scene.globe.pick(pickRay, map_cesium.scene);
    //             var pickPositionCartographic = map_cesium.scene.globe.ellipsoid.cartesianToCartographic(pickPosition);
    //             var longitudee = pickPositionCartographic.longitude * (180 / Math.PI);
    //             var lattitudee = pickPositionCartographic.latitude * (180 / Math.PI)
    //             console.log(lattitudee)
    //             console.log(longitudee)

    //             $.ajax({
    //                 url: "{% url 'api:3d-maps' %}",
    //                 data: {
    //                     'latt': lattitudee,
    //                     'loog': longitudee
    //                 },
    //                 dataType: 'json',
    //                 success: function(data) {
    //                     for (var i = 0; i < data["polygon_o"].length; i++) {
    //                         polygon_oo = data["polygon_o"][i][0].replace(/&#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: 368px;height:368"> 
    //                                         </th>
    //                                     </tr>
    //                                 </thead>
    //                                 <tbody>
    //                                     <div class= "container">
    //                                         <tr style="height: 100px;">
    //                                             <th>
    //                                                 <div>
    //                                                     <h1 style="font-family: Google Sans,Roboto,Arial,sans-serif;
    //                                                     letter-spacing: 0;
    //                                                     font-weight: 400;">
    //                                                         <span style="font-size: x-large;">
    //                                                             ` + data['properties']['f2'] + `
    //                                                         </span>
    //                                                     </h1>
    //                                                 </div>
    //                                             </th>
    //                                         </tr>
    //                                     </div>
    //                                     <div class= "container">
    //                                         <tr style="height: 30px;">
    //                                             <th>
    //                                                 <span>
    //                                                     ` + data['properties']['f3'] + `
    //                                                 </span>
    //                                             </th>
    //                                         </tr>
    //                                     </div>
    //                                     <div class= "container">
    //                                         <tr style="height: 40px;">
    //                                             <th>
    //                                                 <span>
    //                                                     ` + data['administrasi']['f1'] + `, ` + data['administrasi']['f2'] + `, ` + data['administrasi']['f3'] + `, ` + data['administrasi']['f4'] + `
    //                                                 </span>
    //                                             </th>
    //                                         </tr>
    //                                     </div>
    //                                     <div class= "container">
    //                                         <tr style="height: 40px;">
    //                                             <th>
    //                                                 <p>
    //                                                     <span>Luas Bangunan : ` + data['administrasi']['f6'] + `</span>
    //                                                 </p>
    //                                                 <p>
    //                                                     <span>Luas Tanah : ` + data['administrasi']['f7'] + `</span>
    //                                                 </p>
    //                                                 <p>
    //                                                     <span>Tinggi Bangunan : ` + data['administrasi']['f8'] + `</span>
    //                                                 </p>
    //                                                 <p>
    //                                                     <span>Pemilik : ` + data['administrasi']['f10'] + `</span>
    //                                                 </p>
    //                                             </th>
    //                                         </tr>
    //                                     </div>
    //                                 </tbody>
    //                             </table>`;
    //                             $("#isi_panel").html(content)
    //                             $("#panel-samping").css("display", "block");
    //                             $("#button_hide_panel").css("display", "block");


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

    //     } else {
    //         //map_cesium.entities.removeAll();
    //         //map_cesium.destroy();
    //         setTimeout(function() {
    //             map.invalidateSize();
    //         }, 1000);
    //         $("#map").css('display', 'block');
    //         $("#map-cesium").css('display', 'none');
    //     }
    // }
</script>
<script type="text/javascript" src="{% static 'js/plugins/tables/datatables/datatables.min.js' %}"></script>
<script>
    function destroyfade() {
        $(".modal-backdrop").css("display", "none")
        $(".modal-backdrop").removeClass('show');
        $("body").css('padding-right', '0px !important')
        document.querySelector("#right-tab2-feas-upli > div > div:nth-child(6) > div > label").html(`Pimpinan`)
        document.querySelector("#right-tab2-feas-upli > div > div:nth-child(3)").css("display", "block")
    }

    function destroyWraper() {
        $("#input_perbaikan").css("display", "none");
        $("#edit_kelurahan").css("display", "none");
    }
    var map_input = L.map('map-insert', {
        editable: true,
        zoomControl: false,
        drawControl: true
    }).setView([-4.125826277307029, 104.1881561279297], 10);

    maps = L.tileLayer('https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}&s=Gal&apistyle=s.t:0|s.e:l|p.v:off', {
        maxZoom: 22,
        minZoom: 4,
    }).addTo(map_input);

    var editableLayers = new L.FeatureGroup();
    map_input.addLayer(editableLayers);

    var options = {
        position: 'topleft',
        draw: {
            polyline: {
                shapeOptions: {
                    color: 'red',
                    weight: 10
                }
            },
            polyline: true,
        },
        edit: {
            featureGroup: editableLayers, //REQUIRED!!
            remove: true
        },
        color: 'red'
    };

    var drawControl = new L.Control.Draw(options);
    map_input.addControl(drawControl);

    map_input.on('draw:created', function(e) {
        var type = e.layerType,
            layer = e.layer;
        layer.options.color = 'yellow';
        layer.options.weight = 10;
        layer.options.opacity = 1;
        var koordina = ""
        if (type === 'polyline') {

            var tempLatLng = null;
            var totalDistance = 0.00000;
            $.each(e.layer._latlngs, function(i, latlng) {
                if (tempLatLng == null) {
                    tempLatLng = latlng;
                    return;
                }

                totalDistance += tempLatLng.distanceTo(latlng);
                tempLatLng = latlng;
            });
            e.layer.bindPopup((totalDistance).toFixed(2) + ' meter');
            e.layer.openPopup();

            $("#panjangjalanperbaikan").val((totalDistance).toFixed(2) + ' meter');
        }
        editableLayers.addLayer(layer);
    });

    function getjalanper(id) {
        $.ajax({
            url: "{% url 'apps:get-jalan-perbaikan' %}",
            data: {
                'id': id
            },
            dataType: 'json',
            success: function(data) {
                map.setView([data[0]['geometry']['coordinates'][0][0][1], data[0]['geometry']['coordinates'][0][0][0]], 18)

                var geo_jalan_perbaikan = L.geoJson(data[0], {
                    style: function(feature) {
                        return {
                            color: "#FAFA00",
                            weight: 10,
                            opacity: 2,
                            zIndex: 1999
                        };
                    }
                }).addTo(map);

            }
        });
    };

    var geo_jalan_input = L.geoJson(null, {
        style: function(feature) {
            return {
                color: "#06FF08",
                weight: 8,
                opacity: 2,
                zIndex: 1000
            };
        }
    }).addTo(map_input);


    $(document).on("click", "#btn_perbaikan_jalan", function() {
        geo_jalan_input.clearLayers(geo_jalan_input)
        $("#input_perbaikan").css("display", "block");
        var id_jalan = $("#idjalan").val();

        editableLayers.clearLayers();

        setTimeout(function() {
            map_input.invalidateSize();
        }, 1000);

        $.ajax({
            url: "{% url 'apps:input-perbaikan' %}",
            data: {
                'id_jalan': id_jalan
            },
            dataType: 'json',
            success: function(data) {
                $("#namajalan").val(data[0]);
                $("#typejalan").val(data[1]);
                $("#panjangjalanall").val(data[2]);
                $("#id_jalan_perbaikan").val(data[4]);
                $("#type_id").val(data[5])


                var latlngs = data[3];
                map_input.setView([latlngs['geometry']['coordinates'][0][0][1], latlngs['geometry']['coordinates'][0][0][0]], 17)

                geo_jalan_input.addData(data[3]);
                $("#map-insert > div.leaflet-control-container > div.leaflet-top.leaflet-left > div:nth-child(1) > div > div > a.leaflet-draw-draw-marker").css("display", "none")

            }
        })
    });

    $("#save-perbaikan").click(function() {

        var hasil = JSON.stringify(editableLayers.toGeoJSON());
        var id_jalan = $("#id_jalan_perbaikan").val();
        var type_id = $("#type_id").val();
        var name = $("#namajalan").val();
        var type = $("#typejalan").val();
        var tgl_perbaikan = $("#tglmulaiperbaikan").val();
        var tgl_selesai = $("#tglselesaiperbaikan").val();
        var tgl_disetujui = $("#tgldisetujui").val();
        var anggaran = $("#anggaran").val();
        var proposal = $("#proposal").val();
        var bukti_selesai = $("#buktiselesai").val();
        var pj = $("#pihakpengesahan").val();
        var pj_lapangan = $("#pjlapangan").val();
        var kontraktor = $("#kontraktor").val();
        var pjg_perbaikan = $("#panjangjalanperbaikan").val();
        var lbr_perbaikan = $("#lebarjalanperbaikan").val();
        var jenis_perbaikan = $("#jenisperbaikan").val();
        var luas = $("#luas").val();
        var kelurahan = $("#kelurahan").val();
        var kecamatan = $("#kecamatan").val();

        var data_umum = [{
            'coord': hasil
        }, {
            'object_id': id_jalan
        }, {
            'type_id': type_id
        }, {
            'name': name
        }, {
            'type': type
        }, {
            'tgl_selesai': tgl_selesai
        }, {
            'tgl_perbaikan': tgl_perbaikan
        }, {
            'tgl_disetujui': tgl_disetujui
        }, {
            'anggaran': anggaran
        }, {
            'pj': pj
        }, {
            'pj_lapangan': pj_lapangan
        }, {
            'kontraktor': kontraktor
        }, {
            'pjg_perbaikan': pjg_perbaikan
        }, {
            'lbr_perbaikan': lbr_perbaikan
        }, {
            'jenis_perbaikan': jenis_perbaikan
        }, {
            'luas': luas
        }, {
            'kelurahan': kelurahan
        }, {
            'kecamatan': kecamatan
        }]

        data = new FormData()
        data.append("proposal", $("input[id^='proposal']")[0].files[0]);
        data.append("bukti_selesai", $("input[id^='buktiselesai']")[0].files[0]);
        for (var i = 0; i < data_umum.length; i++) {
            var keyss = Object.keys(data_umum[i]);
            data.append(keyss[0], data_umum[i][keyss[0]])
        }

        $.ajax({
            url: "{% url 'apps:save-perbaikan' %}",
            data: data,
            dataType: 'json',
            type: 'POST',
            processData: false,
            contentType: false,
            success: function(data) {
                let response = data;

                if (response.code == 0) {
                    swal({
                        title: response.info,
                        text: response.data,
                        type: "success",
                        icon: "success",
                        confirmButtonColor: "#00BCD4"
                    }, function() {
                        $("#input_perbaikan").css("display", "none");
                        $("#info-jalan").css("display", "block");
                        $("#info-pendidikan").css("display", "none");
                    })
                } else {
                    swal({
                        title: response.info,
                        text: response.data,
                        type: "warning",
                        icon: "error",
                        confirmButtonColor: "#00BCD4"
                    })

                }
            }
        })
    });

    //    $('.datatable-show-all').DataTable({
    //        autoWidth: false,
    //        columnDefs: [{
    //                orderable: false,
    //                width: '20px',
    //                targets: [0],
    //
    //            },
    //            // {
    //            //     width: '100px',
    //            //     targets: [ 4 ]
    //            // },
    //            {
    //                orderable: false,
    //                width: '20px',
    //                targets: [6],
    //
    //            }, {
    //                orderable: false,
    //                width: '20px',
    //                targets: [7],
    //
    //            },
    //        ],
    //        dom: '<"float-left"B>frtip',
    //        buttons: [{
    //            text: 'Tambah User',
    //            action: function(e, dt, node, config) {
    //                $("#modalAddButton").click()
    //                $("#inUsername").attr("disabled", false);
    //                $("#inUsername").val(null);
    //                $("#inNameF").val(null);
    //                $("#inNameL").val(null);
    //                $("#inEmail").val(null);
    //                $("#iduser").val(null);
    //                $(".modstit").html("Tambah User")
    //                loadGroups(null)
    //            }
    //        }],
    //        language: {
    //            search: '<span>Filter:</span> _INPUT_',
    //            searchPlaceholder: 'Type to filter...',
    //            lengthMenu: '<span>Show:</span> _MENU_',
    //            paginate: {
    //                'first': 'First',
    //                'last': 'Last',
    //                'next': '&rarr;',
    //                'previous': '&larr;'
    //            }
    //        },
    //        drawCallback: function() {
    //            $(this).find('tbody tr').slice(-3).find('.dropdown, .btn-group').addClass('dropup');
    //        },
    //        preDrawCallback: function() {
    //            $(this).find('tbody tr').slice(-3).find('.dropdown, .btn-group').removeClass('dropup');
    //        }
    //
    //    });
    //
    //
    //    $('.datatable-groups').DataTable({
    //        autoWidth: false,
    //        columnDefs: [{
    //            orderable: false,
    //            width: '100px',
    //            targets: [2]
    //        }, {
    //            orderable: false,
    //            width: '100px',
    //            targets: [0]
    //        }],
    //        dom: '<"float-left"B>frtip',
    //        buttons: [{
    //            text: 'Tambah Group',
    //            action: function(e, dt, node, config) {
    //                $("#modalAddButtong").click();
    //                $("#idgroup").val(null);
    //                $(".modstitg").html("Tambah Group")
    //                $("#inGroupName").val(null)
    //                $("#container_sparent").css("display", "block")
    //                loadGroups(null)
    //            }
    //        }],
    //        language: {
    //            search: '<span>Filter:</span> _INPUT_',
    //            searchPlaceholder: 'Type to filter...',
    //            lengthMenu: '<span>Show:</span> _MENU_',
    //            paginate: {
    //                'first': 'First',
    //                'last': 'Last',
    //                'next': '&rarr;',
    //                'previous': '&larr;'
    //            }
    //        },
    //        drawCallback: function() {
    //            $(this).find('tbody tr').slice(-3).find('.dropdown, .btn-group').addClass('dropup');
    //        },
    //        preDrawCallback: function() {
    //            $(this).find('tbody tr').slice(-3).find('.dropdown, .btn-group').removeClass('dropup');
    //        }
    //
    //    });

    $("#modalAddButton").click(function() {
        $("body").css("padding-right", "0px !important")
    })

    $("#saveuser").on("click", function() {
        addUser()
    })


    function loadjlbyid(id) {
        var isObject = {};
        isObject.id = id;
        $("#iduser").val(id)

        $.ajax({
            url: "{% url 'apps:loadDetail' %}",
            data: isObject,
            dataType: 'json',
            type: 'post',
            success: function(data) {

                isi_modal_detail = []
                for (var i = 0; i < data.length; i++) {
                    isi_modal_detail.push(`<tr>
                        <td>` + i + `</td>
                        <td>` + data[i].name + `</td>
                        <td>` + data[i].type + `</td>
                        <td>` + data[i].tgl_perbaikan + `</td>
                        <td>` + data[i].anggaran + `</td>
                        <td>` + data[i].pj + `</td>
                        <td>` + data[i].pj_lapangan + `</td>
                        <td>` + data[i].kontraktor + `</td>
                        <td>` + data[i].pjg_jln_reno + `</td>
                        <td>` + data[i].lbr_jln_reno + `</td>
                        <td><a onclick="loadmapruas('` + data[i].id + `','` + data[i].id_object + `')" id="loaddetailcoord" data-toggle="modal" data-target="#modal_detail_ruas">View</a></td>
                        <td><a href="media/proposal/` + data[i].proposal + `" id="downloadproposal">View</a></td>
                        <td><a href="media/bukti_penyelesaian/` + data[i].bukti_selesai + `" onclick="viewBukti()" id="view-bukti">View</a></td>
                    </tr>`)
                }

                $("#isi_modal_detail").html(`                
                <table class="table table-responsive datatable-show-all table-sm" id="isi_detail" style="word-wrap:break-word;">
                    <thead>
                        <tr>
                            <th>No.</th>
                            <th>Nama</th>
                            <th>Type</th>
                            <th>Tanggal Perbaikan</th>
                            <th>Anggaran</th>
                            <th>Penanggung Jawab</th>
                            <th>Penanggung Jawab Lapangan</th>
                            <th>Kontraktor</th>
                            <th>panjang jalan yang di perbaiki</th>
                            <th>Lebar Jalan yang di Perbaiki</th>
                            <th>Ruas yang di perbaiki</th>
                            <th>Proposal</th>
                            <th>Bukti Penyelesaian</th>
                        </tr>
                    </thead>
                    <tbody>
                        ` + isi_modal_detail + `
                    </tbody>
                </table>`)

            }
        });
    }


    function destroylayer() {
        map_detail_by_id
    }

    $(".leaflet-draw-draw-polyline").html('<span class="fa fa-expand"></span>')
    $(".leaflet-draw-actions-top").html(`<li class=""><a class="btn btn-primary" href="#" title="Finish drawing">Finish</a></li><li class=""><a class="" href="#" title="Delete last point drawn">Delete last point</a></li><li class=""><a class="" href="#" title="Cancel drawing">Cancel</a></li>`);

    loaderPage(false);

    function loaderPage(stat) {
        if (stat == true) {
            $('.page_loader').show();
        } else {
            $('.page_loader').hide();
            $(".panel-flat").css("display", "block")
        }
    };

    function cetakExcel() {
        var tab_text = "<table border='2px'><tr bgcolor='#87AFC6'>";
        var textRange;
        var j = 0;
        tab = document.getElementById('isi_detail'); // id of table

        for (j = 0; j < tab.rows.length; j++) {
            tab_text = tab_text + tab.rows[j].innerHTML + "</tr>";
            //tab_text=tab_text+"</tr>";
        }

        tab_text = tab_text + "</table>";
        tab_text = tab_text.replace(/<A[^>]*>|<\/A>/g, ""); //remove if u want links in your table
        tab_text = tab_text.replace(/<img[^>]*>/gi, ""); // remove if u want images in your table
        tab_text = tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); // reomves input params

        var ua = window.navigator.userAgent;
        var msie = ua.indexOf("MSIE ");

        if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) // If Internet Explorer
        {
            txtArea1.document.open("txt/html", "replace");
            txtArea1.document.write(tab_text);
            txtArea1.document.close();
            txtArea1.focus();
            sa = txtArea1.document.execCommand("SaveAs", true, "Say Thanks to Sumit.xls");
        } else //other browser not tested on IE 11
            sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));

        return (sa);
    }




    var $content, $modal, $apnData, $modalCon;

    $content = $(".min");

    $(".mdlFire").click(function(e) {

        e.preventDefault();

        var $id = $(this).attr("data-target");
    });

    $(".modalMinimize").on("click", function() {
        $modalCon = $(this).closest(".mymodal").attr("id");
        $apnData = $(this).closest(".mymodal");
        $modal = "#" + $modalCon;
        $(".modal-backdrop").addClass("display-none");
        $($modal).toggleClass("min");

        if ($($modal).hasClass("min")) {
            $(".minmaxCon").append($apnData);
            $(this).find("i").toggleClass('fa-minus').toggleClass('fa-clone');
        } else {
            $(".container").append($apnData);
            $(this).find("i").toggleClass('fa-clone').toggleClass('fa-minus');
        };
    });

    $("button[data-dismiss='modal']").click(function() {
        $(this).closest(".mymodal").removeClass("min");
        $(".container").removeClass($apnData);
        $(this).next('.modalMinimize').find("i").removeClass('fa fa-clone').addClass('fa fa-minus');
    });

    // map.on('zoomend', function() {
    //     var zoom = map.getZoom();
    //     console.log(zoom)

    //     if (map.hasLayer(geo_po_cagar_budaya)) {

    //         geo_po_cagar_budaya.eachLayer(function(layer) {
    //             if (zoom >= 10 && (!layer.getTooltip())) {

    //                 conten = `

    //                         <div id="bottom-justified-data" style="text-align: center;">
    //                             <div >
    //                                 <img src="static/img/image/` + layer.feature.administrasi.f4 + `" alt="Image" style="width: 150px!important;height: 125px;">
    //                             </div>

    //                             <div >
    //                                 <div style="font-family: Google Sans,Roboto,Arial,sans-serif;
    //                                 letter-spacing: 0">
    //                                     <p >
    //                                         ` + layer.feature.administrasi.f1 + `
    //                                     </p>
    //                                 </div>
    //                             </div>
    //                         </div>
    //                     `;


    //                 layer.bindTooltip(conten, {
    //                     sticky: true,
    //                     permanent: false,
    //                     interactive: false,
    //                     direction: 'top',
    //                     offset: [0, -25],
    //                     className: 'my-label'
    //                 });
    //             } else if (zoom < 10 && (layer.getTooltip())) {
    //                 //console.log('remove tooltip');
    //                 layer.unbindTooltip();
    //             }
    //         });
    //     }

    //     if (map.hasLayer(geo_po_rumah_sakit)) {

    //         geo_po_rumah_sakit.eachLayer(function(layer) {
    //             if (zoom >= 10 && (!layer.getTooltip())) {
    //                 if (layer.feature.administrasi.f8 == 'None') {
    //                     var gmb = "rs.svg";
    //                 } else {
    //                     var gmb = layer.feature.administrasi.f8;
    //                 }
    //                 conten = `

    //                         <div id="bottom-justified-data" style="text-align: center;">
    //                             <div >
    //                                 <img src="static/img/image/` + gmb + `" alt="Image" style="width: 150px!important;height: 125px;">
    //                             </div>

    //                             <div >
    //                                 <div style="font-family: Google Sans,Roboto,Arial,sans-serif;
    //                                 letter-spacing: 0">
    //                                     <p >
    //                                         ` + layer.feature.administrasi.f1 + `
    //                                     </p>
    //                                 </div>
    //                             </div>
    //                         </div>
    //                     `;


    //                 layer.bindTooltip(conten, {
    //                     sticky: true,
    //                     permanent: false,
    //                     interactive: false,
    //                     direction: 'top',
    //                     offset: [0, -25],
    //                     className: 'my-label'
    //                 });
    //             } else if (zoom < 10 && (layer.getTooltip())) {
    //                 //console.log('remove tooltip');
    //                 layer.unbindTooltip();
    //             }
    //         });
    //     }

    //     if (map.hasLayer(geo_po_spbu)) {

    //         geo_po_spbu.eachLayer(function(layer) {
    //             if (zoom >= 10 && (!layer.getTooltip())) {
    //                 if (layer.feature.administrasi.f8 == 'None') {
    //                     var gmb = "rs.svg";
    //                 } else {
    //                     var gmb = layer.feature.administrasi.f8;
    //                 }
    //                 conten = `

    //                         <div id="bottom-justified-data" style="text-align: center;">
    //                             <div >
    //                                 <img src="static/img/image/` + gmb + `" alt="Image" style="width: 150px!important;height: 125px;">
    //                             </div>

    //                             <div >
    //                                 <div style="font-family: Google Sans,Roboto,Arial,sans-serif;
    //                                 letter-spacing: 0">
    //                                     <p >
    //                                         ` + layer.feature.administrasi.f1 + `
    //                                     </p>
    //                                 </div>
    //                             </div>
    //                         </div>
    //                     `;

    //                 layer.bindTooltip(conten, {
    //                     sticky: true,
    //                     permanent: false,
    //                     interactive: false,
    //                     direction: 'top',
    //                     offset: [0, -25],
    //                     className: 'my-label'
    //                 });
    //             } else if (zoom < 10 && (layer.getTooltip())) {
    //                 //console.log('remove tooltip');
    //                 layer.unbindTooltip();
    //             }
    //         });
    //     }

    //     if (map.hasLayer(geo_po_stasiun)) {

    //         geo_po_stasiun.eachLayer(function(layer) {
    //             if (zoom >= 10 && (!layer.getTooltip())) {
    //                 if (layer.feature.administrasi.f8 == 'None') {
    //                     var gmb = "rs.svg";
    //                 } else {
    //                     var gmb = layer.feature.administrasi.f8;
    //                 }
    //                 conten = `

    //                         <div id="bottom-justified-data" style="text-align: center;">
    //                             <div >
    //                                 <img src="static/img/image/` + gmb + `" alt="Image" style="width: 150px!important;height: 125px;">
    //                             </div>

    //                             <div >
    //                                 <div style="font-family: Google Sans,Roboto,Arial,sans-serif;
    //                                 letter-spacing: 0">
    //                                     <p >
    //                                         ` + layer.feature.administrasi.f1 + `
    //                                     </p>
    //                                 </div>
    //                             </div>
    //                         </div>
    //                     `;


    //                 layer.bindTooltip(conten, {
    //                     sticky: true,
    //                     permanent: false,
    //                     interactive: false,
    //                     direction: 'top',
    //                     offset: [0, -25],
    //                     className: 'my-label'
    //                 });
    //             } else if (zoom < 10 && (layer.getTooltip())) {
    //                 //console.log('remove tooltip');
    //                 layer.unbindTooltip();
    //             }
    //         });
    //     }


    //     if (map.hasLayer(geo_po_terminal)) {

    //         geo_po_terminal.eachLayer(function(layer) {
    //             if (zoom >= 10 && (!layer.getTooltip())) {
    //                 if (layer.feature.administrasi.f8 == 'None') {
    //                     var gmb = "rs.svg";
    //                 } else {
    //                     var gmb = layer.feature.administrasi.f8;
    //                 }
    //                 conten = `
    //                         <div id="bottom-justified-data" style="text-align: center;">
    //                             <div >
    //                                 <img src="static/img/image/` + gmb + `" alt="Image" style="width: 150px!important;height: 125px;">
    //                             </div>

    //                             <div >
    //                                 <div style="font-family: Google Sans,Roboto,Arial,sans-serif;
    //                                 letter-spacing: 0">
    //                                     <p >
    //                                         ` + layer.feature.administrasi.f1 + `
    //                                     </p>
    //                                 </div>
    //                             </div>
    //                         </div>
    //                     `;


    //                 layer.bindTooltip(conten, {
    //                     sticky: true,
    //                     permanent: false,
    //                     interactive: false,
    //                     direction: 'top',
    //                     offset: [0, -25],
    //                     className: 'my-label'
    //                 });
    //             } else if (zoom < 10 && (layer.getTooltip())) {
    //                 //console.log('remove tooltip');
    //                 layer.unbindTooltip();
    //             }
    //         });
    //     }
    // });
</script>

<script>
    //klik kanan begin

    map.on('contextmenu', function(e) {

        $("#modal_option_create").modal("show");
        $("#map-create-all").remove();




        $(".btn_create_jalan").click(function() {
            $("#create_all > div > ul").css("display", "block")
            $("#modal__create").modal("show");
            $(".title-create").html("Create Jalan")
            $(".tombol_action_create").html(`<input type="button" id="create-jal" value="Create" style="z-index: 1000;position:relative;">`)
            $(".tab_1").html("Koordinat")
            $(".tab_2").html("Informasi Jalan")
            $(".tombol_save_create").html(`<input type="button" class="btn btn-primary" id="create_save_jalan" value="SAVE" style="margin-right:30px;">
            <input type="text" name="poly_create" class="hidden" id="poly_create_jalan" value="">`)
            $("#koordinatjalan").html(`
                                        <div class="form-group">
                                            <div id="map-create-all" style="height: 300px;">
                                                <div class="tombol_action_create">
                                                    <input type="button" id="create-jal" value="Create" style="z-index: 1000;position:relative;">
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="col-lg-2 control-label" style="margin-top:10px">Image</label>
                                                <div class="col-lg-9" style="margin-top:10px">
                                                    <input type="file" id="img_jalan" name="images[]" multiple accept="image/jpg,image/png,image/jpeg,image/gif">
                                                </div>
                                            </div>
                                        </div>`)



            $("#informasi_create").html(`
                                        <div class="row" style="margin-top: 15px;">
                                            <div class="form-group">
                                                <label class="col-lg-4 control-label lbl-top" style="margin-top: 15px;">Nama Jalan</label>
                                                <div class="col-lg-8">
                                                    <input id="nama_jalan_create" type="text" class="form-control" value="" required>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row" style="margin-top: 15px;">
                                            <div class="form-group">
                                                <label class="col-lg-4 control-label lbl-top" style="margin-top: 15px;">Panjang Jalan (m)</label>
                                                <div class="col-lg-8">
                                                    <input id="panjang_jalan_create" type="text" class="form-control" value="" required>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row" style="margin-top: 15px;">
                                            <div class="form-group">
                                                <label class="col-lg-4 control-label lbl-top" style="margin-top: 15px;">Lebar Jalan (m)</label>
                                                <div class="col-lg-8">
                                                    <input id="lebar_jalan_create" type="text" class="form-control" value="" required>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row" style="margin-top: 15px;">
                                            <div class="form-group">
                                                <label class="col-lg-4 control-label lbl-top" style="margin-top: 15px;">Tipe Jalan</label>
                                                <div class="col-lg-8">
                                                    <input id="tipe_jalan_create" type="text" class="form-control" value="" required>
                                                </div>
                                            </div>
                                        </div>
                                        `);

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

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

            setTimeout(function() {
                map_create_all.invalidateSize();
            }, 500);

            var lineDraweredit = new L.Draw.Polyline(map_create_all, polygon_options);

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

            map_create_all.on('draw:created', function(e) {

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

                layer.options.color = 'yellow';
                layer.options.weight = 10;
                var koordina = ""
                if (type === 'polyline') {

                    var tempLatLng = null;
                    var totalDistance = 0.00000;
                    $.each(e.layer._latlngs, function(i, latlng) {
                        if (tempLatLng == null) {
                            tempLatLng = latlng;
                            return;
                        }

                        totalDistance += tempLatLng.distanceTo(latlng);
                        tempLatLng = latlng;

                    });
                    e.layer.bindPopup((totalDistance).toFixed(2) + ' meter');
                    e.layer.openPopup();

                    $("#panjang_jalan_create").val((totalDistance).toFixed(2) + ' meter');
                }
                $("#poly_create_jalan").val(JSON.stringify(layer.toGeoJSON()));
                layer.addTo(map_create_all);
            });

            $("#create-jal").click(function() {
                lineDraweredit.enable();
            })
            $("#map-create-all>div.leaflet-control-container>div.leaflet-top.leaflet-left>div>div>div").css("display", "none")
            $("#map-create-all > div.leaflet-control-container > div.leaflet-top.leaflet-left > div").css("display", "none")


        })
        $(".btn_create_bangunan").click(function() {
            $("#create_all > div > ul").css("display", "block")
            $("#modal__create").modal("show");
            $(".title-create").html("Create Bangunan")
            $(".tombol_action_create").html(`<input type="button" id="create" value="Create" style="z-index: 1000;position:relative;">`)
            $(".tab_1").html("Koordinat")
            $(".tab_2").html("Informasi Bangunan")
            $(".tombol_save_create").html(`<input type="button" class="btn btn-primary" id="create_save_bangunan" value="SAVE" style="margin-right:30px;">
            <input type="text" name="poly_create" class="hidden" id="poly_create_bangunan" value="">`)
            $("#koordinatjalan").html(`
                                        <div class="form-group">
                                            <div id="map-create-all" style="height: 300px;">
                                                <div class="tombol_action_create">
                                                    <input type="button" id="create" value="Create" style="z-index: 1000;position:relative;">
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="col-lg-2 control-label" style="margin-top:10px">Image</label>
                                                <div class="col-lg-9" style="margin-top:10px">
                                                    <input type="file" id="img_bangunan" name="images[]" multiple accept="image/jpg,image/png,image/jpeg,image/gif">
                                                </div>
                                            </div>
                                        </div>`)

            $("#informasi_create").html(`
                                        <div class="row" style="margin-top: 15px;">
                                            <div class="form-group">
                                                <label class="col-lg-3 control-label lbl-top" >Nama Bangunan</label>
                                                <div class="col-lg-9">
                                                    <input id="name_create" type="text" class="form-control" value="" required>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row" style="margin-top: 15px;">
                                            <div class="form-group">
                                                <label class="col-lg-3 control-label lbl-top" >Jenis Bangunan</label>
                                                <div class="col-lg-9">
                                                    <select style="border-bottom: 1px solid rgb(83, 83, 83) !important;" id="tipe_point_b" data-placeholder="select point.." class="select-size-md">
                                                        <option value="null" selected disabled>-- Pilih Jenis Point --</option>
                                                        <option value="bangunan">Bangunan Biasa</option>
                                                        <option value="kantor_administrasi">Kantor Administrasi</option>
                                                        <option value="layanan_kesehatan">Layanan Kesehatan</option>
                                                        <option value="puskesmas">Puskesmas</option>
                                                        <option value="rumah_sakit">Rumah Sakit</option>
                                                        <option value="sarana_ibadah">Sarana Ibadah</option>
                                                        <option value="sarana_pendidikan">Sarana Pendidikan</option>
                                                        <option value="spbu">SPBU</option>
                                                        <option value="stasiun">Stasiun</option>
                                                        <option value="terminal_bus">Terminal Bus</option>
                                                        <option value="cagar_budaya">Cagar Budaya dan Tempat Wisata</option>
                                                        <option value="gardu_listrik">Gardu Listrik</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row" style="margin-top: 15px;">
                                            <div class="form-group">
                                                <label class="col-lg-3 control-label lbl-top" >Tipe Bangunan</label>
                                                <div class="col-lg-9">
                                                    <select style="border-bottom: 1px solid rgb(83, 83, 83) !important;width: 220px;" id="tipe_point_2_b" data-placeholder="select point.." class="select-size-md">
                                                        <option value="null" selected disabled>-- Pilih Tipe Point --</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row" style="margin-top: 15px;">
                                            <div class="form-group">
                                                <label class="col-lg-3 control-label lbl-top" >Nama Point</label>
                                                <div class="col-lg-9">
                                                    <select style="border-bottom: 1px solid rgb(83, 83, 83) !important;width: 220px;" id="tipe_point_3_b" data-placeholder="select point.." class="select-size-md">
                                                        <option value="null" selected disabled>-- Pilih Point --</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>

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

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

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

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

                                        <div class="row" style="margin-top: 15px;">
                                            <div class="form-group">
                                                <label class="col-lg-3 control-label lbl-top">Tinggi Bangunan</label>
                                                <div class="col-lg-6">
                                                    <input id="tinggi_bangunan_create" type="text" class="form-control" value="" required>
                                                </div>
                                                <div class="col-lg-3">m</div>
                                            </div>
                                        </div>

                                        <div class="row" style="margin-top: 15px;">
                                            <div class="form-group">
                                                <label class="col-lg-3 control-label lbl-top">Jumlah Lantai</label>
                                                <div class="col-lg-9">
                                                    <input id="lantai" type="text" class="form-control" value="" placeholder="Estimasi Per Lantai = 3m" required>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row" style="margin-top: 15px;">
                                            <div class="form-group">
                                                <label class="col-lg-3 control-label lbl-top" >Pemilik</label>
                                                <div class="col-lg-9">
                                                    <input id="pemilik_create" type="text" class="form-control" value="" placeholder="cth : Ali Budiman, S.Si." required>
                                                </div>
                                            </div>
                                        </div>
                                        `);

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

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

            setTimeout(function() {
                map_create_all.invalidateSize();
            }, 500);

            $('#create').click(function() {
                polygonDraweredit.enable();
            });

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

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

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

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

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

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

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

                    if (j <= (geoShape.length - 2)) {
                        kordinat += ', ';
                    }
                }
                window.thisBaseDrawPolygonLayer = layer;
                $("#poly_create_bangunan").val(JSON.stringify(kordinat));
                var seeArea = L.GeometryUtil.geodesicArea(layer.getLatLngs()[0]);
                var fixarea = seeArea.toFixed(3)
                $("#luas_bangunan_create").val(fixarea);
            });

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

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

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

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

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

            $("#map-create-all > div.leaflet-control-container > div.leaflet-top.leaflet-left > div").css("display", "none")
        });

        $(".btn_create_lahan").click(function() {
            $("#create_all > div > ul").css("display", "block")
            $("#modal__create").modal("show");
            $(".title-create").html("Create Lahan")
            $(".tombol_action_create").html(`<input type="button" id="create" value="Create" style="z-index: 1000;position:relative;">`)
            $(".tab_1").html("Koordinat")
            $(".tab_2").html("Informasi Lahan")
            $(".tombol_save_create").html(`<input type="button" class="btn btn-primary" id="create_save_lahan" value="SAVE" style="margin-right:30px;">
            <input type="text" name="poly_create" class="hidden" id="poly_create_lahan" value="">`)
            $("#koordinatjalan").html(`
                                        <div class="form-group">
                                            <div id="map-create-all" style="height: 300px;">
                                                <div class="tombol_action_create">
                                                    <input type="button" id="create" value="Create" style="z-index: 1000;position:relative;">
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="col-lg-2 control-label" style="margin-top:10px">Image</label>
                                                <div class="col-lg-9" style="margin-top:10px">
                                                    <input type="file" id="img_lahan" name="images[]" multiple accept="image/jpg,image/png,image/jpeg,image/gif">
                                                </div>
                                            </div>
                                        </div>`)

            $("#informasi_create").html(`
                                        <div class="row" style="margin-top: 15px;">
                                            <div class="form-group">
                                                <label class="col-lg-3 control-label lbl-top" >Nama Lahan</label>
                                                <div class="col-lg-9">
                                                    <input id="name_create" type="text" class="form-control" value="" required>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row" style="margin-top: 15px;">
                                            <div class="form-group">
                                                <label class="col-lg-3 control-label lbl-top" >Jenis Lahan</label>
                                                <div class="col-lg-9">
                                                    <select style="border-bottom: 1px solid rgb(83, 83, 83) !important;" id="tipe_point_lahan" data-placeholder="select point.." class="select-size-md">
                                                        <option value="null" selected disabled>-- Pilih Jenis Lahan --</option>
                                                        <option value="Belukar">Belukar</option>
                                                        <option value="Belukar Rawa">Belukar Rawa</option>
                                                        <option value="Hutan Lahan Kering Primer">Hutan Lahan Kering Primer</option>
                                                        <option value="Hutan Lahan Kering Sekunder">Hutan Lahan Kering Sekunder</option>
                                                        <option value="Hutan Tanaman">Hutan Tanaman</option>
                                                        <option value="Pemukiman">Pemukiman</option>
                                                        <option value="Perkebunan">Perkebunan</option>
                                                        <option value="Pertambangan">Pertambangan</option>
                                                        <option value="Pertanian Lahan Kering">Pertanian Lahan Kering</option>
                                                        <option value="Pertanian Lahan Kering Campur">Pertanian Lahan Kering Campur</option>
                                                        <option value="Savana / Padang rumput">Savana / Padang rumput</option>
                                                        <option value="Sawah">Sawah</option>
                                                        <option value="Tanah Terbuka">Tanah Terbuka</option>
                                                        <option value="Transmigrasi">Transmigrasi</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row" style="margin-top: 15px;">
                                            <div class="form-group">
                                                <label class="col-lg-3 control-label lbl-top" >Tahun</label>
                                                <div class="col-lg-9">
                                                    <input id="tahun_create" type="text" class="form-control" value="" required>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row" style="margin-top: 15px;">
                                            <div class="form-group">
                                                <label class="col-lg-3 control-label lbl-top" >Luas Lahan</label>
                                                <div class="col-lg-6">
                                                    <input id="luas_lahan_create" type="text" class="form-control" value="" required>
                                                </div>
                                                <div class="col-lg-3" style="margin-top:8px;">
                                                    <span>m2</span>
                                                </div>
                                            </div>
                                        </div>
                                        `);

            var nowyear = new Date().getFullYear();
            $("#tahun_create").val(nowyear);

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

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

            setTimeout(function() {
                map_create_all.invalidateSize();
            }, 500);

            $('#create').click(function() {
                polygonDraweredit.enable();
            });

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

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

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

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

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

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

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

                    if (j <= (geoShape.length - 2)) {
                        kordinat += ', ';
                    }
                }
                window.thisBaseDrawPolygonLayer = layer;
                $("#poly_create_lahan").val(JSON.stringify(kordinat));
                var seeArea = L.GeometryUtil.geodesicArea(layer.getLatLngs()[0]);
                var fixarea = seeArea.toFixed(3)
                $("#luas_lahan_create").val(fixarea);

            });

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

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

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

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

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

            $("#map-create-all > div.leaflet-control-container > div.leaflet-top.leaflet-left > div").css("display", "none")
        });

        $(".btn_create_point").click(function() {
            $("#modal__create").modal("show");
            $(".title-create").html("Create Point")
            $(".tombol_action_create").html(``)
            $(".tab_1").html("Koordinat")
            $(".tab_2").html("Informasi Point")
            $("#create_all > div > ul").css("display", "block")
            $(".tombol_save_create").html(`<input type="button" class="btn btn-primary" id="btnsavepoint" value="SAVE">
            <input type="text" name="poly_create_point" class="hidden" id="poly_create_point" value="">`)

            $("#koordinatjalan").html(`
                                        <div class="form-group">
                                            <div id="map-create-all" style="height: 300px;">
                                                <!-- <div class="tombol_action_create">
                                                    <input type="button" class="leaflet-draw-draw-marker" value="Create" style="z-index: 1000;position:relative;">
                                                </div> -->
                                            </div>
                                            <div class="form-group">
                                                <label class="col-lg-2 control-label" style="margin-top:10px">Image</label>
                                                <div class="col-lg-9" style="margin-top:10px">
                                                    <input type="file" id="gambar_pitik" name="images[]" multiple accept="image/jpg,image/png,image/jpeg,image/gif">
                                                </div>
                                            </div>
                                        </div>`)

            $("#informasi_create").html(`
            <div class="row" style="margin-top: 15px;">
                <div class="form-group">
                    <label class="col-lg-3 control-label lbl-top" style="margin-top: 15px;">Nama Point</label>
                    <div class="col-lg-9">
                        <input id="name_create_point" type="text" class="form-control" value="" required>
                    </div>
                </div>
            </div>

            <div class="row" style="margin-top: 15px;">
                <div class="form-group">
                    <label class="col-lg-3 control-label lbl-top" style="margin-top: 15px;">Jenis Point</label>
                    <div class="col-lg-9">
                        <select style="border-bottom: 1px solid rgb(83, 83, 83) !important;" id="tipe_point" data-placeholder="select point.." class="select-size-md">
                            <option value="null" selected disabled>-- Pilih Jenis Point --</option>
                            <option value="kantor_administrasi">Kantor Administrasi</option>
                            <option value="layanan_kesehatan">Layanan Kesehatan</option>
                            <option value="puskesmas">Puskesmas</option>
                            <option value="rumah_sakit">Rumah Sakit</option>
                            <option value="sarana_ibadah">Sarana Ibadah</option>
                            <option value="sarana_pendidikan">Sarana Pendidikan</option>
                            <option value="spbu">SPBU</option>
                            <option value="stasiun">Stasiun</option>
                            <option value="terminal_bus">Terminal Bus</option>
                            <option value="cagar_budaya">Cagar Budaya dan Tempat Wisata</option>
                            <option value="gardu_listrik">Gardu Listrik</option>

                        </select>
                    </div>
                </div>
            </div>

            <div class="row" style="margin-top: 15px;">
                <div class="form-group">
                    <label class="col-lg-3 control-label lbl-top" style="margin-top: 15px;">Tipe Point</label>
                    <div class="col-lg-9">
                        <select style="border-bottom: 1px solid rgb(83, 83, 83) !important;width: 220px;" id="tipe_point_2" data-placeholder="select point.." class="select-size-md">
                            <option value="null" selected disabled>-- Pilih Tipe Point --</option>
                        </select>
                    </div>
                </div>
            </div>

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

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

            <div class="row" style="margin-top: 15px;">
                <div class="form-group">
                    <label class="col-lg-3 control-label lbl-top" style="margin-top: 15px;">Pimpinan</label>
                    <div class="col-lg-9">
                        <input id="pemilik_point" type="text" class="form-control" value="" placeholder="cth : Ali Budiman, S.Si." required>
                    </div>
                </div>
            </div>
                                        `);


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

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

            setTimeout(function() {
                map_create_all.invalidateSize();
            }, 1000);

            $(".leaflet-draw-draw-marker").html('<span>Create</span>')

            var drawControl = new L.Control.Draw(drawPluginOptions);
            map_create_all.addControl(drawControl);

            var editableLayers = new L.FeatureGroup();
            map_create_all.addLayer(editableLayers);

            // define custom marker
            var MyCustomMarker = L.Icon.extend({
                options: {
                    shadowUrl: null,
                    iconAnchor: new L.Point(12, 12),
                    iconSize: new L.Point(24, 24),
                }
            });

            var drawPluginOptions = {
                position: 'topright',
                draw: {
                    marker: {
                        title: "soyel1",
                        icon: new MyCustomMarker()
                    },
                    marker: true
                },
                edit: {
                    featureGroup: editableLayers, //REQUIRED!!
                    remove: true
                }
            };

            var drawControl = new L.Control.Draw(drawPluginOptions);
            map_create_all.addControl(drawControl);

            var editableLayers = new L.FeatureGroup();
            map_create_all.addLayer(editableLayers);

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

                editableLayers.addLayer(layer);
                $("#poly_create_point").val(JSON.stringify(layer.toGeoJSON()));
                $("#modal_point").modal()
                map.closePopup();
            });
            $("#map-create-all > div.leaflet-control-container > div.leaflet-top.leaflet-left > div:nth-child(2) > div > div").css("display", "none")
            $(".leaflet-draw-draw-marker").css("padding", "0px!important")
            $(".leaflet-draw-draw-marker").css("width", "100%!important")
            $("#map-create-all > div.leaflet-control-container > div.leaflet-top.leaflet-right").css("display", "none")
            $("#map-create-all > div.leaflet-control-container > div.leaflet-top.leaflet-left > div:nth-child(1) > div > div > a.leaflet-draw-draw-polyline").css("display", "none")
            $("#map-create-all > div.leaflet-control-container > div.leaflet-top.leaflet-left > div:nth-child(2) > div > div > a.leaflet-draw-draw-marker").css("display", "block!important")

        })

        $("#tipe_point").change(function() {
            var tipe = $(this).val();

            $.ajax({
                url: "{% url 'api:change-tipe' %}",
                data: {
                    'tipe': tipe
                },
                dataType: 'json',
                success: function(data) {
                    console.log(data)
                    var data_all_kab = []
                    for (var i = 0; i < data['result'].length; i++) {
                        var data_k = data['result'][i][0];
                        var data_kab = `<option value="` +
                            data_k +
                            `">` +
                            data_k +
                            `</option>`;
                        data_all_kab.push(data_kab)
                    };
                    $('#tipe_point_2').html(`<option value="null" selected disabled>-- Pilih Tipe Point --</option>` + data_all_kab);
                }
            });
        });

        $("#tipe_point_b").change(function() {
            var tipe = $(this).val();

            $.ajax({
                url: "{% url 'api:change-tipe' %}",
                data: {
                    'tipe': tipe
                },
                dataType: 'json',
                success: function(data) {
                    var data_all_kab = []
                    for (var i = 0; i < data['result'].length; i++) {
                        var data_k = data['result'][i][0];
                        console.log(data_k)
                        var data_kab = `<option value="` + data_k + `">` + data_k + `</option>`;
                        data_all_kab.push(data_kab)
                    };
                    $('#tipe_point_2_b').html(`<option value="null" selected disabled>-- Pilih Tipe Point --</option>` + data_all_kab);
                }
            });
        });

        $("#tipe_point_2_b").change(function() {
            var jenis = $(this).val();
            var tipx = $("#tipe_point_b").val();

            $.ajax({
                url: "{% url 'api:change-jenis' %}",
                data: {
                    'tipe': tipx,
                    'jenis': jenis
                },
                dataType: 'json',
                success: function(data) {
                    console.log(data)
                    var data_all_kab = []
                    for (var i = 0; i < data['result'].length; i++) {
                        var data_id = data['result'][i][0];
                        var data_po = data['result'][i][1];
                        var data_kab = `<option value="` + data_id + `">` + data_po + `</option>`;
                        data_all_kab.push(data_kab)
                    };
                    $('#tipe_point_3_b').html(`<option value="null" selected disabled>-- Pilih Point --</option>` + data_all_kab);
                }
            });
        });

        $(".btn_cek_KDBKLB").click(function() {
            $("#koordinatjalan").addClass("active")
            $("#informasi_create").removeClass("active")
            $("#tab_koor").addClass("active")
            $("#tab_info").removeClass("active")
            $("#modal__create").modal("show");
            $(".title-create").html("Cek KDB & KLB")
            $(".tombol_save_create").html('')
            $(".tab_1").html("Koordinat")
            $(".tab_2").html("Informasi")
            $("#create_all > div > ul").css("display", "none")
            $("#koordinatjalan").html(`
                                        <div class="jumlah_lantai" style="margin-top: -15px;">jumlah_lantai : 0
                                        </div>
                                        <div class="form-group">
                                            <div id="map-create-all" style="height: 300px;">
                                                <!-- <div class="tombol_action_create">
                                                    <input type="button" class="leaflet-draw-draw-marker" value="Create" style="z-index: 1000;position:relative;">
                                                </div> -->
                                                <div style="margin:10px;">
                                                    <input type="button" id="create_poly_rumah" value="Create Polygon Rumah" style="z-index: 1000;position:relative;border: transparent;border-radius: 5px;display:none;">
                                                    <input type="button" id="create_poly_tanah" value="Create Polygon Tanah" style="z-index: 1000;position:relative;border: transparent;border-radius: 5px;background: antiquewhite;">
                                                    <input type="button" id="delete_poly" value="Reset" style="z-index: 1000;position:relative;background: azure;border: transparent;border-radius: 5px;display:none;margin-top: 5px;">
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-6">
                                                    
                                                    <div class="row" style="margin-top: 5px;margin-right:5px!important;">
                                                        <div class="form-group">
                                                            <label class="control-label lbl-top">Luas Lantai (m2)</label>
                                                            <div class="">
                                                                <input id="luas_polygon_lantai" type="text" class="form-control" value="" required>
                                                            </div>
                                                            <div class="alert alert-danger" id="notificationluaslantai" style="display: none;margin: 0px;padding-top: 0px;padding-bottom: 0px;font-size: 10px;position: absolute;top: -5px;left: 110px;">
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="row" style="margin-top: 5px;margin-right:5px!important;">
                                                        <div class="form-group">
                                                            <label class="control-label lbl-top">Luas Rumah (m2)</label>
                                                            <div class="">
                                                                <input id="luas_polygon_rumah" type="text" class="form-control" value="" required>
                                                            </div>
                                                            <div class="alert alert-danger" id="notificationluasrumah" style="display: none;margin: 0px;padding-top: 0px;padding-bottom: 0px;font-size: 10px;position: absolute;top: -5px;left: 110px;">
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="row" style="margin-top: 5px;margin-right:5px!important;">
                                                        <div class="form-group">
                                                            <label class="control-label lbl-top">Luas Tanah (m2)</label>
                                                            <div class="">
                                                                <input id="luas_polygon_tanah" type="text" class="form-control" value="" required>
                                                            </div>
                                                            <div class="alert alert-danger" id="notificationluastanah" style="display: none;margin: 0px;padding-top: 0px;padding-bottom: 0px;font-size: 10px;position: absolute;top: -5px;left: 110px;">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="row" style="margin-top: 5px;margin-left:5px!important;">
                                                        <div class="form-group">
                                                            <label class="control-label lbl-top">Sisa Luas Tanah (m2):</label>
                                                            <div class="">
                                                                <input id="sisa_luas_tanah" type="text" class="form-control" value="" required disabled>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    
                                                    <div class="row" style="margin-top: 5px;margin-left:5px!important;">
                                                        <div class="form-group">
                                                            <label class="control-label lbl-top">KDB (%):</label>
                                                            <div class="">
                                                                <input id="KDB_polygon_rumah" type="text" class="form-control" value="" required disabled>
                                                            </div>
                                                        </div>
                                                    </div>
                                        
                                                    <div class="row" style="margin-top: 5px;margin-left:5px!important;">
                                                        <div class="form-group">
                                                            <label class="control-label lbl-top">KLB :</label>
                                                            <div class="">
                                                                <input id="KLB_polygon_rumah" type="text" class="form-control" value="" required disabled>
                                                            </div>
                                                        </div>
                                                    </div>
        
                                                </div>
                                            </div>
                                        </div>`)

            $("#informasi_create").html(``);

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

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

            setTimeout(function() {
                map_create_all.invalidateSize();
            }, 500);

            $("#map-create-all > div.leaflet-control-container > div.leaflet-top.leaflet-left > div > div > div").css("display", "none")


            $("#create_poly_rumah").click(function() {

                polygonDraweredit.enable();
                $("#create_poly_tanah").val('tambah polygon rumah')
            })

            $("#create_poly_tanah").click(function() {
                $('#create_poly_rumah').css("display", "block")
                $('#create_poly_tanah').css("display", "none")
                $('#delete_poly').css("display", "block")

                polygonDraweredit_tanah.enable();


            })

            //            function get_luas(lt_p, lo_p) {
            //                var lt_po = lt_p
            //                var lo_po = lo_p
            //
            //                var lat_rad = []
            //                var YY = []
            //                var XX = []
            //                var area = []
            //
            //                for (var i = 0; i < lt_po.length; i++) {
            //                    lt_rad = lt_po[i] / 180 * (22 / 7)
            //                    lat_rad.push(lt_rad)
            //                }
            //
            //                for (var y = 0; y < lt_po.length; y++) {
            //                    if (y == 0 || y == lt_po.length - 1) {
            //                        YY.push(0)
            //                    } else {
            //                        yyy = (lt_po[y] - lt_po[0]) / 360 * (6378137 * 2 * (22 / 7))
            //                        YY.push(yyy)
            //                    }
            //                }
            //
            //                for (var x = 0; x < lo_po.length; x++) {
            //                    if (x == 0 || x == lo_po.length - 1) {
            //                        XX.push(0)
            //                    } else {
            //                        xxx = (lo_po[x] - lo_po[0]) / 360 * (6378137 * 2 * (22 / 7) * Math.cos(lat_rad[x]))
            //                        XX.push(xxx)
            //                    }
            //                }
            //
            //                for (var i = 0; i < lo_po.length; i++) {
            //                    if (i == 0 || i == lo_po.length - 1) {
            //                        area.push(0)
            //                    } else {
            //                        are = ((YY[i - 1] * XX[i]) - (XX[i - 1] * YY[i])) / 2
            //                        area.push(are)
            //                    }
            //                }
            //
            //                function getSum(total, num) {
            //                    return total + Math.round(num);
            //                }
            //
            //                var luas_area = area.reduce(getSum, 0)
            //                return luas_area
            //            }



            var luas_all = []
            window.thisBaseDrawPolygonLayer = [];

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

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

                let kordinat = "";

                for (j in geoShape) {
                    kordinat += geoShape[j][0] + ' ' + geoShape[j][1];
                    if (j <= (geoShape.length - 2)) {
                        kordinat += ', ';
                    }
                }

                var seeArea = L.GeometryUtil.geodesicArea(layer.getLatLngs()[0]);
                var fixarea = seeArea.toFixed(3)

                luas_all.push(fixarea)
                if (luas_all.length > 1) {
                    var luas_tanah = luas_all[0]
                    var luas_rumah = luas_all[1]
                    var luas_lantai = luas_all[1]
                    var jumlah_lantai = luas_all - 1

                    $("#luas_polygon_rumah").val(parseFloat(luas_rumah).toFixed(2))
                    $("#luas_polygon_tanah").val(parseFloat(luas_tanah).toFixed(2))

                    $("#sisa_luas_tanah").val((luas_all[0] - luas_all[1]).toFixed(2))
                    var aaa = 0


                    if (luas_all.length > 2) {
                        var array_lan = luas_all.slice(2)
                        for (var i = 0; i < array_lan.length; i++) {
                            luas_lantai = parseFloat(luas_lantai) + parseFloat(array_lan[i])
                        }
                    }

                    $("#luas_polygon_lantai").val(parseFloat(luas_lantai).toFixed(2))
                    $(".jumlah_lantai").html("jumlah lantai : " + (luas_all.length - 1))

                    var klb = luas_lantai / luas_tanah
                    var kdb = luas_rumah / luas_tanah * 100

                    $("#KDB_polygon_rumah").val(parseFloat(kdb).toFixed(2))
                    $("#KLB_polygon_rumah").val(parseFloat(klb).toFixed(2))

                }

                window.thisBaseDrawPolygonLayer.push(layer);
            });


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

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

            var polygonDraweredit_tanah = new L.Draw.Polygon(map_create_all, polygon_options_tanah);
            var polygonDraweredit = new L.Draw.Polygon(map_create_all, polygon_options);

            //            polygonDraweredit.on("click", function(event) {
            //                shapecoords.innerHTML = event.latlng.toString();
            //                map_create_all.fire("click", event); // Trigger a map click as well.
            //            });
            //
            //            polygonDraweredit_tanah.on("click", function(event) {
            //                var type = event.layerType;map_
            //                shapecoords.innerHTML = event.latlng.toString();
            //                map_create_all.fire("click", event); // Trigger a map click as well.
            //            });


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

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

            $("#delete_poly").click(function() {
                if (window.thisBaseDrawPolygonLayer != []) {
                    for (var i = 0; i < window.thisBaseDrawPolygonLayer.length; i++) {
                        window.thisBaseDrawPolygonLayer[i].remove()
                    }
                    window.thisBaseDrawPolygonLayer = [];
                    luas_all = [];

                    $('#create_poly_rumah').css("display", "none")
                    $('#create_poly_tanah').css("display", "block")
                    $(".jumlah_lantai").html("jumlah lantai : 0")
                    $("#luas_polygon_rumah").val("")
                    $("#luas_polygon_tanah").val("")
                    $("#luas_polygon_lantai").val("")
                    $("#KDB_polygon_rumah").val("")
                    $("#KLB_polygon_rumah").val("")
                    $("#sisa_luas_tanah").val("")

                }

            });

            function isi_all() {
                var luas_rumah = $("#luas_polygon_rumah").val()
                var luas_tanah = $("#luas_polygon_tanah").val()
                var luas_lantai = $("#luas_polygon_lantai").val()

                if (luas_rumah == null) {
                    luas_rumah = 1
                }

                if (luas_tanah == null) {
                    luas_tanah = 1
                }

                if (luas_lantai == null) {
                    luas_lantai = 1
                }

                var klb = luas_lantai / luas_tanah
                var kdb = luas_rumah / luas_tanah * 100

                $("#sisa_luas_tanah").val(luas_tanah - luas_rumah)
                $("#KDB_polygon_rumah").val(kdb)
                $("#KLB_polygon_rumah").val(klb)
            }

            $('#luas_polygon_rumah').on('input', function() {
                isi_all()


                //                if (luas_tanah.indexOf(' ') !== -1 && luas_tanah != null) {
                //                    var luas_tanah_ret = luas_tanah.split(" ")[0]
                //                } else if (luas_tanah.indexOf(' ') === -1 && luas_tanah != null) {
                //                    var luas_tanah_ret = luas_tanah
                //                }
                //
                //                if (luas_tanah !== null) {
                //                    try {
                //
                //                        luas_tanah_ret = convert_to_float(luas_tanah)
                //                    } catch {
                //                        $("#notificationluastanah").css("display", "block")
                //                        $("#notificationluastanah").html("Pastikan yang anda masukan adalah angka")
                //                    }
                //                }

            });
            $('#luas_polygon_tanah').on('input', function() {
                isi_all()
            });
            $('#luas_polygon_lantai').on('input', function() {
                isi_all()
            });

        })
    });

    $(document).on("click", "#informasi_poo", function() {
        var luas_rumah = $("#luas_polygon_rumah").val()
        var luas_tanah = $("#luas_polygon_tanah").val()
        if (luas_rumah != null) {
            var luas_rumah_ret = luas_rumah.split(" ")[0]
        } else {
            var luas_rumah_ret = 1
        }

        if (luas_tanah != null) {
            var luas_tanah_ret = luas_tanah.split(" ")[0]
        } else {
            var luas_tanah_ret = 1
        }

        var klb = luas_tanah_ret / luas_rumah_ret
        var kdb = luas_rumah_ret / luas_tanah_ret * 100

        $("#KDB_polygon_rumah").val(kdb + ' %')
        $("#KLB_polygon_rumah").val(klb)
    })

    $(document).on("click", "#create_save_jalan", function(e) {
        data = new FormData()
        data.append("gambar", $("input[id^='img_jalan']")[0].files[0]);
        data.append("polyline", $("#poly_create_jalan").val())
        data.append("name_jalan", $("#nama_jalan_create").val())
        data.append("panjang_jalan", $("#panjang_jalan_create").val())
        data.append("lebar_jalan", $("#lebar_jalan_create").val())
        data.append("tipe_jalan", $("#tipe_jalan_create").val())

        $.ajax({
            url: "{% url 'api:create-jalan' %}",
            data: data,
            dataType: 'json',
            type: 'POST',
            processData: false,
            contentType: false,
            success: function(data) {
                let response = data
                if (response.status == 0) {
                    swal({
                        title: response.info,
                        text: response.data,
                        type: "success",
                        icon: "success",
                        confirmButtonColor: "#00BCD4"
                    })
                } else {
                    swal({
                        title: response.info,
                        text: response.data,
                        type: "warning",
                        icon: "error",
                        confirmButtonColor: "#00BCD4"
                    })

                }
                map.closePopup();
            }
        });
    });


    $(document).on("click", "#create_save_bangunan", function(e) {
        var polygin = $('#poly_create_bangunan').val();
        var name_poly = $('#name_create').val();
        var tdb = $('#tipe_point_b').val();
        var remark = $('#tipe_point_2_b').val();
        var poin_id = $('#tipe_point_3_b').val();
        var napo = $("#tipe_point_3_b option:selected").text();
        var info_poly = $('#info_create').val();
        var alamat_poly = $('#alamat_create').val();
        var lb_poly = $('#luas_bangunan_create').val();
        var lt_poly = $('#luas_tanah_create').val();
        var tb_poly = $('#tinggi_bangunan_create').val();
        var ltbang = $('#lantai').val();
        var mpu_poly = $('#pemilik_create').val();

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

                }
                map.closePopup();
            }
        });
    });

    $(document).on("click", "#create_save_lahan", function(e) {
        var polygin = $('#poly_create_lahan').val();
        var name_poly = $('#name_create').val();
        var tdb = $('#tipe_point_lahan').val();
        var alamat_poly = $('#tahun_create').val();
        var lb_poly = $('#luas_lahan_create').val();
        $.ajax({
            url: "{% url 'api:c_lahan' %}",
            data: {
                'polygon': polygin,
                'name': name_poly,
                'tipelh': tdb,
                'tahun': alamat_poly,
                'luas': lb_poly,
            },
            dataType: 'json',
            // type: 'POST',
            // processData: false,
            // contentType: false,
            success: function(data) {
                let response = data
                if (response.status == 0) {
                    swal({
                        title: response.info,
                        text: response.data,
                        type: "success",
                        icon: "success",
                        confirmButtonColor: "#00BCD4"
                    })
                } else {
                    swal({
                        title: response.info,
                        text: response.data,
                        type: "warning",
                        icon: "error",
                        confirmButtonColor: "#00BCD4"
                    })

                }
                map.closePopup();
            }
        });
    });


    $(document).on("click", "#btnsavepoint", function(e) {
        data = new FormData()
        data.append("gambar", $("input[id^='gambar_pitik']")[0].files[0]);
        data.append("point", $("#poly_create_point").val())
        data.append("name_create_point", $("#name_create_point").val())
        data.append("tipe_point", $("#tipe_point").val())
        data.append("info_create_point", $("#tipe_point_2").val())
        data.append("alamat_create_point", $("#alamat_create_point").val())
        data.append("luas_tanah_point", $("#luas_tanah_point").val())
        data.append("pemilik_point", $("#pemilik_point").val())

        $.ajax({
            url: "{% url 'api:create-point' %}",
            data: data,
            dataType: 'json',
            type: 'POST',
            processData: false,
            contentType: false,
            success: function(data) {
                let response = data
                if (response.status == 0) {
                    swal({
                        title: response.info,
                        text: response.data,
                        type: "success",
                        icon: "success",
                        confirmButtonColor: "#00BCD4"
                    }, function() {
                        $("#modal_point").css('display', 'none');
                    })
                } else {
                    swal({
                        title: response.info,
                        text: response.data,
                        type: "warning",
                        icon: "error",
                        confirmButtonColor: "#00BCD4"
                    })

                }
                map.closePopup();
            }
        });
    });
</script>