{% load static %}
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{title}}</title>
    <style>
        #sidebar {
            display: block;
            width: 180px;
            height: 100%;
            max-width: 100%;
            float: left;
        }
        
        #map {
            width: auto;
            height: 100%;
        }
        
        .filter>label:after {
            content: "\e98e";
            font-family: 'icomoon';
            font-size: 12px;
            display: inline-block;
            position: absolute;
            top: 50%;
            left: 12px;
            margin-top: -6px;
            color: #999999;
            line-height: 1;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
    </style>

    {% block leafletdraw %}
    <style>
        .leaflet-draw-section {
            display: none;
        }
    </style>
    {% endblock leafletdraw %}

    <style>
        .geocoder-control {
            margin: auto;
            margin-left: 100px;
            padding-left: 200px;
        }
        
        .panel-body {
            width: 250px;
        }
        
        .feature-row {
            cursor: pointer;
            width: 250px;
        }
        
        .sidebar-wrapper {
            width: 100%;
            height: 100%;
            position: relative;
        }
        
        .sidebar-table {
            position: absolute;
            width: 100%;
            top: 60px;
            bottom: 0px;
            overflow: auto;
        }
        
        .page_loader {
            position: fixed;
            background: url('../../static/img/loadingz.gif') 50% 50% no-repeat rgb(249, 249, 249);
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
            z-index: 9999;
            opacity: .5;
        }
        
        .leaflet-touch .geocoder-control-input {
            height: 34px;
            width: 250px;
            line-height: 30px;
            background-size: 30px;
        }
        
        .search_desa,
        .search_kab {
            outline: 0;
            width: 100%;
            height: 38px;
            padding: 8px 0;
            padding-right: 24px;
            font-size: 13px;
            line-height: 1.5384616;
            color: #333333;
            background-color: transparent;
            border: 1px solid transparent;
            border-width: 1px 0;
            border-bottom-color: #ddd;
        }
        
        .table_input input {
            outline: 0;
            padding: 2px 0;
            color: #333333;
            background-color: transparent;
            border: 1px solid transparent;
            border-width: 1px 0;
            border-bottom-color: #ddd;
        }
        
        .leaflet-popup-content {
            width: 500px;
        }
    </style>

    {% block foredit %}
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
    {% endblock foredit %}


    <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.css">
    <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.Default.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet.locatecontrol/dist/L.Control.Locate.min.css" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css" />
    <link rel="stylesheet" href="https://unpkg.com/esri-leaflet-geocoder@2.3.3/dist/esri-leaflet-geocoder.css">

    <script src="https://cdn.jsdelivr.net/npm/leaflet.locatecontrol/dist/L.Control.Locate.min.js" charset="utf-8"></script>


    <!-- Global stylesheets -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700,900" rel="stylesheet" type="text/css">
    <link href="{% static 'css/icons/icomoon/styles.css' %}" rel="stylesheet" type="text/css">
    <link href="{% static 'css/bootstrap.css' %}" rel="stylesheet" type="text/css">
    <link href="{% static 'css/core.css' %}" rel="stylesheet" type="text/css">
    <link href="{% static 'css/components.css' %}" rel="stylesheet" type="text/css">
    <link href="{% static 'css/colors.css' %}" rel="stylesheet" type="text/css"> {% block css %}
    <script src="{% static 'js/Leaflet.Editables.js' %}"></script>
    {% endblock css %}

</head>

<body>
    <!-- Main navbar -->
    <div>
        <div class="navbar navbar-inverse" style="background-color: #db0a5b;">
            <div class="navbar-header">
                <a class="navbar-brand" href="{% url 'apps:dashboard' %}">
                    <!-- <h3>NationalAddress</h3> -->
                    <i class=" icon-location4"></i>
                    <b>&nbsp;&nbsp;OKU-GIS</b>
                </a>

                <ul class="nav navbar-nav pull-right visible-xs-block">
                    <li><a data-toggle="collapse" data-target="#navbar-mobile"><i class="icon-tree5"></i></a></li>
                </ul>
            </div>
            <div class="navbar-collapse collapse" id="navbar-mobile">

                <p class="navbar-text"><span class="label bg-success-400">Online</span></p>
                <ul class="nav navbar-nav navbar-right">
                    <li class="dropdown dropdown-user">
                        <a class="dropdown-toggle" data-toggle="dropdown">
                            <img src="{% static 'img/placeholder.jpg' %}" alt="">
                            <span>{{user.username}}</span>
                            <i class="caret"></i>
                        </a>

                        <ul class="dropdown-menu dropdown-menu-right">
                            <li><a href="#"><i class="icon-user-plus"></i> My profile</a></li>
                            <li><a href="#"><i class="icon-cog5"></i> Account settings</a></li>
                            <li class="divider"></li>

                        </ul>
                    </li>
                </ul>
            </div>
        </div>
        <!-- /main navbar -->

        <!-- Second navbar -->
        <div class="navbar navbar-default" id="navbar-second">
            <ul class="nav navbar-nav no-border visible-xs-block">
                <li><a class="text-center collapsed" data-toggle="collapse" data-target="#navbar-second-toggle"><i class="icon-menu7"></i></a></li>
            </ul>

            <div class="navbar-collapse collapse" id="navbar-second-toggle">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="{% url 'apps:dashboard' %}"><i class="icon-display4 position-left"></i> Dashboard</a></li>
                    <li>
                        <div id="DataTables_Table_0_filter" class="dataTables_filter" style="margin: 0px 0 0px 20px;padding-top:5px;">
                            <label>
                                <input type="search" class="" placeholder="Type to search..." aria-controls="DataTables_Table_0">
                            </label>
                        </div>
                    </li>

                    <li class="hidden-xs" id="jumlah" style="padding-top: 14px;padding-left: 14px;">
                        <!-- <li class="hidden-xs"><a href="#" data-toggle="collapse" data-target=".navbar-collapse.in" id="list-btn"><i class="fa fa-list white"></i>&nbsp;&nbsp;List</a></li> -->
                    </li>

                    {% block btnlist %} {% endblock btnlist %}


                </ul>

                <ul class="nav navbar-nav navbar-right">
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            <i class="icon-search4"></i>
                            <span class="visible-xs-inline-block position-right">Share</span>
                            </span>&nbsp;&nbsp; Search
                            <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu dropdown-menu-right">
                            <li><a href="#" id="GetAddress"><i class="icon-location4"></i>by Address</a></li>
                            <!-- <li><a href="#" id="createRadius"><i class="icon-location4"></i>by Radius</a></li> -->
                            <li><a href="#" id="createPolygonTools"><i class="icon-vector"></i>by Polygon</a></li>
                        </ul>
                    </li>
                    <li class="dropdown mega-menu mega-menu-wide">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-map4 position-left"></i> Baselayer <span class="caret"></span></a>
                        <div class="dropdown-menu dropdown-content">
                            <div class="dropdown-content-body">
                                <div class="row text-center">
                                    <div class="col-md-3">
                                        <ul class="menu-list">
                                            <li>
                                                <a href="#" data-toggle="collapse" data-target=".navbar-collapse.in" id="OpenStreetMap">
                                                    <img src="{% static 'img/maps/osm.PNG' %}" alt="" style="max-width: 180px; max-height:180px;">
                                                    <span class="menu-heading underlined">
                                                    &nbsp;&nbsp;Google Street</span>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="col-md-3 align-center">
                                        <ul class="menu-list">
                                            <li>
                                                <a href="#" data-toggle="collapse" data-target=".navbar-collapse.in" id="WorldImagery">
                                                    <img src="{% static 'img/maps/esri.png' %}" alt="" style="max-width: 180px; max-height:180px;">
                                                    <span class="menu-heading underlined">
                                                        &nbsp;&nbsp;World Imagery</span>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="col-md-3">
                                        <ul class="menu-list">
                                            <li>
                                                <a href="#" data-toggle="collapse" data-target=".navbar-collapse.in" id="BingSatellite">
                                                    <img src="{% static 'img/maps/bing.png' %}" alt="" style="max-width: 180px; max-height:180px;">
                                                    <span class="menu-heading underlined">
                                                    &nbsp;&nbsp;Bing Satellite</span>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="col-md-3">
                                        <ul class="menu-list">
                                            <li>
                                                <a href="#" data-toggle="collapse" data-target=".navbar-collapse.in" id="GoogleSatellite">
                                                    <img src="{% static 'img/maps/esri.png' %}" alt="" style="max-width: 180px; max-height:180px;">
                                                    <span class="menu-heading underlined">
                                                    &nbsp;&nbsp;Google Satellite</span>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            <i class="icon-cog3"></i>
                            <span class="visible-xs-inline-block position-right">Share</span>
                            <span class="caret"></span>
                        </a>

                        <ul class="dropdown-menu dropdown-menu-right">
                            <li><a href="#"><i class="icon-cogs"></i> Engine Polygon</a></a>
                            </li>
                            <li><a href="#"><i class="icon-square-right"></i> Manage Polygon</a></a>
                            </li>
                            <li><a href="#"><i class="icon-display4"></i> Monitor</a></li>
                            <li><a href="#"><i class="icon-user-lock"></i> Manage User</a></li>
                            <li><a href="#"><i class="icon-statistics"></i> Registration User</a></li>

                        </ul>
                    </li>
                </ul>
            </div>
        </div>

    </div>

    <div style="height: 550px;">

        {% block content %}
        <!-- <div id="sidebar" style="display: block;">
            <div class="sidebar-wrapper">
                <div class="panel panel-default" id="features">
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-xs-9 col-md-9" id="jumlah">
                                <span class="font-weight-bold  ml-2 mt-1">Jumlah Bangunan:&nbsp;{{jumlah_bangunan}}</span><br>

                            </div>
                        </div>
                    </div>
                    <div class="sidebar-table">
                        <table class="table table-hover tasks-list" id="list-polygon">
                            <thead style="text-align: center;">
                                <tr>
                                    <th>
                                        <b>Name</b>
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div> -->

        {% endblock content %}

        <div id="map"></div>
    </div>

    <div class="modal fade" id="modal-kelurahan" tabindex="-1" role="dialog">

    </div>

    <!-- end modal location -->
    <!-- modal radius -->
    <div class="modal fade" id="PointModal" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-md">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">Check By Radius</h4>
                </div>
                <div class="modal-body">

                    <form action="CheckByRadius" class="form-group" role="search" method="POST">
                        {% csrf_token %}

                        <fieldset>
                            <table>
                                <table class='table' style="border: none;">
                                    <tr>
                                        <th>Latitude</th>
                                        <td>: <input size="58" name="latM" type="text" id="latM" value=""></td>
                                    </tr>
                                    <tr>
                                        <th>Longitude</th>
                                        <td>: <input size="58" name="lonM" type="text" id="lonM" value=""></td>
                                    </tr>
                                </table>

                                <div class="form-group has-feedback">
                                    <input name="radius" style="text-align: center;" id="slider-point" class="border-0" type="range" min="0" max="1000" value={{radius}}><span class="font-weight-bold  ml-2 mt-1 valueSpan"></span>
                                </div>
                                <!-- <input type="submit" value="Search"> -->
                                <input class="btn btn-success btn-block" type="submit" value="Get Building">

                        </fieldset>
                    </form>
                </div>
                <div class="modal-footer">
                    <button id='closeR' type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>

                </div>
            </div>
        </div>
    </div>
    <!-- end modal search radius -->
    <!-- modal polygon -->
    <div class="modal fade" id="PolygonModal" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-md">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">Check By Polygon</h4>
                </div>
                <div class="modal-body">
                    <form action="{% url 'apps:CheckByPolygon' %}" class="form-group" role="search" method="POST">
                        {% csrf_token %}

                        <fieldset>
                            <table>
                                <table class='table' style="border: none;">
                                    <tr>
                                        <th>Koordinat</th>
                                        <td>: <input size="58" name="coordinateZone" type="text" id="coordinateZone" value=""></td>
                                    </tr>
                                </table>

                                <input class="btn btn-success btn-block" type="submit" value="Get Building">
                                <!-- <button type="submit" class="btn btn-success btn-block" data-dismiss="modal">Get Building</button> -->

                        </fieldset>
                    </form>
                </div>
                <div class="modal-footer">
                    <button id='closeP' type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>

                </div>
            </div>
        </div>
    </div>
    <!-- /second navbar -->
    <!-- modal det -->
    <div class="modal fade" id="featureModal" tabindex="-1" role="dialog" style="padding-top: 50px;">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" type="button" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title text-primary" id="feature-title">Information</h4>
                </div>
                <div class="modal-body" id="feature-info">

                </div>
                <div class="modal-footer">
                    <div class="row">
                        {% if user.is_superuser %}
                        <div class="col-sm-6 text-left" id="button-ijo">
                        </div>
                        <div class="col-sm-6 ">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        </div>
                        {% else %}
                        <div class="col-sm-12">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- end modal det -->

    <!-- modal kelurahan -->
    <div class="modal fade" id="modalkelurahan" tabindex="-1" role="dialog" style="padding-top: 50px;">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" type="button" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title text-primary" id="feature-title">Information</h4>
                </div>
                <div class="modal-body" id="featurekelurahan">

                </div>
                <div class="modal-footer">
                    <div class="row">
                        {% if user.is_superuser %}
                        <div class="col-sm-6 text-left" id="button-ijo">
                        </div>
                        <div class="col-sm-6 ">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        </div>
                        {% else %}
                        <div class="col-sm-12">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modal_delete_1" tabindex="+1" role="dialog">
        <div class="modal-dialog modal-md">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">Delete Polygon</h4>
                </div>
                <div class="modal-body">
                    <h4>Yakin gak yakin gak ??</h4>
                    <!-- <form action="api/v1/delete" class="form-group" method="POST"> -->

                    <!-- {% csrf_token %} -->
                    <fieldset id="data-poly">

                        <table class="table table_input table-striped table-bordered table-condensed hidden">
                            <tr>
                                <th>Id</th>
                                <td><input size="58" name="id_poly_delete" type="text" id="id_poly_delete" value=""></td>
                            </tr>

                        </table>
                        <div id='actionedit' style="padding-top: 20px;">
                            <div class="navbar-right">
                                <input id='buttondelete' class="btn btn-danger" type="submit" value="Delete">
                                <input class="btn btn-default" type="button" value="Close" data-dismiss='modal'>
                            </div>
                        </div>
                    </fieldset>

                    <!-- </form> -->
                </div>
            </div>
        </div>
    </div>




    <div class="page_loader"></div>

    <script src="https://use.fontawesome.com/d232835e93.js"></script>

    <script src="https://unpkg.com/leaflet.markercluster@1.4.1/dist/leaflet.markercluster.js"></script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/leaflet.locatecontrol/dist/L.Control.Locate.min.js" charset="utf-8"></script>
<script src="https://cdn.jsdelivr.net/npm/leaflet.locatecontrol/dist/L.Control.Locate.min.js" charset="utf-8"></script> -->

    <script src="https://unpkg.com/esri-leaflet@2.5.1/dist/esri-leaflet.js"></script>
    <script src="https://unpkg.com/esri-leaflet-geocoder@2.3.3/dist/esri-leaflet-geocoder.js"></script>
    <script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw-src.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.6/handlebars.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.fullscreen/1.4.2/Control.FullScreen.min.js"></script>

    <!-- Core JS files -->
    <script type="text/javascript" src="{% static 'js/plugins/loaders/pace.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/core/libraries/jquery.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/core/libraries/bootstrap.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/plugins/loaders/blockui.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/plugins/ui/nicescroll.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/plugins/ui/drilldown.js' %}"></script>
    <!-- /core JS files -->

    <!-- Theme JS files -->
    <script type="text/javascript" src="{% static 'js/plugins/visualization/d3/d3.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/plugins/visualization/d3/d3_tooltip.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/plugins/forms/styling/switchery.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/plugins/forms/styling/uniform.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/plugins/forms/selects/bootstrap_multiselect.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/plugins/ui/moment/moment.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/plugins/pickers/daterangepicker.js' %}"></script>

    <script type="text/javascript" src="{% static 'js/plugins/ui/ripple.min.js' %}"></script>
    <!-- /theme JS files -->

    <script src="{% static 'js/leaflet-bing-layer.js' %}"></script>

    {% block js.maps %} {% endblock js.maps %} {% block js %}
    <script>
    </script>
    <script type="text/javascript" src="{% static 'js/maps.js' %}"></script>
    {% endblock js %}

    <script src="{% static 'js/script.js' %}"></script>

</body>

</html>

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

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

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

    var geo_batas_kel = 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) {
                    content = `<div class="modal-dialog modal-md">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                <h4 class="modal-title">INFORMASI</h4>
                            </div>
                            <div class="modal-body">
                                <div class="tabbable">
                                    <ul class="nav nav-tabs nav-tabs-bottom nav-justified">
                                        <li class="active text-primary" id="feature-title"><a href="#left-tab1-feas-upl" data-toggle="tab" id="info">Informasi Administrasi</a></li>
                                        <li><a href="#right-tab2-feas-upl" data-toggle="tab" id="edit">Informasi Kependudukan</a></li>
                                        <li><a href="#right-tab3-feas-upl" data-toggle="tab" id="edit">Informasi Pekerjaan & Pendidikan</a></li>
                                    </ul>                            
                                    <div class="tab-content">
                                        <div class="tab-pane active" id="left-tab1-feas-upl" style="padding-bottom: 17px;">
                                            <div style="width: 350px; margin-left:10px;">
                                                <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>
                                                    <tr>
                                                        <th>Jumlah Penduduk</th>
                                                        <td>:&nbsp` + feature.administrasi.f6 + `</td>
                                                    </tr>
                                                    <tr>
                                                        <th>Jumlah KK</th>
                                                        <td>:&nbsp` + feature.administrasi.f7 + `</td>
                                                    </tr>
                                                </table>
                                            </div>
                                        </div>
                                        <div class="tab-pane" id="right-tab2-feas-upl" style="padding-bottom: 17px;">
                                            <div style="width: 350px; margin-left:10px;">
                                                <table>
                                                    <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>
                                                        <th>Belum Kawin</th>
                                                        <td>:&nbsp` + feature.penduduk.f3 + `</td>
                                                    </tr>
                                                    <tr>
                                                        <th>Kawin</th>
                                                        <td>:&nbsp` + feature.penduduk.f4 + `</td>
                                                    </tr>
                                                    <tr>
                                                        <th>cerai hidup</th>
                                                        <td>:&nbsp` + feature.penduduk.f5 + `</td>
                                                    </tr>
                                                    <tr>
                                                        <th>cerai mati</th>
                                                        <td>:&nbsp` + feature.penduduk.f10 + `</td>
                                                    </tr>
                                                    <tr>
                                                        <th>wajib KTP</th>
                                                        <td>:&nbsp` + feature.penduduk.f11 + `</td>
                                                    </tr>
                                                    <tr>
                                                        <th>Islam</th>
                                                        <td>:&nbsp` + feature.penduduk.f12 + `</td>
                                                    </tr>
                                                    <tr>
                                                        <th>Kristen</th>
                                                        <td>:&nbsp` + feature.penduduk.f13 + `</td>
                                                    </tr>
                                                    <tr>
                                                        <th>Katolik</th>
                                                        <td>:&nbsp` + feature.penduduk.f14 + `</td>
                                                    </tr>
                                                    <tr>
                                                        <th>Hindu</th>
                                                        <td>:&nbsp` + feature.penduduk.f15 + `</td>
                                                    </tr>
                                                    <tr>
                                                        <th>Budha</th>
                                                        <td>:&nbsp` + feature.penduduk.f16 + `</td>
                                                    </tr>
                                                    <tr>
                                                        <th>Konghucu</th>
                                                        <td>:&nbsp` + feature.penduduk.f17 + `</td>
                                                    </tr>
                                                    <tr>
                                                        <th>Kepercayaan Lain</th>
                                                        <td>:&nbsp` + feature.penduduk.f18 + `</td>
                                                    </tr>
                                                </table>
                                            </div>
                                        </div>
                                        <div class="tab-pane" id="right-tab3-feas-upl" style="padding-bottom: 17px;">
                                            <div style="width: 350px; margin-left:10px;">
                                                <table>
                                                    <tr>
                                                        <th>Tidak Sekolah</th>
                                                        <td>:&nbsp` + feature.pekerjaan_pendidikan.f1 + `</td>
                                                    </tr>
                                                    <tr>
                                                        <th>Belum Tamat</th>
                                                        <td>:&nbsp` + feature.pekerjaan_pendidikan.f2 + `</td>
                                                    </tr>
                                                    <tr>
                                                        <th>Tamat SD</th>
                                                        <td>:&nbsp` + feature.pekerjaan_pendidikan.f3 + `</td>
                                                    </tr>
                                                    <tr>
                                                        <th>SLTP</th>
                                                        <td>:&nbsp` + feature.pekerjaan_pendidikan.f4 + `</td>
                                                    </tr>
                                                    <tr>
                                                        <th>SLTA</th>
                                                        <td>:&nbsp` + feature.pekerjaan_pendidikan.f5 + `</td>
                                                    </tr>
                                                    <tr>
                                                        <th>Diploma I</th>
                                                        <td>:&nbsp` + feature.pekerjaan_pendidikan.f10 + `</td>
                                                    </tr>
                                                    <tr>
                                                        <th>Diploma II</th>
                                                        <td>:&nbsp` + feature.pekerjaan_pendidikan.f11 + `</td>
                                                    </tr>
                                                    <tr>
                                                        <th>Diploma IV/Strata I</th>
                                                        <td>:&nbsp` + feature.pekerjaan_pendidikan.f12 + `</td>
                                                    </tr>
                                                    <tr>
                                                        <th>Strata I</th>
                                                        <td>:&nbsp` + feature.pekerjaan_pendidikan.f13 + `</td>
                                                    </tr>
                                                    <tr>
                                                        <th>Strata II</th>
                                                        <td>:&nbsp` + feature.pekerjaan_pendidikan.f14 + `</td>
                                                    </tr>
                                                    <tr>
                                                        <th>Strata III</th>
                                                        <td>:&nbsp` + feature.pekerjaan_pendidikan.f15 + `</td>
                                                    </tr>
                                                    <tr>
                                                        <th>Tidak Bekerja</th>
                                                        <td>:&nbsp` + feature.pekerjaan_pendidikan.f16 + `</td>
                                                    </tr>
                                                    <tr>
                                                        <th>Aparatur Pemerintah</th>
                                                        <td>:&nbsp` + feature.pekerjaan_pendidikan.f17 + `</td>
                                                    </tr>
                                                    <tr>
                                                        <th>Tenaga Pendidik</th>
                                                        <td>:&nbsp` + feature.pekerjaan_pendidikan.f18 + `</td>
                                                    </tr>
                                                    <tr>
                                                        <th>Wiraswasta</th>
                                                        <td>:&nbsp` + feature.pekerjaan_pendidikan.f18 + `</td>
                                                    </tr>
                                                    <tr>
                                                        <th>Pertanian</th>
                                                        <td>:&nbsp` + feature.pekerjaan_pendidikan.f18 + `</td>
                                                    </tr>
                                                    <tr>
                                                        <th>Tenaga Kesehatan</th>
                                                        <td>:&nbsp` + feature.pekerjaan_pendidikan.f18 + `</td>
                                                    </tr>
                                                    <tr>
                                                        <th>Pensiunan</th>
                                                        <td>:&nbsp` + feature.pekerjaan_pendidikan.f18 + `</td>
                                                    </tr>
                                                    <tr>
                                                        <th>Pegawai</th>
                                                        <td>:&nbsp` + feature.pekerjaan_pendidikan.f18 + `</td>
                                                    </tr>
                                                    <tr>
                                                        <th>Tentara</th>
                                                        <td>:&nbsp` + feature.pekerjaan_pendidikan.f18 + `</td>
                                                    </tr>
                                                    <tr>
                                                        <th>Kepolisian</th>
                                                        <td>:&nbsp` + feature.pekerjaan_pendidikan.f18 + `</td>
                                                    </tr>
                                                    <tr>
                                                        <th>Pedagang</th>
                                                        <td>:&nbsp` + feature.pekerjaan_pendidikan.f18 + `</td>
                                                    </tr>
                                                    <tr>
                                                        <th>Petani</th>
                                                        <td>:&nbsp` + feature.pekerjaan_pendidikan.f18 + `</td>
                                                    </tr>
                                                    <tr>
                                                        <th>Peternak</th>
                                                        <td>:&nbsp` + feature.pekerjaan_pendidikan.f18 + `</td>
                                                    </tr>
                                                    <tr>
                                                        <th>Nelayan</th>
                                                        <td>:&nbsp` + feature.pekerjaan_pendidikan.f18 + `</td>
                                                    </tr>
                                                    <tr>
                                                        <th>Karyawan</th>
                                                        <td>:&nbsp` + feature.pekerjaan_pendidikan.f18 + `</td>
                                                    </tr>
                                                    <tr>
                                                        <th>Buruh</th>
                                                        <td>:&nbsp` + feature.pekerjaan_pendidikan.f18 + `</td>
                                                    </tr>
                                                    <tr>
                                                        <th>Pembantu</th>
                                                        <td>:&nbsp` + feature.pekerjaan_pendidikan.f18 + `</td>
                                                    </tr>
                                                    <tr>
                                                        <th>Tukang</th>
                                                        <td>:&nbsp` + feature.pekerjaan_pendidikan.f18 + `</td>
                                                    </tr>
                                                    <tr>
                                                        <th>Pendeta</th>
                                                        <td>:&nbsp` + feature.pekerjaan_pendidikan.f18 + `</td>
                                                    </tr>
                                                    <tr>
                                                        <th>Pator</th>
                                                        <td>:&nbsp` + feature.pekerjaan_pendidikan.f18 + `</td>
                                                    </tr>
                                                    <tr>
                                                        <th>Ustadz</th>
                                                        <td>:&nbsp` + feature.pekerjaan_pendidikan.f18 + `</td>
                                                    </tr>
                                                    <tr>
                                                        <th>Dosen</th>
                                                        <td>:&nbsp` + feature.pekerjaan_pendidikan.f18 + `</td>
                                                    </tr>
                                                    <tr>
                                                        <th>Guru</th>
                                                        <td>:&nbsp` + feature.pekerjaan_pendidikan.f18 + `</td>
                                                    </tr>
                                                    <tr>
                                                        <th>Pilot</th>
                                                        <td>:&nbsp` + feature.pekerjaan_pendidikan.f18 + `</td>
                                                    </tr>
                                                    <tr>
                                                        <th>Pengacara</th>
                                                        <td>:&nbsp` + feature.pekerjaan_pendidikan.f18 + `</td>
                                                    </tr>
                                                    <tr>
                                                        <th>Notaris</th>
                                                        <td>:&nbsp` + feature.pekerjaan_pendidikan.f18 + `</td>
                                                    </tr>
                                                    <tr>
                                                        <th>Arsitek</th>
                                                        <td>:&nbsp` + feature.pekerjaan_pendidikan.f18 + `</td>
                                                    </tr>
                                                    <tr>
                                                        <th>Akuntan</th>
                                                        <td>:&nbsp` + feature.pekerjaan_pendidikan.f18 + `</td>
                                                    </tr>
                                                    <tr>
                                                        <th>Konsultan</th>
                                                        <td>:&nbsp` + feature.pekerjaan_pendidikan.f18 + `</td>
                                                    </tr>
                                                    <tr>
                                                        <th>Dokter</th>
                                                        <td>:&nbsp` + feature.pekerjaan_pendidikan.f18 + `</td>
                                                    </tr>
                                                    <tr>
                                                        <th>Bidan</th>
                                                        <td>:&nbsp` + feature.pekerjaan_pendidikan.f18 + `</td>
                                                    </tr>
                                                    <tr>
                                                        <th>Perawat</th>
                                                        <td>:&nbsp` + feature.pekerjaan_pendidikan.f18 + `</td>
                                                    </tr>
                                                    <tr>
                                                        <th>Psikiater</th>
                                                        <td>:&nbsp` + feature.pekerjaan_pendidikan.f18 + `</td>
                                                    </tr>
                                                    <tr>
                                                        <th>Sopir</th>
                                                        <td>:&nbsp` + feature.pekerjaan_pendidikan.f18 + `</td>
                                                    </tr>
                                                    <tr>
                                                        <th>Lainnya</th>
                                                        <td>:&nbsp` + feature.pekerjaan_pendidikan.f18 + `</td>
                                                    </tr>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>                        
                                </div>
                            </div>
                        </div>
                    </div>`;
                    $("#modal-kelurahan").modal("show");
                    $("#modal-kelurahan").html(content);

                },
                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_kel.resetStyle(e.target);
                }

            });
        }
    }).addTo(map);

    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);
                }

            });
        }
    }).addTo(map);

    var geo_jalan = L.geoJson(null, {
        style: function(feature) {
            return {
                color: "#fcba03",
                weight: 5,
                opacity: 2,
                fillcolor: "#fcba03",
                fillOpacity: 0
            };
        },
        onEachFeature: function(feature, layer) {
            layer.on({
                mouseover: function(e) {
                    var layer = e.target;
                    layer.setStyle({
                        weight: 5,
                        Color: "#067800",
                        fillColor: "#067800",

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

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

            });
        }
    }).addTo(map);

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

    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);

    L.control.layers(baseMaps = {}, overlayMaps = {
        'Batas Kecamatan': geo_batas_kec,
        'Batas Kota': geo_batas,
        'batas desa': geo_batas_kel,
        //        'jalan': geo_jln
    }).addTo(map);
</script>