markercluster bangunan

API/urls.py

@@ -100,4 +100,7 @@ urlpatterns = [
     path('search_list_perbaikan', views.search_list_perbaikan),
     path('dataperbaikan', views.data_perbaikan),
     
+    path('pointBangunan', views.pointBangunan),
+    path('pointBangunan_', views.pointBangunan_),
+    
 ]
\ No newline at end of file

API/views.py

@@ -4381,3 +4381,35 @@ def data_perbaikan(request):
         res_all.append(data_all)
         
     return Response(res_all)
+
+def pointBangunan(request):
+    # with conn.cursor() as points:
+    #     points.execute("SELECT st_astext(ST_centroid(geom)) FROM geo_bangunan")
+    #     point = points.fetchall()
+    
+    # result = []
+    # for i in point:
+    #     result.append(i[0])
+        
+    return JsonResponse({'result':'result'})
+
+def pointBangunan_(request):
+    center_lat = request.GET.get('center_lat')
+    center_lon = request.GET.get('center_lon')
+    radius = request.GET.get('radius')
+    print(type(radius))
+    
+    with conn.cursor() as points:
+        points.execute("""SELECT
+                            st_astext ( ST_centroid ( geom ) ) 
+                        FROM
+                            geo_bangunan 
+                        WHERE
+                            ST_DWithin(geography(geom), Geography(ST_MakePoint(%s, %s)), %s) LIMIT 15000"""% (float(center_lon), float(center_lat), radius))
+        point = points.fetchall()
+    
+    result = []
+    for i in point:
+        result.append(i[0])
+        
+    return JsonResponse({'result':result})
\ No newline at end of file

Application/views.py

@@ -599,8 +599,8 @@ class Dashboard(generic.TemplateView):
                 user_res.append(datas)
                 
         else:
-            user_data   = [{"id":"Not Login", "username":"Not Login", "firstname":"Not Login", "lastname":"Not Login","email":"Not Login","filepath":"Not Login"}]
-            user_res    = [{"id":"Not Login", "username":"Not Login", "name":"Not Login", "isactive":"Not Login","email":"Not Login","last":"Not Login", "group":"Not Login", "filepath":"Not Login"}]
+            user_data   = [{"id":"Not Login", "username":"Not Login", "firstname":"Not Login", "lastname":"Not Login","email":"Not Login","filepath":"placeholder.jpg"}]
+            user_res    = [{"id":"Not Login", "username":"Not Login", "name":"Not Login", "isactive":"Not Login","email":"Not Login","last":"Not Login", "group":"Not Login", "filepath":"placeholder.jpg"}]
 
             
             

static/js/scripts_js_o.js

