Skip to content

O
OKU-GIS
Commit 4086f552 authored by Manggar Mahardhika's avatar Manggar Mahardhika
Browse files
Options

push pbb

parent d81d1276
Hide whitespace changes
Inline Side-by-side
Showing with 1031 additions and 22 deletions
API/urls.py
View file @ 4086f552
...@@ -25,6 +25,8 @@ urlpatterns = [ ...@@ -25,6 +25,8 @@ urlpatterns = [
path('desangab', views.desangab, name='desangab'), path('desangab', views.desangab, name='desangab'),
path('building', views.building, name='building'), path('building', views.building, name='building'),
path('edit_kec', views.editkec, name='edit_kec'),
path('jalan', views.jalan, name='jalan'), path('jalan', views.jalan, name='jalan'),
path('sungai', views.sungai, name='sungai'), path('sungai', views.sungai, name='sungai'),
path('edit', views.editpoly, name='edit'), path('edit', views.editpoly, name='edit'),
......
API/views.py
View file @ 4086f552
...@@ -540,9 +540,90 @@ def kecamatan(request): ...@@ -540,9 +540,90 @@ def kecamatan(request):
( (
A.ID, A.ID,
A.kecamatan, A.kecamatan,
st_area ( A.geom :: geography ),
SUM ( b.jumlah_pen ), SUM ( b.jumlah_pen ),
SUM ( b.jumlah_kk ), SUM ( b.jumlah_kk )
st_area ( A.geom :: geography ) ),
'penduduk',
(
SUM ( b.pria),
SUM ( b.wanita),
SUM ( b.belum_kawin),
SUM ( b.kawin),
SUM ( b.cerai_hidup),
SUM ( b.cerai_mati),
SUM ( b.wajib_ktp),
SUM ( b.islam),
SUM ( b.kristen),
SUM ( b.khatolik),
SUM ( b.hindu),
SUM ( b.budha),
SUM ( b.konghucu),
SUM ( b.kepercayaan_lain),
SUM ( b.u0),
SUM ( b.u5),
SUM ( b.u10),
SUM ( b.u15),
SUM ( b.u20),
SUM ( b.u25),
SUM ( b.u30),
SUM ( b.u35),
SUM ( b.u40),
SUM ( b.u45),
SUM ( b.u50),
SUM ( b.u55),
SUM ( b.u60),
SUM ( b.u65),
SUM ( b.u70),
SUM ( b.u75)
),
'pekerjaan_pendidikan',
(
SUM ( b.tidak_sekolah),
SUM ( b.belum_tamat),
SUM ( b.tamat_sd),
SUM ( b.sltp),
SUM ( b.slta),
SUM ( b.diploma_i),
SUM ( b.diploma_ii),
SUM ( b.diploma_iv),
SUM ( b.strata_ii),
SUM ( b.strata_iii),
SUM ( b.tidak_bekerja),
SUM ( b.aparatur_pemerintah),
SUM ( b.tenaga_pendidik),
SUM ( b.wiraswasta),
SUM ( b.pertanian),
SUM ( b.tenaga_kesehatan),
SUM ( b.pensiunan),
SUM ( b.pegawai),
SUM ( b.tentara),
SUM ( b.kepolisian),
SUM ( b.pedagang),
SUM ( b.petani),
SUM ( b.peternak),
SUM ( b.nelayan),
SUM ( b.karyawan),
SUM ( b.buruh),
SUM ( b.pembantu),
SUM ( b.tukang),
SUM ( b.pendeta),
SUM ( b.pastor),
SUM ( b.ustadz),
SUM ( b.dosen),
SUM ( b.guru),
SUM ( b.pilot),
SUM ( b.pengacara),
SUM ( b.notaris),
SUM ( b.arsitek),
SUM ( b.akuntan),
SUM ( b.konsultan),
SUM ( b.dokter),
SUM ( b.bidan),
SUM ( b.perawat),
SUM ( b.psikiater),
SUM ( b.sopir),
SUM ( b.lainnya)
), ),
'geometry', 'geometry',
ST_AsGeoJSON ( A.geom :: geometry ) :: json ST_AsGeoJSON ( A.geom :: geometry ) :: json
...@@ -564,6 +645,30 @@ def kecamatan(request): ...@@ -564,6 +645,30 @@ def kecamatan(request):
data = {'kecamatan':kec_res} data = {'kecamatan':kec_res}
return Response(data) return Response(data)
@api_view(('GET',))
@renderer_classes((TemplateHTMLRenderer, JSONRenderer))
def editkec(request):
idkec = request.GET.get("id_kec")
with conn.cursor() as kec:
kec.execute(f"""SELECT
json_build_object (
'type',
'Feature',
'administrasi',
(
A.ID,
A.kecamatan
),
'geometry',
ST_AsGeoJSON ( A.geom :: geometry ) :: json
)
FROM
geo_data_kecamatan A
where a.id = {idkec}""")
kec_res_ = kec.fetchall()
# data = {'gen':kec_res_}
return Response(kec_res_[0][0])
@api_view(('GET',)) @api_view(('GET',))
@renderer_classes((TemplateHTMLRenderer, JSONRenderer)) @renderer_classes((TemplateHTMLRenderer, JSONRenderer))
def desangab(request): def desangab(request):
......
OKU/settings.py
View file @ 4086f552
...@@ -55,6 +55,12 @@ MIDDLEWARE = [ ...@@ -55,6 +55,12 @@ MIDDLEWARE = [
'django.middleware.clickjacking.XFrameOptionsMiddleware', 'django.middleware.clickjacking.XFrameOptionsMiddleware',
] ]
REST_FRAMEWORK = {
'DEFAULT_AUTHENTICATION_CLASSES': [
'rest_framework.authentication.TokenAuthentication',
]
}
ROOT_URLCONF = 'OKU.urls' ROOT_URLCONF = 'OKU.urls'
TEMPLATES = [ TEMPLATES = [
...@@ -85,6 +91,7 @@ DATABASES = { ...@@ -85,6 +91,7 @@ DATABASES = {
'NAME': 'oku_gis_new', 'NAME': 'oku_gis_new',
'USER': 'postgres', 'USER': 'postgres',
'PASSWORD' : 'khansia215758', 'PASSWORD' : 'khansia215758',
# 'HOST': '30.10.10.100',
'HOST': '30.10.20.102', 'HOST': '30.10.20.102',
'PORT': '5432', 'PORT': '5432',
# 'HOST': '103.126.28.66', # 'HOST': '103.126.28.66',
......
require.txt
View file @ 4086f552
...@@ -7,7 +7,6 @@ Django==3.2.4 ...@@ -7,7 +7,6 @@ Django==3.2.4
django-utils-six==2.0 django-utils-six==2.0
django-widget-tweaks==1.4.8 django-widget-tweaks==1.4.8
djangorestframework==3.12.4 djangorestframework==3.12.4
Flask==2.0.1
gunicorn==20.1.0 gunicorn==20.1.0
importlib-metadata==4.8.1 importlib-metadata==4.8.1
itsdangerous==2.0.1 itsdangerous==2.0.1
......
static/js/scripts_js_o.js
View file @ 4086f552
...@@ -790,12 +790,431 @@ var geo_batas_kec = L.geoJson(null, { ...@@ -790,12 +790,431 @@ var geo_batas_kec = L.geoJson(null, {
$(".nama_kelurahan").html(feature.administrasi.f2) $(".nama_kelurahan").html(feature.administrasi.f2)
$(".kode_kelurahan").html('-') $(".kode_kelurahan").html('-')
$(".jumlah_penduduk_kelurahan").html(feature.administrasi.f3) $(".jumlah_penduduk_kelurahan").html(feature.administrasi.f4)
$(".luas_wilayah_kelurahan").html(feature.administrasi.f5.toFixed(3)+' m2') $(".luas_wilayah_kelurahan").html(feature.administrasi.f3.toFixed(3)+' m2')
$(".jumlah_kk_kelurahan").html(feature.administrasi.f4) $(".jumlah_kk_kelurahan").html(feature.administrasi.f5)
$(".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="#" 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>`)
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);
// $("modal_kecamatan").modal('show'); // $("modal_kecamatan").modal('show');
// // var geocodeService = L.esri.Geocoding.geocodeService(); // // var geocodeService = L.esri.Geocoding.geocodeService();
...@@ -806,35 +1225,46 @@ var geo_batas_kec = L.geoJson(null, { ...@@ -806,35 +1225,46 @@ var geo_batas_kec = L.geoJson(null, {
<div class="modal-dialog modal-md"> <div class="modal-dialog modal-md">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header bg-info"> <div class="modal-header bg-info">
<button type="button" class="close" data-dismiss="modal" onclick="destroyfade()">&times;</button> <button type="button" class="close" data-dismiss="modal" onclick="closemodalkec()">&times;</button>
<h6 class="modal-title">Delete Point</h6> <h6 class="modal-title">Edit Kecamatan</h6>
</div> </div>
<div class="modal-body" style="overflow-x: hidden;max-height: 300px;overflow-y: scroll;padding-left: 15px;"> <div class="modal-body" style="overflow-x: hidden;max-height: 450px;overflow-y: scroll;padding-left: 15px;">
<div id="map-for-delete" style="width: 400px;height: 300px;position: relative;margin: 10px;"></div> <div id="map-for-edit-kec" style="width: 540px;height: 340px;position: relative;margin: 10px;"></div>
<input style="display:none;" id="id_kec" type="text" class="form-control" value="` + feature.administrasi.f1 + `"required> <input style="display:none;" id="id_kec" type="text" class="form-control" value="` + feature.administrasi.f1 + `"required>
<input style="display:none;" id="coor_kec" type="text" class="form-control" value="">
<input style="display:none;" id="poly_coor_kec" type="text" class="form-control" value="">
<div class="form-group">
<div class="row" style="margin-top: 15px;"> <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 Kecamatan</label> <label class="col-lg-3 control-label lbl-top" style="margin-top: 15px;">Nama Kecamatan</label>
<div class="col-lg-9"> <div class="col-lg-9">
<input id="nama_kec" type="text" class="form-control" value="` + feature.administrasi.f2 + `"required> <input id="nama_kec" type="text" class="form-control" value="` + feature.administrasi.f2 + `"required>
</div> </div>
</div>
<div class="row" style="margin-top: 15px;">
<label class="col-lg-3 control-label lbl-top" style="margin-top: 15px;">Luas Kecamatan</label>
<div class="col-lg-6">
<input id="luas_kec" type="text" class="form-control" value="` + feature.administrasi.f3.toFixed(3) + `"required>
</div>
<div class="col-lg-3">
<button type="submit" id="btn_ceklwas_kec" class="btn btn-primary" title="Check Luas" style="border-radius: 0px 10px 10px 0px;
outline: none;
background: linear-gradient(
201.55deg
, #72BBFF -24.21%, #3D5CCA 130.65%);"><i class="icon-search4 text-muted text-size-base" style="color: white;"></i>
</button>
</div>
</div> </div>
</div> </div>
</div> </div>
<hr> <hr>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-info" id="deletepointot">Hapus</button> <button type="button" class="btn btn-info" id="btn_edit_kec">Save Changes</button>
</div> </div>
</div> </div>
</div>`; </div>`;
$("#modal_kecamatan").html(content_edit_kec) $("#modal_kecamatan").html(content_edit_kec)
// });
} }
}); });
} }
...@@ -925,6 +1355,10 @@ function bataskec() { ...@@ -925,6 +1355,10 @@ function bataskec() {
var checkBox = document.getElementById("batas_kec"); var checkBox = document.getElementById("batas_kec");
if (checkBox.checked == true) { if (checkBox.checked == true) {
// loaderPage(true); // loaderPage(true);
$('#scrapex').append(`<script id="idscrapexmin" type="text/javascript " src="static/js/apexcharts.min.js"><\/script>`);
$('#scrapex').append(`<script id="idscrapex" type="text/javascript " src="static/js/apexcharts.js"><\/script>`);
if (map.hasLayer(geo_batas_kec)) { if (map.hasLayer(geo_batas_kec)) {
geo_batas_kec.clearLayers() geo_batas_kec.clearLayers()
geo_batas_kec.remove() geo_batas_kec.remove()
...@@ -2117,6 +2551,88 @@ $(document).on("click", "#buttondelete", function(e) { ...@@ -2117,6 +2551,88 @@ $(document).on("click", "#buttondelete", function(e) {
}); });
}); });
function closemodalkec(){
$("#modal_detail_kelurahan").modal("show")
}
$(document).on("click", "#btn_edit_kec", function(e) {
$("#modal_detail_kelurahan").modal("hide")
var map_edit_kec = new L.map('map-for-edit-kec', {
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_kec);
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_kec)
if (map_edit_kec.hasLayer(polylyly)) {
polylyly.remove()
}
var id_poly_kec = $('#id_kec').val();
loaderPage(true);
$.ajax({
url: "api/edit_kec",
data: {
'id_kec': id_poly_kec
},
dataType: 'json',
success: function(data) {
setTimeout(function() {
map_edit_kec.invalidateSize();
}, 1000);
loaderPage(false);
// console.log(data[0])
map_edit_kec.setView([data['geometry']['coordinates'][0][0][0][1], data['geometry']['coordinates'][0][0][0][0]], 11);
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_kec)
polylyly.enableEdit();
var hasil = (JSON.stringify(polylyly.toGeoJSON()))
$("#coorkec").val(hasil);
// polylyly.change(function() {
$('#btn_ceklwas_kec').click(function() {
var seeArea = L.GeometryUtil.geodesicArea(polylyly.getLatLngs()[0]);
var fixarea = seeArea.toFixed(3)
var separ = fixarea.toString().split(".");
// var areacom = separ.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
separ.join(".");
$("#luas_kec").val(fixarea);
})
$('#btn_edit_kec').click(function() {
var hasil = (JSON.stringify(polylyly.toGeoJSON()))
$("#coorkec").val(hasil);
})
}
});
});
// //
// map_cesium.camera.moveEnd.addEventListener(function() { // map_cesium.camera.moveEnd.addEventListener(function() {
...@@ -4214,6 +4730,374 @@ map.on('contextmenu', function(e) { ...@@ -4214,6 +4730,374 @@ map.on('contextmenu', function(e) {
}); });
}) })
$(".btn_cek_PBB").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 PBB")
$(".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 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 class="row" style="margin-top: 5px;margin-right:5px!important;">
<div class="form-group">
<label class="control-label lbl-top">NJOP dasar PBB : (Rp)</label>
<div class="">
<input id="nilai_njop_pbb" type="text" class="form-control" value="" required disabled>
</div>
</div>
</div>
<div class="row" style="margin-top: 5px;margin-right:5px!important;">
<div class="form-group">
<label class="control-label lbl-top">NJKP : (Rp)</label>
<div class="">
<input id="nilai_njkp" type="text" class="form-control" value="" required disabled>
</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">NJOP Bangunan Per m2 : (Rp)</label>
<div class="">
<input id="nilai_njop_bangunan" 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-left:5px!important;">
<div class="form-group">
<label class="control-label lbl-top">NJOP Bumi Per m2 : (Rp)</label>
<div class="">
<input id="nilai_njop_bumi" type="text" class="form-control" value="" required>
</div>
</div>
</div>
<div class="row" style="margin-top: 5px;margin-left:5px!important;">
<div class="form-group">
<label class="control-label lbl-top">NJOPTKP: (Rp)</label>
<div class="">
<input id="nilai_njop_tkp" type="text" class="form-control" value="0" required>
</div>
</div>
</div>
<div class="row" style="margin-top: 5px;margin-left:5px!important;">
<div class="form-group">
<label class="control-label lbl-top">PBB : (Rp)</label>
<div class="">
<input id="nilai_jml_pbb" 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();
})
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("")
$("#nilai_njop_bumi").val("")
$("#nilai_njop_bangunan").val("")
$("#nilai_njop_tkp").val("")
$("#nilai_njop_pbb").val("")
$("#nilai_njkp").val("")
$("#nilai_jml_pbb").val("")
}
});
function isi_all() {
var luas_rumah = $("#luas_polygon_rumah").val()
var luas_tanah = $("#luas_polygon_tanah").val()
var njop_bumi = $("#nilai_njop_bumi").val()
var njop_bang = $("#nilai_njop_bangunan").val()
var njop_tkp = $("#nilai_njop_tkp").val()
njop_bumi.toLocaleString()
njop_bang.toLocaleString()
if (luas_rumah == null) {
luas_rumah = 0
}
if (luas_tanah == null) {
luas_tanah = 0
}
if (njop_bumi == null) {
njop_bumi = 0
}
if (njop_bang == null) {
njop_bang = 0
}
if (njop_tkp == null) {
njop_tkp = 0
}
t_njop_bumi = njop_bumi * luas_tanah
t_njop_bang = njop_bang * luas_rumah
njop_d_pbb = t_njop_bang + t_njop_bumi
njkp_blm = njop_d_pbb - njop_tkp
njkp = 40/100 * njkp_blm
pbb = 0.5/100 *njkp
// pbb.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
// var separ_pbb = pbb.toString().split(".");
// separ_pbb.join(".")
pbx = pbb.toFixed(2)
$("#nilai_njop_pbb").val(njop_d_pbb.toLocaleString())
$("#nilai_njkp").val(njkp.toLocaleString())
$("#nilai_jml_pbb").val(pbb.toLocaleString())
}
$('#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()
});
$('#nilai_njop_bumi').on('input', function() {
isi_all()
});
$('#nilai_njop_bangunan').on('input', function() {
isi_all()
});
$('#nilai_njop_tkp').on('input', function() {
isi_all()
});
})
}); });
$(document).on("click", "#informasi_poo", function() { $(document).on("click", "#informasi_poo", function() {
......
templates/includes/modal.html
View file @ 4086f552
...@@ -433,7 +433,7 @@ ...@@ -433,7 +433,7 @@
width: 80px; width: 80px;
height: 45px; height: 45px;
border: 1pt solid gray;"> border: 1pt solid gray;">
<a href="" class="btn">Edit</a> <a href="#" class="btn">Edit</a>
</div> </div>
</div> </div>
<div class="col-md-6" style="margin-left: -30px;margin-top: 10px;"> <div class="col-md-6" style="margin-left: -30px;margin-top: 10px;">
...@@ -672,6 +672,17 @@ ...@@ -672,6 +672,17 @@
</div> </div>
</a> </a>
</div> </div>
<div class="col-md-4 text-center">
<a href="#" class="btn btn_cek_PBB">
<div>
<img src="{% static 'img/icon-1/kelurahan.svg' %}" alt="" style="width: 35px;
height: 35px;">
</div>
<div style="margin-top: 10px;">
<span>PBB</span>
</div>
</a>
</div>
</div> </div>
</fieldset> </fieldset>
......
templates/layout/layout.html
View file @ 4086f552
...@@ -51,7 +51,7 @@ ...@@ -51,7 +51,7 @@
} }
/* start hide fitur modal */ /* start hide fitur modal */
.tab_kdb_klb { /* .tab_kdb_klb {
display: none; display: none;
} }
...@@ -61,7 +61,8 @@ ...@@ -61,7 +61,8 @@
.btn_cek_KDBKLB { .btn_cek_KDBKLB {
display: none; display: none;
} } */
/* end hide fitur modal */ /* end hide fitur modal */
</style> </style>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment