dropdown masih beberapa geometry belum nampak di map
This commit is contained in:
='fauz
+106
-82
@@ -127,8 +127,9 @@
|
||||
<select class="form-control select2 border border-primary" name="provinsiDropdown" id="provinsiDropdown"
|
||||
data-placeholder="Provinsi ......">
|
||||
<option></option>
|
||||
<option value="1">Option 1</option>
|
||||
<option value="2">Option 2</option>
|
||||
{% for provinsi in provinsis %}
|
||||
<option value="{{provinsi[0]}}">{{provinsi[1]}}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
@@ -209,6 +210,10 @@
|
||||
</script>
|
||||
<script>
|
||||
let currentLayer = null;
|
||||
let currentState = {
|
||||
level: null,
|
||||
kode: null
|
||||
};
|
||||
function loadLayer(url, onClickCallback, level = 'provinsi') {
|
||||
currentLevel = level;
|
||||
fetch(url)
|
||||
@@ -245,11 +250,9 @@
|
||||
currentLayer = L.geoJSON(data, {
|
||||
style: { color: "blue", weight: 2 },
|
||||
onEachFeature: function (feature, layer) {
|
||||
console.log(feature,layer)
|
||||
let clickTimer = null;
|
||||
layer.on('click', function (e) {
|
||||
layer.on('click', async function (e) {
|
||||
let kode = feature.properties.id;
|
||||
console.log(kode)
|
||||
// onClickCallback(kode);
|
||||
if (clickTimer) {
|
||||
// Double click detected
|
||||
@@ -260,11 +263,16 @@
|
||||
let kode = feature.properties.id;
|
||||
onClickCallback(kode);
|
||||
if (url.includes("/provinsi")) {
|
||||
localStorage.setItem('kode_provinsi', feature.properties.kode)
|
||||
const provinsiId = feature.properties.id;
|
||||
localStorage.setItem('kode_provinsi', provinsiId);
|
||||
|
||||
updateDropdown('provinsi',feature.properties.id)
|
||||
} else if (currentLevel === 'kabupatenkota') {
|
||||
localStorage.setItem('kode_kabupatenkota',feature.properties.kode)
|
||||
localStorage.setItem('kode_kabupatenkota',feature.properties.id)
|
||||
updateDropdown('kabupatenkota',feature.properties.id)
|
||||
}else if(currentLevel === 'kecamatan'){
|
||||
localStorage.setItem('kode_kecamatan',feature.properties.kode)
|
||||
localStorage.setItem('kode_kecamatan',feature.properties.id)
|
||||
updateDropdown('kecamatan',feature.properties.id)
|
||||
}
|
||||
} else {
|
||||
// Single click → Tampilkan popup
|
||||
@@ -658,13 +666,83 @@
|
||||
|
||||
$('#kecamatanDropdown').on('change', function (e) {
|
||||
const kodeKecamatan = $(this).val();
|
||||
console.log(kodeKecamatan)
|
||||
if (!kodeKecamatan) {
|
||||
console.warn("Kode kecamatan kosong atau null.");
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
localStorage.setItem('kode_kecamatan', kodeKecamatan);
|
||||
loadLayer(`/geojson/desa/${kodeKecamatan}`, () => {}, 'desa');
|
||||
|
||||
loadLayer(`/geojson/desa/${kodeKecamatan}`, () => {
|
||||
console.log("desa dimuat")
|
||||
}, 'desa');
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
<script>
|
||||
function updateDropdown(level, kode) {
|
||||
const dropdownId = {
|
||||
'provinsi': '#provinsiDropdown',
|
||||
'kabupatenkota': '#kabkotaDropdown',
|
||||
'kecamatan': '#kecamatanDropdown'
|
||||
}[level];
|
||||
const nextLevel = {
|
||||
'provinsi': '#provinsiDropdown',
|
||||
'kabupatenkota': '#kabkotaDropdown',
|
||||
'kecamatan': '#kecamatanDropdown'
|
||||
}[level];
|
||||
if ($(dropdownId).length) {
|
||||
$(dropdownId).val(kode).trigger('change.select2');
|
||||
if(level == 'provinsi'){
|
||||
// Ambil kabupaten berdasarkan provinsi
|
||||
const kabkotaURL = "{{ url_for('main.get_master_kabkota') }}";
|
||||
$.ajax({
|
||||
url: kabkotaURL,
|
||||
data: { provinsi_id: $(dropdownId).val() },
|
||||
dataType: 'json',
|
||||
success: function (data) {
|
||||
const results = data.map(kabupaten => ({
|
||||
id: kabupaten[0],
|
||||
text: kabupaten[1]
|
||||
}));
|
||||
|
||||
// Tambahkan ke dropdown kabupaten
|
||||
$('#kabkotaDropdown').select2({
|
||||
data: results,
|
||||
placeholder: 'Pilih Kabupaten/Kota',
|
||||
allowClear: true
|
||||
});
|
||||
}
|
||||
});
|
||||
}else if(level == 'kabupatenkota'){
|
||||
// Ambil kabupaten berdasarkan provinsi
|
||||
const kabkotaURL = "{{ url_for('main.get_master_kecamatan') }}";
|
||||
$.ajax({
|
||||
url: kabkotaURL,
|
||||
data: { kabkota_id: $(dropdownId).val() },
|
||||
dataType: 'json',
|
||||
success: function (data) {
|
||||
const results = data.map(kecamatan => ({
|
||||
id: kecamatan[0],
|
||||
text: kecamatan[1]
|
||||
}));
|
||||
|
||||
// Tambahkan ke dropdown kabupaten
|
||||
$('#kecamatanDropdown').select2({
|
||||
data: results,
|
||||
placeholder: 'Pilih Kecamatan',
|
||||
allowClear: true
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
$(document).ready(function () {
|
||||
console.log("ready for fetching data")
|
||||
const provinsiURL = "{{ url_for('main.get_master_provinsi') }}";
|
||||
@@ -672,78 +750,25 @@
|
||||
$('#provinsiDropdown').select2({
|
||||
placeholder: 'Pilih Provinsi',
|
||||
allowClear: true,
|
||||
ajax: {
|
||||
url: provinsiURL,
|
||||
dataType: 'json',
|
||||
delay: 250,
|
||||
data: function (params) {
|
||||
return {
|
||||
q: params.term
|
||||
};
|
||||
},
|
||||
processResults: function (data) {
|
||||
console.log(data)
|
||||
return {
|
||||
results: data.map(provinsi => ({
|
||||
id: provinsi[0],
|
||||
text: provinsi[1]
|
||||
}))
|
||||
};
|
||||
},
|
||||
cache: true
|
||||
},
|
||||
minimumInputLength: 0
|
||||
});
|
||||
|
||||
$('#kabkotaDropdown').select2({
|
||||
placeholder: 'Pilih Kabkota',
|
||||
allowClear: true,
|
||||
ajax: {
|
||||
url: provinsiURL,
|
||||
dataType: 'json',
|
||||
delay: 250,
|
||||
data: function (params) {
|
||||
return {
|
||||
q: params.term
|
||||
};
|
||||
},
|
||||
processResults: function (data) {
|
||||
console.log(data)
|
||||
return {
|
||||
results: data.map(provinsi => ({
|
||||
id: provinsi[0],
|
||||
text: provinsi[1]
|
||||
}))
|
||||
};
|
||||
},
|
||||
cache: true
|
||||
},
|
||||
minimumInputLength: 0
|
||||
});
|
||||
|
||||
$('#provinsiDropdown').select2({
|
||||
placeholder: 'Pilih Desa',
|
||||
allowClear: true,
|
||||
ajax: {
|
||||
url: provinsiURL,
|
||||
dataType: 'json',
|
||||
delay: 250,
|
||||
data: function (params) {
|
||||
return {
|
||||
q: params.term
|
||||
};
|
||||
},
|
||||
processResults: function (data) {
|
||||
console.log(data)
|
||||
return {
|
||||
results: data.map(provinsi => ({
|
||||
id: provinsi[0],
|
||||
text: provinsi[1]
|
||||
}))
|
||||
};
|
||||
},
|
||||
cache: true
|
||||
},
|
||||
//ajax: {
|
||||
// url: '',//provinsiURL,
|
||||
// dataType: 'json',
|
||||
// delay: 250,
|
||||
// data: function (params) {
|
||||
// return {
|
||||
// q: params.term
|
||||
// };
|
||||
// },
|
||||
// processResults: function (data) {
|
||||
// return {
|
||||
// results: data.map(provinsi => ({
|
||||
// id: provinsi[0],
|
||||
// text: provinsi[1]
|
||||
// }))
|
||||
// };
|
||||
// },
|
||||
// cache: true
|
||||
//},
|
||||
minimumInputLength: 0
|
||||
});
|
||||
});
|
||||
@@ -769,7 +794,6 @@
|
||||
fetch(url)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
console.log(data)
|
||||
document.getElementById('tot_sr').textContent = parseDanBulatkanKeMiliar(data['serapan_per_m'])
|
||||
document.getElementById('pr_sr').textContent = data['persentage'] + "%"
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user