@@ -111,7 +111,7 @@ function batas_desa_desa() {
 
                         $(".kode_kelurahan").html(feature.administrasi.f1)
                         $(".jumlah_penduduk_kelurahan").html(feature.administrasi.f6)
-                        $(".luas_wilayah_kelurahan").html(feature.administrasi.f10.toFixed(3)+' m2')
+                        $(".luas_wilayah_kelurahan").html(feature.administrasi.f10.toFixed(3) + ' m2')
                         $(".jumlah_kk_kelurahan").html(feature.administrasi.f7)
                         $(".tombol-edit").html(`<a href="/editkelurahan?kode_dagri=` + encodeURIComponent(feature.administrasi.f1) + `" class='btn'>Edit</a>`)
 
@@ -791,7 +791,7 @@ var geo_batas_kec = L.geoJson(null, {
 
                 $(".kode_kelurahan").html('-')
                 $(".jumlah_penduduk_kelurahan").html(feature.administrasi.f3)
-                $(".luas_wilayah_kelurahan").html(feature.administrasi.f5.toFixed(3)+' m2')
+                $(".luas_wilayah_kelurahan").html(feature.administrasi.f5.toFixed(3) + ' m2')
                 $(".jumlah_kk_kelurahan").html(feature.administrasi.f4)
                 $(".tombol-edit").html(`<a href="#" class='btn' data-toggle="modal" data-target="#modal_kecamatan" id="btn_edit_kec" data-backdrop="static" data-keyboard="false"><i>Edit</i></a>`)
                     // $(".tombol-edit").html(`<a href="/editkelurahan?kode_dagri=` + encodeURIComponent(feature.administrasi.f1) + `" class='btn'>Edit</a>`)
@@ -955,13 +955,165 @@ function bataskec() {
     cek_overlay()
 }
 
+var point_bangunan = L.geoJSON(null, {
+    pointToLayer: function(feature, latlng) {
+        return L.circleMarker(latlng, {
+            radius: 8,
+            fillColor: '#ff7800',
+            color: '#000',
+            weight: 1,
+            opacity: 1,
+            fillOpacity: 0.8
+        });
+    }
+})
+
+function geo_json_po_bangunan(data) {
+    point_bangunan.addData(data)
+}
+
+var marker_cluster_point_bangunan = L.markerClusterGroup({
+    iconCreateFunction: function(cluster) {
+        var childCount = cluster.getChildCount();
+
+        return new L.DivIcon({
+            html: '<div><span>' + childCount + '</span></div>',
+            className: 'marker-cluster-adm',
+            iconSize: new L.Point(40, 40)
+        });
+    },
+    //Disable all of the defaults:
+    spiderfyOnMaxZoom: false,
+    showCoverageOnHover: false
+});
+
+var progress = document.getElementById('progress');
+var progressBar = document.getElementById('progress-bar');
+
+function updateProgressBar(processed, total, elapsed, layersArray) {
+    if (elapsed > 1000) {
+        // if it takes more than a second to load, display the progress bar:
+        progress.style.display = 'block';
+        progressBar.style.width = Math.round(processed / total * 100) + '%';
+    }
+
+    if (processed === total) {
+        // all markers processed - hide the progress bar:
+        progress.style.display = 'none';
+    }
+}
+
+var markers = L.markerClusterGroup({ chunkedLoading: true, chunkProgress: updateProgressBar });
+
+var markerList = [];
+
+function getPointsBangunan(lat, lng, rad) {
+    $.ajax({
+        url: "api/pointBangunan_",
+        data: {
+            'center_lat': lat,
+            'center_lon': lng,
+            'radius': rad
+        },
+        dataType: 'json',
+        success: function(response) {
+            console.log(response)
+            var pointResult = response.result;
+            var mark_lis = []
+            for (var i = 0; i < pointResult.length; i++) {
+                var wkt_geom = pointResult[i];
+                var wkt = wkt_geom.replace("POINT(", "").replace(")", "").split(" ")
+                var marker = L.marker(L.latLng(+(wkt[1]), +(wkt[0])), {
+                    icon: L.divIcon({
+                        className: 'invisible-marker'
+                    })
+                });
+                mark_lis.push(marker)
+            }
+            markers.addLayers(mark_lis);
+            map.addLayer(markers);
+        }
+    });
+}
+
+function loadMapsCluster() {
+    $("#bangpoints").html(`<script src="static/bangunan.js"></script>`)
+
+    for (var i = 0; i < bangunanPoints.length; i++) {
+        var a = bangunanPoints[i];
+        var marker = L.marker(L.latLng(a[0], a[1]), {
+            icon: L.divIcon({
+                className: 'invisible-marker'
+            })
+        });
+        markerList.push(marker);
+    }
+    //console.log('start clustering: ' + window.performance.now());
+
+    markers.addLayers(markerList);
+    map.addLayer(markers);
+    return 1;
+}
+
+function x() {
+    if (loadMapsCluster) {
+        alert('gfdgfd')
+        loaderPage(false);
+    }
+}
+
 function georumah() {
+    loaderPage(true)
+
     var checkBox = document.getElementById("geo_building");
 
     if (checkBox.checked == true) {
+        console.log(markerList.length)
+
+        if (markerList.length == 0) {
+
+            $.ajax({
+                url: "api/pointBangunan",
+                dataType: 'json',
+                success: function(response) {
+
+                    $("#bangpoints").html(`<script src="static/bangunan.js"></script>`)
+
+                    for (var i = 0; i < bangunanPoints.length; i++) {
+                        var a = bangunanPoints[i];
+                        var marker = L.marker(L.latLng(a[0], a[1]), {
+                            icon: L.divIcon({
+                                className: 'invisible-marker'
+                            })
+                        });
+                        markerList.push(marker);
+                    }
+                    //console.log('start clustering: ' + window.performance.now());
+
+                    markers.addLayers(markerList);
+                    map.addLayer(markers);
+
+                    if (map.hasLayer(markers)) {
+                        loaderPage(false);
+                    }
+                }
+            });
+
+        } else {
+            markers.addLayers(markerList);
+            map.addLayer(markers);
+            if (map.hasLayer(markers)) {
+                loaderPage(false);
+            }
+
+        }
+
         $(".help_bangunan").html('Polygon Bangunan dan Line Jalan terlihat pada zoom > 16')
     } else {
+        loaderPage(false);
         $(".help_bangunan").html('')
+        markers.clearLayers()
+        markers.remove()
     }
     cek_overlay()
 }

templates/layout/layout.html

@@ -62,6 +62,10 @@
         .btn_cek_KDBKLB {
             display: none;
         }
+        
+        .invisible-marker {
+            display: none;
+        }
         /* end hide fitur modal */
     </style>
 
@@ -137,6 +141,9 @@
 
             <div class="content-wrapper">
                 <div class="content">
+                    <div id="progress">
+                        <div id="progress-bar"></div>
+                    </div>
                     <div id="map">
                         <div class="help_bangunan" style="position: absolute;z-index: 999;top: 0px;right: 60px;"></div>
 
@@ -384,6 +391,7 @@
     <!-- /theme JS files -->
     <div id='scrapex'></div>
     <div id='scrcesium'></div>
+    <div id='bangpoints'></div>
     <!-- <script type="text/javascript " src="{% static 'js/plugins/tables/datatables/datatables.min.js' %} "></script> -->
     <script type="text/javascript " src="{% static 'js/plugins/forms/selects/select2.min.js' %} "></script>