second map
This commit is contained in:
='fauz
parent
51d467f357
commit
17ac6a643f
Binary file not shown.
Binary file not shown.
@ -93,33 +93,46 @@ def fetch_geojson(conn, level, parent_code=None):
|
|||||||
) AS path
|
) AS path
|
||||||
FROM wil_provinsi
|
FROM wil_provinsi
|
||||||
"""
|
"""
|
||||||
cur.execute(old_sql)
|
|
||||||
|
sql = """
|
||||||
|
SELECT
|
||||||
|
wp.id,
|
||||||
|
wp.kode,
|
||||||
|
wp.nama,
|
||||||
|
lat,
|
||||||
|
lng,
|
||||||
|
path,
|
||||||
|
pip.persen as idx
|
||||||
|
FROM wil_provinsi wp
|
||||||
|
JOIN vw_persentase_indeks_provinsi pip on pip.kode = wp.kode
|
||||||
|
WHERE lower(pip.status) in ('maju','mandiri')
|
||||||
|
"""
|
||||||
|
cur.execute(sql)
|
||||||
elif level == 'kabupaten':
|
elif level == 'kabupaten':
|
||||||
cur.execute(""" SELECT id, kode, nama,lat,lng,
|
cur.execute(""" SELECT wk.id, wk.kode, wk.nama,lat,wk.lng,wk.path, pik.persen_per_status as idx
|
||||||
CONCAT(
|
FROM wil_kabupatenkota wk
|
||||||
REPEAT('[', 4 - (LENGTH(path) - LENGTH(REPLACE(path, '[', '')))),
|
JOIN vw_persentase_indeks_kabkota pik on pik.kode = wk.kode
|
||||||
path,
|
WHERE provinsi_id = %s
|
||||||
REPEAT(']', 4 - (LENGTH(path) - LENGTH(REPLACE(path, ']', ''))))
|
""", (parent_code,))
|
||||||
) AS path
|
|
||||||
FROM wil_kabupatenkota WHERE provinsi_id = %s""", (parent_code,))
|
|
||||||
elif level == 'kecamatan':
|
elif level == 'kecamatan':
|
||||||
cur.execute("""
|
cur.execute("""
|
||||||
SELECT id, kode, nama,lat,lng,
|
SELECT wkc.id, wkc.kode, wkc.nama,wkc.lat,wkc.lng,wkc.path , pic.persen as idx
|
||||||
CONCAT(
|
FROM wil_kecamatan wkc
|
||||||
REPEAT('[', 4 - (LENGTH(path) - LENGTH(REPLACE(path, '[', '')))),
|
JOIN vw_persentase_indeks_kecamatan as pic on pic.id = wkc.id
|
||||||
path,
|
WHERE kabupatenkota_id = %s""", (parent_code,))
|
||||||
REPEAT(']', 4 - (LENGTH(path) - LENGTH(REPLACE(path, ']', ''))))
|
|
||||||
) AS path
|
|
||||||
FROM wil_kecamatan WHERE kabupatenkota_id = %s""", (parent_code,))
|
|
||||||
elif level == 'desa':
|
elif level == 'desa':
|
||||||
cur.execute("""
|
cur.execute("""
|
||||||
SELECT id, kode, nama, null as lat, null as lng,
|
SELECT wd.id, wd.kode, wd.nama, wd.lat, wd.lng,wd.path,
|
||||||
CONCAT(
|
CASE
|
||||||
REPEAT('[', 4 - (LENGTH(path) - LENGTH(REPLACE(path, '[', '')))),
|
WHEN lower(mid.status) = 'mandiri' THEN 100
|
||||||
path,
|
WHEN lower(mid.status) = 'maju' THEN 70
|
||||||
REPEAT(']', 4 - (LENGTH(path) - LENGTH(REPLACE(path, ']', ''))))
|
WHEN lower(mid.status) = 'berkembang' THEN 50
|
||||||
) AS path
|
WHEN lower(mid.status) = 'tertinggal' THEN 20
|
||||||
FROM wil_desa WHERE kecamatan_id = %s""", (parent_code,))
|
WHEN lower(mid.status) = 'sangat tertinggal' THEN 0
|
||||||
|
END as idx
|
||||||
|
FROM wil_desa wd
|
||||||
|
JOIN metrik_indeks_desa mid on mid.kode_desa = wd.kode_int
|
||||||
|
WHERE kecamatan_id = %s""", (parent_code,))
|
||||||
else:
|
else:
|
||||||
return {"type": "FeatureCollection", "features": []}
|
return {"type": "FeatureCollection", "features": []}
|
||||||
features = []
|
features = []
|
||||||
@ -153,7 +166,8 @@ def fetch_geojson(conn, level, parent_code=None):
|
|||||||
"kode": row[1],
|
"kode": row[1],
|
||||||
"nama": row[2],
|
"nama": row[2],
|
||||||
"lat": row[3],
|
"lat": row[3],
|
||||||
"lng": row[4]
|
"lng": row[4],
|
||||||
|
"idx": row[6]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
features.append(feature)
|
features.append(feature)
|
||||||
|
|||||||
@ -48,6 +48,13 @@ def index():
|
|||||||
print(data)
|
print(data)
|
||||||
return render_template('index.html', provinsis=data)
|
return render_template('index.html', provinsis=data)
|
||||||
|
|
||||||
|
@main.route('/map')
|
||||||
|
def map():
|
||||||
|
with get_connection() as conn:
|
||||||
|
data = apiController.provinsi(conn)
|
||||||
|
print(data)
|
||||||
|
return render_template('map.html', provinsis=data)
|
||||||
|
|
||||||
@main.route("/geojson/provinsi")
|
@main.route("/geojson/provinsi")
|
||||||
def get_provinsi():
|
def get_provinsi():
|
||||||
with get_connection() as conn:
|
with get_connection() as conn:
|
||||||
|
|||||||
@ -288,7 +288,7 @@ header {
|
|||||||
/*max-width: 1200px; */
|
/*max-width: 1200px; */
|
||||||
margin: 10px auto 0px auto;
|
margin: 10px auto 0px auto;
|
||||||
background-color:rgb(188, 188, 188);
|
background-color:rgb(188, 188, 188);
|
||||||
border-radius: 30px;
|
border-radius: 10px;
|
||||||
box-shadow: 3px 3px 10px rgb(188, 188, 188);
|
box-shadow: 3px 3px 10px rgb(188, 188, 188);
|
||||||
padding: 0px 20px 10px 0px;
|
padding: 0px 20px 10px 0px;
|
||||||
}
|
}
|
||||||
@ -319,6 +319,8 @@ header {
|
|||||||
flex: 3; /* 3 bagian dari 4 */
|
flex: 3; /* 3 bagian dari 4 */
|
||||||
background-color: lightblue;
|
background-color: lightblue;
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: 3px 3px 10px rgb(188, 188, 188);
|
||||||
}
|
}
|
||||||
|
|
||||||
.side_container {
|
.side_container {
|
||||||
|
|||||||
@ -176,6 +176,16 @@
|
|||||||
<!-- <canvas id="myChart" style="width:80%;max-width:400px; margin-left: 20px;"></canvas> -->
|
<!-- <canvas id="myChart" style="width:80%;max-width:400px; margin-left: 20px;"></canvas> -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<section>
|
||||||
|
<div class="map-container">
|
||||||
|
<iframe
|
||||||
|
src=""
|
||||||
|
width="100%"
|
||||||
|
height="800px"
|
||||||
|
frameborder="0">
|
||||||
|
</iframe>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -248,7 +258,16 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
currentLayer = L.geoJSON(data, {
|
currentLayer = L.geoJSON(data, {
|
||||||
style: { color: "blue", weight: 2 },
|
style: function (feature) {
|
||||||
|
return {
|
||||||
|
color: "white",
|
||||||
|
weight: 1,
|
||||||
|
//dashArray: '5, 10',
|
||||||
|
opacity: 1,
|
||||||
|
fillOpacity: 0.4,
|
||||||
|
fillColor: '#32CD32'
|
||||||
|
};
|
||||||
|
},
|
||||||
onEachFeature: function (feature, layer) {
|
onEachFeature: function (feature, layer) {
|
||||||
let clickTimer = null;
|
let clickTimer = null;
|
||||||
layer.on('click', async function (e) {
|
layer.on('click', async function (e) {
|
||||||
@ -864,6 +883,23 @@
|
|||||||
for (var i = 0; i < 7; i++) dataArray.push(Math.round(Math.random() * 100));
|
for (var i = 0; i < 7; i++) dataArray.push(Math.round(Math.random() * 100));
|
||||||
return dataArray;
|
return dataArray;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function getColorByStatus(value) {
|
||||||
|
return value > 15 ? '#006400' : // dark green
|
||||||
|
value > 12 ? '#32CD32' : // lime green
|
||||||
|
value > 10 ? '#ADFF2F' : // green-yellow
|
||||||
|
value > 8 ? '#FFFF00' : // yellow
|
||||||
|
value > 5 ? '#FFA500' : // orange
|
||||||
|
'#44704BFF'; // red
|
||||||
|
}
|
||||||
|
|
||||||
|
function getColorByValue(val) {
|
||||||
|
return val > 200 ? '#18D814' :
|
||||||
|
val > 100 ? '#50AF1C' :
|
||||||
|
val > 60 ? '#888523' :
|
||||||
|
val > 10 ? '#C05C2B' :
|
||||||
|
'#F73232';
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
window.onload = function(){
|
window.onload = function(){
|
||||||
|
|||||||
933
templates/map.html
Normal file
933
templates/map.html
Normal file
@ -0,0 +1,933 @@
|
|||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<title>Peta Wilayah</title>
|
||||||
|
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}" />
|
||||||
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.min.css') }}" />
|
||||||
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/select2.min.css') }}" />
|
||||||
|
<link rel="stylesheet" href="{{ url_for('static', filename='responsive.css') }}" />
|
||||||
|
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
|
||||||
|
<style>
|
||||||
|
.select2-selection__arrow {
|
||||||
|
display: block !important;
|
||||||
|
}
|
||||||
|
.custom-popup {
|
||||||
|
font-size: 8px; /* Atur ukuran sesuai kebutuhan */
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="main-container">
|
||||||
|
|
||||||
|
<div class="main">
|
||||||
|
<div class="searchbar2">
|
||||||
|
<input type="text" name="" id="" placeholder="Search" />
|
||||||
|
<div class="searchbtn">
|
||||||
|
<img src="https://media.geeksforgeeks.org/wp-content/uploads/20221210180758/Untitled-design-(28).png"
|
||||||
|
class="icn srchicn" alt="search-button" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- <div class="box-container">
|
||||||
|
<div class="box box1">
|
||||||
|
<div class="text">
|
||||||
|
<h2 class="topic-heading">60.5k</h2>
|
||||||
|
<h2 class="topic">Article Views</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<img src="https://media.geeksforgeeks.org/wp-content/uploads/20221210184645/Untitled-design-(31).png"
|
||||||
|
alt="Views" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="box box2">
|
||||||
|
<div class="text">
|
||||||
|
<h2 class="topic-heading">150</h2>
|
||||||
|
<h2 class="topic">Likes</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<img src="https://media.geeksforgeeks.org/wp-content/uploads/20221210185030/14.png" alt="likes" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="box box3">
|
||||||
|
<div class="text">
|
||||||
|
<h2 class="topic-heading">320</h2>
|
||||||
|
<h2 class="topic">Comments</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<img src="https://media.geeksforgeeks.org/wp-content/uploads/20221210184645/Untitled-design-(32).png"
|
||||||
|
alt="comments" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="box box4">
|
||||||
|
<div class="text">
|
||||||
|
<h2 class="topic-heading">70</h2>
|
||||||
|
<h2 class="topic">Published</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<img src="https://media.geeksforgeeks.org/wp-content/uploads/20221210185029/13.png"
|
||||||
|
alt="published" />
|
||||||
|
</div>
|
||||||
|
</div> -->
|
||||||
|
|
||||||
|
<div class="report-container">
|
||||||
|
<div class="report-header">
|
||||||
|
<!-- <h1 class="recent-Articles">Recent Articles</h1>
|
||||||
|
<button class="view">View All</button> -->
|
||||||
|
<div class="box-container">
|
||||||
|
<div class="box box1">
|
||||||
|
<div class="text">
|
||||||
|
<h2 class="topic-heading" id="tot_dd">Total Dana Desa</h2>
|
||||||
|
<h2 class="topic">Total Dana Desa</h2>
|
||||||
|
<h2></h2>
|
||||||
|
</div>
|
||||||
|
<img src="https://media.geeksforgeeks.org/wp-content/uploads/20221210184645/Untitled-design-(31).png"
|
||||||
|
alt="Views" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="box box2">
|
||||||
|
<div class="text">
|
||||||
|
<h2 class="topic-heading" id="tot_sr">150</h2>
|
||||||
|
<h2 class="topic">Total Serapan</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<img src="https://media.geeksforgeeks.org/wp-content/uploads/20221210185030/14.png" alt="likes" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="box box3">
|
||||||
|
<div class="text">
|
||||||
|
<h2 class="topic-heading" id="pr_sr">320</h2>
|
||||||
|
<h2 class="topic">Persentase Serapan</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<img src="https://media.geeksforgeeks.org/wp-content/uploads/20221210184645/Untitled-design-(32).png"
|
||||||
|
alt="comments" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- <div class="box box4">
|
||||||
|
<div class="text">
|
||||||
|
<h2 class="topic-heading">70</h2>
|
||||||
|
<h2 class="topic">Published</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<img src="https://media.geeksforgeeks.org/wp-content/uploads/20221210185029/13.png"
|
||||||
|
alt="published" />
|
||||||
|
</div> -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="header_container">
|
||||||
|
<div class="map-container" id="map"></div>
|
||||||
|
<div class="side_container" style="height:100%">
|
||||||
|
<div class="row form-group">
|
||||||
|
<div class="col-md-12">
|
||||||
|
<div class="input-group">
|
||||||
|
<div class="input-group-prepend">
|
||||||
|
<span class="input-group-text" style="width: 150px;">
|
||||||
|
Provinsi
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<select class="form-control select2 border border-primary" name="provinsiDropdown" id="provinsiDropdown"
|
||||||
|
data-placeholder="Provinsi ......">
|
||||||
|
<option></option>
|
||||||
|
{% for provinsi in provinsis %}
|
||||||
|
<option value="{{provinsi[0]}}">{{provinsi[1]}}</option>
|
||||||
|
{% endfor %}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row form-group">
|
||||||
|
<div class="col-md-12">
|
||||||
|
<div class="input-group">
|
||||||
|
<div class="input-group-prepend">
|
||||||
|
<span class="input-group-text" style="width: 150px;">
|
||||||
|
Kabupaten/Kota
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<select class="form-control select2" name="kabkotaDropdown" id="kabkotaDropdown"
|
||||||
|
data-placeholder="Kabupaten/Kota ....." >
|
||||||
|
<option></option>
|
||||||
|
<option value="1">Option 1</option>
|
||||||
|
<option value="2">Option 2</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row form-group">
|
||||||
|
<div class="col-md-12">
|
||||||
|
<div class="input-group">
|
||||||
|
<div class="input-group-prepend">
|
||||||
|
<span class="input-group-text" style="width: 150px;">
|
||||||
|
Kecamatan
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<select class="form-control select2" name="kecamatanDropdown" id="kecamatanDropdown"
|
||||||
|
data-placeholder="Kecamatan .....">
|
||||||
|
<option></option>
|
||||||
|
<option value="1">Option 1</option>
|
||||||
|
<option value="2">Option 2</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- <div class="row">
|
||||||
|
<div class="col-md-12">
|
||||||
|
<canvas id="canvas" style="width=100%"></canvas>
|
||||||
|
</div> -->
|
||||||
|
</div>
|
||||||
|
<!-- <canvas id="myChart" style="width:80%;max-width:400px; margin-left: 20px;"></canvas> -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<section>
|
||||||
|
<div class="map-container">
|
||||||
|
<iframe
|
||||||
|
src=""
|
||||||
|
width="100%"
|
||||||
|
height="800px"
|
||||||
|
frameborder="0">
|
||||||
|
</iframe>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script src="{{ url_for('static', filename='script.js')}}"></script>
|
||||||
|
<script src="{{ url_for('static', filename='js/jquery-3.7.1.js')}}"></script>
|
||||||
|
<script src="{{ url_for('static', filename='js/bootstrap.min.js')}}"></script>
|
||||||
|
<script src="{{ url_for('static', filename='js/select2.min.js')}}"></script>
|
||||||
|
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// const map = L.map('map').setView([4.2, 96.9], 7);
|
||||||
|
const indonesiaBounds = L.latLngBounds(
|
||||||
|
L.latLng(-11, 94), // Southwest corner (approx Sabang - Rote)
|
||||||
|
L.latLng(6.5, 141) // Northeast corner (approx Papua)
|
||||||
|
);
|
||||||
|
const map = L.map('map', {
|
||||||
|
center: [-2, 118], // Pusat Indonesia
|
||||||
|
// zoom: 5,
|
||||||
|
maxBounds: indonesiaBounds,
|
||||||
|
maxBoundsViscosity: 1.0,
|
||||||
|
zoomSnap: 0.5,
|
||||||
|
zoomDelta: 0.5
|
||||||
|
});
|
||||||
|
|
||||||
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||||
|
attribution: '© OpenStreetMap',
|
||||||
|
maxZoom: 12
|
||||||
|
}).addTo(map);
|
||||||
|
map.fitBounds(indonesiaBounds);
|
||||||
|
const optimalZoom = map.getZoom();
|
||||||
|
map.setMinZoom(optimalZoom);
|
||||||
|
</script>
|
||||||
|
<script>
|
||||||
|
let currentLayer = null;
|
||||||
|
let currentState = {
|
||||||
|
level: null,
|
||||||
|
kode: null
|
||||||
|
};
|
||||||
|
function loadLayer(url, onClickCallback, level = 'provinsi') {
|
||||||
|
currentLevel = level;
|
||||||
|
fetch(url)
|
||||||
|
.then(res => res.json())
|
||||||
|
.then(data => {
|
||||||
|
// 1. Fungsi validasi dan pembersih
|
||||||
|
function isValidCoord(coord) {
|
||||||
|
return Array.isArray(coord) &&
|
||||||
|
coord.length === 2 &&
|
||||||
|
typeof coord[0] === "number" &&
|
||||||
|
typeof coord[1] === "number" &&
|
||||||
|
!isNaN(coord[0]) &&
|
||||||
|
!isNaN(coord[1]);
|
||||||
|
}
|
||||||
|
|
||||||
|
function cleanCoordinates(multiPolygon) {
|
||||||
|
return multiPolygon.map(polygon =>
|
||||||
|
polygon.map(ring =>
|
||||||
|
ring.filter(coord => isValidCoord(coord))
|
||||||
|
).filter(ring => ring.length >= 4) // valid ring minimal 4 titik
|
||||||
|
).filter(polygon => polygon.length > 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 2. Bersihkan data sebelum digunakan
|
||||||
|
data.features.forEach(feature => {
|
||||||
|
if (feature.geometry.type === "MultiPolygon") {
|
||||||
|
feature.geometry.coordinates = cleanCoordinates(feature.geometry.coordinates);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
if (currentLayer) {
|
||||||
|
map.removeLayer(currentLayer);
|
||||||
|
}
|
||||||
|
|
||||||
|
currentLayer = L.geoJSON(data, {
|
||||||
|
style: function (feature) {
|
||||||
|
return {
|
||||||
|
color: "white",
|
||||||
|
weight: 1,
|
||||||
|
fillOpacity: 0.4,
|
||||||
|
fillColor: getColorByValue(feature.properties.idx || 'UNKNOWN')
|
||||||
|
};
|
||||||
|
},
|
||||||
|
onEachFeature: function (feature, layer) {
|
||||||
|
let clickTimer = null;
|
||||||
|
layer.on('click', async function (e) {
|
||||||
|
let kode = feature.properties.id;
|
||||||
|
// onClickCallback(kode);
|
||||||
|
if (clickTimer) {
|
||||||
|
// Double click detected
|
||||||
|
clearTimeout(clickTimer);
|
||||||
|
clickTimer = null;
|
||||||
|
|
||||||
|
// Aksi double click → Pindah layer
|
||||||
|
let kode = feature.properties.id;
|
||||||
|
onClickCallback(kode);
|
||||||
|
if (url.includes("/provinsi")) {
|
||||||
|
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.id)
|
||||||
|
updateDropdown('kabupatenkota',feature.properties.id)
|
||||||
|
}else if(currentLevel === 'kecamatan'){
|
||||||
|
localStorage.setItem('kode_kecamatan',feature.properties.id)
|
||||||
|
updateDropdown('kecamatan',feature.properties.id)
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// Single click → Tampilkan popup
|
||||||
|
clickTimer = setTimeout(async () => {
|
||||||
|
clickTimer = null;
|
||||||
|
if (url.includes("/provinsi")) {
|
||||||
|
localStorage.setItem('kode_provinsi', feature.properties.kode)
|
||||||
|
const status = await fetchStatusDesaByProvinsi(feature.properties.kode);
|
||||||
|
|
||||||
|
let klasifikasiHTML = "<li>Tidak ada data</li>";
|
||||||
|
if (Array.isArray(status?.[0])) {
|
||||||
|
provIndexDesaHTML = status[0]
|
||||||
|
.map(d => `${d[1]}: ${d[4]} / `)
|
||||||
|
.join("");
|
||||||
|
provBumdesHTML = status[1]
|
||||||
|
.map(dt => `${dt[0]}:${dt[1]} / `)
|
||||||
|
.join("");
|
||||||
|
const raw = Number(status[5]);
|
||||||
|
provDanaTotalHTML = `Total : ${formatWithUnit(raw)}`;
|
||||||
|
provDanadesaHTML = `Total : ${status[2].jumlah_per_m}, Persentase : ${status[2].persentage}%`;
|
||||||
|
provKoperasiHTML = status[4]
|
||||||
|
.map(dt => `${dt[0]}: ${dt[1]} / `)
|
||||||
|
.join("");
|
||||||
|
}
|
||||||
|
const popupContent = `
|
||||||
|
<strong>${feature.properties.nama}</strong><br/>
|
||||||
|
<strong>Status Desa:</strong>
|
||||||
|
<li>IDM - ${provIndexDesaHTML}</li>
|
||||||
|
<li>BUM - ${provBumdesHTML}</li>
|
||||||
|
<li>DD - ${provDanaTotalHTML}</li>
|
||||||
|
<li>SERAPAN - ${provDanadesaHTML} </li>
|
||||||
|
<li>KOPERASI - ${provKoperasiHTML} </li>
|
||||||
|
`;
|
||||||
|
|
||||||
|
layer.bindPopup(popupContent, { className: 'custom-popup' }).openPopup(e.latlng);
|
||||||
|
|
||||||
|
} else if (currentLevel === 'kabupatenkota') {
|
||||||
|
const province_code = localStorage.getItem('kode_provinsi');
|
||||||
|
localStorage.setItem('kode_kabupatenkota',feature.properties.kode)
|
||||||
|
const status = await fetchStatusDesaByKabupatenkota(province_code, feature.properties.kode);
|
||||||
|
let klasifikasiHTML = "<li>Tidak ada data</li>";
|
||||||
|
|
||||||
|
if (Array.isArray(status?.[0])) {
|
||||||
|
kabindexDesaHTML= status[0]
|
||||||
|
.map(d => `${d[1]}: ${d[5]} / `)
|
||||||
|
.join("");
|
||||||
|
|
||||||
|
kabbumdesHTML = status[1]
|
||||||
|
.map(dt => `${dt[0]}:${dt[1]} / `)
|
||||||
|
.join("");
|
||||||
|
|
||||||
|
const raw = Number(status[5]);
|
||||||
|
kabdanaTotalHTML = `Total : ${formatWithUnit(raw)}`;
|
||||||
|
|
||||||
|
kabdanadesaHTML = `Dana :${status[2].jumlah_per_m}, Persentase : ${status[2].persentage}%`;
|
||||||
|
kabserapanHTML = status[3]
|
||||||
|
.map(([jabatan, nilai]) => {
|
||||||
|
const alias = jabatan === 'Pendamping Lokal Desa' ? 'PLD' :
|
||||||
|
jabatan === 'Pendamping Desa' ? 'PD' :
|
||||||
|
jabatan;
|
||||||
|
return `${alias}: ${nilai} /`;
|
||||||
|
}).join("");
|
||||||
|
|
||||||
|
kabkoperasiHTML = status[4]
|
||||||
|
.map(dt => `${dt[0]}: ${dt[1]} / `)
|
||||||
|
.join("");
|
||||||
|
}
|
||||||
|
const popupContent = `
|
||||||
|
<strong>${feature.properties.nama}</strong><br/>
|
||||||
|
<strong>Status Desa (Kabupaten):</strong>
|
||||||
|
<li>IDM - ${kabindexDesaHTML}</li>
|
||||||
|
<li>BUM - ${kabbumdesHTML}</li>
|
||||||
|
<li>DD - ${kabdanaTotalHTML}</li>
|
||||||
|
<li>SERAPAN - ${kabdanadesaHTML} </li>
|
||||||
|
<li>KOPERASI - ${kabkoperasiHTML} </li>
|
||||||
|
`;
|
||||||
|
|
||||||
|
layer.bindPopup(popupContent).openPopup(e.latlng);
|
||||||
|
|
||||||
|
} else if (currentLevel === 'kecamatan'){
|
||||||
|
const province_code = localStorage.getItem('kode_provinsi')
|
||||||
|
const region_code = localStorage.getItem('kode_kabupatenkota')
|
||||||
|
localStorage.setItem('kode_kecamatan',feature.properties.id)
|
||||||
|
const status = await fetchStatusDesaByKecamatan(province_code, region_code, feature.properties.kode)
|
||||||
|
let klasifikasiHTML = "<li>Tidak ada data</li>";
|
||||||
|
|
||||||
|
if (Array.isArray(status?.[0])) {
|
||||||
|
kecindexDesaHTML = status[0]
|
||||||
|
.map(d => `${d[1]}: ${d[6]} / `)
|
||||||
|
.join("");
|
||||||
|
|
||||||
|
kecbumdesHTML = status[1]
|
||||||
|
.map(dt => `${dt[0]}:${dt[1]} / `)
|
||||||
|
.join("");
|
||||||
|
|
||||||
|
const raw = Number(status[5]);
|
||||||
|
kecdanaTotalHTML = `Total : ${formatWithUnit(raw)}`;
|
||||||
|
|
||||||
|
kecdanadesaHTML = `Total: ${formatWithUnit(status[2][0])} / Persen: ${Math.round(status[2][1])}`;
|
||||||
|
|
||||||
|
kecserapanHTML = status[3]
|
||||||
|
.map(([jabatan, nilai]) => {
|
||||||
|
const alias = jabatan === 'Pendamping Lokal Desa' ? 'PLD' :
|
||||||
|
jabatan === 'Pendamping Desa' ? 'PD' :
|
||||||
|
jabatan;
|
||||||
|
return `${alias}: ${nilai} /`;
|
||||||
|
}).join("");
|
||||||
|
|
||||||
|
keckoperasiHTML = status[4]
|
||||||
|
.map(dt => `${dt[0]}: ${dt[1]} / `)
|
||||||
|
.join("");
|
||||||
|
}
|
||||||
|
|
||||||
|
const popupContent =
|
||||||
|
`
|
||||||
|
<strong> ${feature.properties.nama}</strong>
|
||||||
|
<strong>Status Desa (Kecamatan):</strong>
|
||||||
|
<li>IDM - ${kecindexDesaHTML}</li>
|
||||||
|
<li>BUM - ${kecbumdesHTML}</li>
|
||||||
|
<li>DD - ${kecdanaTotalHTML}</li>
|
||||||
|
<li>SERAPAN - ${kecdanadesaHTML} </li>
|
||||||
|
<li>KOPERASI - ${keckoperasiHTML} </li>
|
||||||
|
`
|
||||||
|
layer.bindPopup(popupContent).openPopup(e.latlng);
|
||||||
|
}else {
|
||||||
|
// Desa
|
||||||
|
const province_code = localStorage.getItem('kode_provinsi')
|
||||||
|
const region_code = localStorage.getItem('kode_kabupatenkota')
|
||||||
|
const district_code = localStorage.getItem('kode_kecamatan')
|
||||||
|
console.log(province_code, region_code , district_code, feature.properties.kode)
|
||||||
|
const status = await fetchStatusDesaByDesa(province_code, region_code , district_code, feature.properties.kode);
|
||||||
|
let klasifikasiHTML = "<li>Tidak ada data</li>";
|
||||||
|
|
||||||
|
if (Array.isArray(status?.[0])) {
|
||||||
|
indexDesaHTML = status[0]
|
||||||
|
.map(d => `${d[1]}`)
|
||||||
|
.join("");
|
||||||
|
|
||||||
|
bumdesHTML = status[1]
|
||||||
|
.map(dt => `${dt[0]}:${dt[1]} / `)
|
||||||
|
.join("");
|
||||||
|
|
||||||
|
const raw = Number(status[5]);
|
||||||
|
danaTotalHTML = `Total : ${formatWithUnit(raw)}`;
|
||||||
|
danadesaHTML = status[2].map(([serapan,persen]) => {
|
||||||
|
return `Nominal - ${formatWithUnit(serapan)} / Persen - ${Math.round(persen)}%`;
|
||||||
|
});
|
||||||
|
serapanHTML = status[3]
|
||||||
|
.map(([jabatan, nilai]) => {
|
||||||
|
const alias = jabatan === 'Pendamping Lokal Desa' ? 'PLD' :
|
||||||
|
jabatan === 'Pendamping Desa' ? 'PD' :
|
||||||
|
jabatan;
|
||||||
|
return `${alias}: ${nilai} /`;
|
||||||
|
}).join("");
|
||||||
|
|
||||||
|
koperasiHTML = status[4]
|
||||||
|
.map(dt => `${dt[0]}: ${dt[1]} / `)
|
||||||
|
.join("");
|
||||||
|
}
|
||||||
|
const popupContent = `
|
||||||
|
<strong>${feature.properties.nama}</strong><br/>
|
||||||
|
<strong>Status Desa (Desa):</strong>
|
||||||
|
<li>IDM - ${indexDesaHTML}</li>
|
||||||
|
<li>BUM - ${bumdesHTML}</li>
|
||||||
|
<li>DD - ${danaTotalHTML}</li>
|
||||||
|
<li>SERAPAN - ${danadesaHTML} </li>
|
||||||
|
<li>KOPERASI - ${koperasiHTML} </li>
|
||||||
|
`;
|
||||||
|
|
||||||
|
layer.bindPopup(popupContent).openPopup(e.latlng);
|
||||||
|
}
|
||||||
|
}, 250);
|
||||||
|
layer.bindPopup(feature.properties.nama);
|
||||||
|
}
|
||||||
|
console.log(currentLevel)
|
||||||
|
});
|
||||||
|
layer.bindPopup(feature.properties.nama);
|
||||||
|
}
|
||||||
|
}).addTo(map);
|
||||||
|
|
||||||
|
map.fitBounds(currentLayer.getBounds());
|
||||||
|
setTimeout(() => {
|
||||||
|
map.invalidateSize();
|
||||||
|
}, 200);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatWithUnit(value) {
|
||||||
|
const abs = Math.abs(value);
|
||||||
|
let scaled, unit;
|
||||||
|
|
||||||
|
if (abs >= 1e12) { scaled = value / 1e12; unit = 'Triliun'; }
|
||||||
|
else if (abs >= 1e9) { scaled = value / 1e9; unit = 'Miliar'; }
|
||||||
|
else if (abs >= 1e6) { scaled = value / 1e6; unit = 'Juta'; }
|
||||||
|
else if (abs >= 1e3) { scaled = value / 1e3; unit = 'Ribu'; }
|
||||||
|
else { scaled = value; unit = ''; }
|
||||||
|
const formatted = scaled.toLocaleString('id-ID', {
|
||||||
|
minimumFractionDigits: unit ? 2 : 0,
|
||||||
|
maximumFractionDigits: unit ? 2 : 0
|
||||||
|
});
|
||||||
|
|
||||||
|
return unit
|
||||||
|
? `${formatted} ${unit}`
|
||||||
|
: formatted;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function fetchStatusDesaByProvinsi(kodeProvinsi) {
|
||||||
|
const url = `http://localhost:5000/api/status-provinsi/${kodeProvinsi}`;
|
||||||
|
const urltdd = `http://localhost:5000/api/status/danadesa/provinsi/${kodeProvinsi}`;
|
||||||
|
const urldd = `http://localhost:5000/api/provinsi/serapan/${kodeProvinsi}`;
|
||||||
|
const urlpd = `http://localhost:5000//api/provinsi/pendamping/${kodeProvinsi}`
|
||||||
|
const urlkop = `http://localhost:5000//api/provinsi/koperasi/${kodeProvinsi}`
|
||||||
|
const urlbd = `http://localhost:5000/api/provinsi/bumdes/${kodeProvinsi}`;
|
||||||
|
try {
|
||||||
|
const res = await fetch(url);
|
||||||
|
const tdd = await fetch(urltdd)
|
||||||
|
const bumdes = await fetch(urlbd)
|
||||||
|
const dd = await fetch(urldd)
|
||||||
|
const pd = await fetch(urlpd)
|
||||||
|
const kop = await fetch(urlkop)
|
||||||
|
|
||||||
|
if (!res.ok && !bumdes.ok && !dd.ok) throw new Error(`HTTP ${res.status}`);
|
||||||
|
const IPD = await res.json()
|
||||||
|
const dtdd = await tdd.json()
|
||||||
|
const bd = await bumdes.json()
|
||||||
|
const danadesa = await dd.json()
|
||||||
|
const dtpd = await pd.json()
|
||||||
|
const dtkop = await kop.json()
|
||||||
|
console.log([IPD, bd, danadesa, dtpd, dtkop, dtdd]);
|
||||||
|
return [IPD, bd, danadesa, dtpd, dtkop, dtdd];
|
||||||
|
} catch (err) {
|
||||||
|
console.error("Gagal ambil status desa:", err);
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function fetchStatusDesaByKabupatenkota(kode_prov, kode_kabkota) {
|
||||||
|
const url = `http://localhost:5000/api/status-kabupatenkota/${kode_prov}/${kode_kabkota}`
|
||||||
|
const urltdd = `http://localhost:5000/api/status/danadesa/kabkota/${kode_kabkota}`;
|
||||||
|
const urldd = `http://localhost:5000/api/kabkota/serapan/${kode_kabkota}`;
|
||||||
|
const urlpd = `http://localhost:5000//api/kabkota/pendamping/${kode_kabkota}`
|
||||||
|
const urlkop = `http://localhost:5000//api/kabkota/koperasi/${kode_kabkota}`
|
||||||
|
const urlbd = `http://localhost:5000/api/kabkota/bumdes/${kode_kabkota}`;
|
||||||
|
try{
|
||||||
|
const res = await fetch(url)
|
||||||
|
const tdd = await fetch(urltdd)
|
||||||
|
const bumdes = await fetch(urlbd)
|
||||||
|
const dd = await fetch(urldd)
|
||||||
|
const pd = await fetch(urlpd)
|
||||||
|
const kop = await fetch(urlkop)
|
||||||
|
|
||||||
|
if (!res.ok && !bumdes.ok && !dd.ok) throw new Error(`HTTP ${res.status}`);
|
||||||
|
const IPD = await res.json()
|
||||||
|
const bd = await bumdes.json()
|
||||||
|
const danadesa = await dd.json()
|
||||||
|
const dtpd = await pd.json()
|
||||||
|
const dtkop = await kop.json()
|
||||||
|
const dttd = await tdd.json()
|
||||||
|
|
||||||
|
return [IPD,bd, danadesa, dtpd, dtkop,dttd];
|
||||||
|
}catch(err){
|
||||||
|
console.log(err)
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function fetchStatusDesaByKecamatan(province_code, region_code, district_code){
|
||||||
|
const url = `http://localhost:5000/api/status-kecamatan/${province_code}/${region_code}/${district_code}`
|
||||||
|
const urltdd = `http://localhost:5000/api/status/danadesa/kecamatan/${district_code}`;
|
||||||
|
const urldd = `http://localhost:5000/api/kecamatan/serapan/${district_code}`;
|
||||||
|
const urlpd = `http://localhost:5000//api/kecamatan/pendamping/${district_code}`
|
||||||
|
const urlkop = `http://localhost:5000//api/kecamatan/koperasi/${district_code}`
|
||||||
|
const urlbd = `http://localhost:5000/api/kecamatan/bumdes/${district_code}`;
|
||||||
|
try {
|
||||||
|
const res = await fetch(url)
|
||||||
|
const tdd = await fetch(urltdd)
|
||||||
|
const bumdes = await fetch(urlbd)
|
||||||
|
const dd = await fetch(urldd)
|
||||||
|
const pd = await fetch(urlpd)
|
||||||
|
const kop = await fetch(urlkop)
|
||||||
|
|
||||||
|
if (!res.ok && !bumdes.ok && !dd.ok) throw new Error(`HTTP ${res.status}`);
|
||||||
|
const IPD = await res.json()
|
||||||
|
const bd = await bumdes.json()
|
||||||
|
const danadesa = await dd.json()
|
||||||
|
const dtpd = await pd.json()
|
||||||
|
const dtkop = await kop.json()
|
||||||
|
const dttd = await tdd.json()
|
||||||
|
|
||||||
|
return [IPD,bd, danadesa, dtpd, dtkop, dttd];;
|
||||||
|
} catch (error) {
|
||||||
|
console.log(error)
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function fetchStatusDesaByDesa(province_code, region_code, district_code, village_code){
|
||||||
|
const url = `http://localhost:5000//api/desa/status/${province_code}/${region_code}/${district_code}/${village_code}`
|
||||||
|
const urltdd = `http://localhost:5000/api/status/danadesa/desa/${village_code}`;
|
||||||
|
const urldd = `http://localhost:5000/api/desa/serapan/${village_code}`;
|
||||||
|
const urlpd = `http://localhost:5000//api/desa/pendamping/${village_code}`
|
||||||
|
const urlkop = `http://localhost:5000//api/desa/koperasi/${village_code}`
|
||||||
|
const urlbd = `http://localhost:5000/api/desa/bumdes/${village_code}`;
|
||||||
|
try {
|
||||||
|
const res = await fetch(url)
|
||||||
|
const tdd = await fetch(urltdd)
|
||||||
|
const bumdes = await fetch(urlbd)
|
||||||
|
const dd = await fetch(urldd)
|
||||||
|
const pd = await fetch(urlpd)
|
||||||
|
const kop = await fetch(urlkop)
|
||||||
|
|
||||||
|
if (!res.ok && !bumdes.ok && !dd.ok) throw new Error(`HTTP ${res.status}`);
|
||||||
|
const IPD = await res.json()
|
||||||
|
const bd = await bumdes.json()
|
||||||
|
const danadesa = await dd.json()
|
||||||
|
const dtpd = await pd.json()
|
||||||
|
const dtkop = await kop.json()
|
||||||
|
const dttd = await tdd.json()
|
||||||
|
|
||||||
|
return [IPD,bd, danadesa, dtpd, dtkop, dttd];;
|
||||||
|
} catch (error) {
|
||||||
|
console.log(error)
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Load provinsi Aceh awal
|
||||||
|
loadLayer('/geojson/provinsi', function (kode_provinsi) {
|
||||||
|
loadLayer(`/geojson/kabupaten/${kode_provinsi}`, function (kode_kabupaten) {
|
||||||
|
loadLayer(`/geojson/kecamatan/${kode_kabupaten}`, function (kode_kecamatan) {
|
||||||
|
loadLayer(`/geojson/desa/${kode_kecamatan}`, function () {
|
||||||
|
// Desa tidak turun level lagi
|
||||||
|
}, 'desa');
|
||||||
|
}, 'kecamatan');
|
||||||
|
}, 'kabupatenkota');
|
||||||
|
}, 'provinsi');
|
||||||
|
|
||||||
|
function goToLevel(level) {
|
||||||
|
const prov = localStorage.getItem('kode_provinsi');
|
||||||
|
const kab = localStorage.getItem('kode_kabupatenkota');
|
||||||
|
const kec = localStorage.getItem('kode_kecamatan');
|
||||||
|
|
||||||
|
switch (level) {
|
||||||
|
case 'provinsi':
|
||||||
|
loadLayer(`/geojson/provinsi`, () => {}, 'provinsi');
|
||||||
|
break;
|
||||||
|
case 'kabupatenkota':
|
||||||
|
loadLayer(`/geojson/kabupaten/${prov}`, () => {}, 'kabupatenkota');
|
||||||
|
break;
|
||||||
|
case 'kecamatan':
|
||||||
|
loadLayer(`/geojson/kecamatan/${kab}`, () => {}, 'kecamatan');
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
$('#provinsiDropdown').on('change', function (e) {
|
||||||
|
const kodeProvinsi = $(this).val();
|
||||||
|
console.log("Provinsi dipilih:", kodeProvinsi);
|
||||||
|
|
||||||
|
if (!kodeProvinsi) {
|
||||||
|
console.warn("Tidak ada kode provinsi yang dipilih!");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
localStorage.setItem('kode_provinsi', kodeProvinsi);
|
||||||
|
|
||||||
|
$('#kabkotaDropdown').empty().trigger('change');
|
||||||
|
|
||||||
|
// Ambil kabupaten berdasarkan provinsi
|
||||||
|
const kabkotaURL = "{{ url_for('main.get_master_kabkota') }}";
|
||||||
|
$.ajax({
|
||||||
|
url: kabkotaURL,
|
||||||
|
data: { provinsi_id: kodeProvinsi },
|
||||||
|
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
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log(`Memuat kabupaten dari /geojson/kabupaten/${kodeProvinsi}`);
|
||||||
|
loadLayer(`/geojson/kabupaten/${kodeProvinsi}`, () => {
|
||||||
|
console.log("Layer kabupaten dimuat.");
|
||||||
|
}, 'kabupatenkota');
|
||||||
|
});
|
||||||
|
|
||||||
|
$('#kabkotaDropdown').on('change', function (e) {
|
||||||
|
const kodeKabupaten = $(this).val();
|
||||||
|
if (!kodeKabupaten) {
|
||||||
|
console.warn("Tidak ada kode provinsi yang dipilih!");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
localStorage.setItem('kode_kabupatenkota', kodeKabupaten);
|
||||||
|
|
||||||
|
$('#kecamatanDropdown').empty().trigger('change');
|
||||||
|
|
||||||
|
// Ambil kabupaten berdasarkan provinsi
|
||||||
|
const kabkotaURL = "{{ url_for('main.get_master_kecamatan') }}";
|
||||||
|
$.ajax({
|
||||||
|
url: kabkotaURL,
|
||||||
|
data: { kabkota_id: kodeKabupaten },
|
||||||
|
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
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
loadLayer(`/geojson/kecamatan/${kodeKabupaten}`, () => {}, 'kecamatan');
|
||||||
|
}).select2();
|
||||||
|
|
||||||
|
$('#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}`, () => {
|
||||||
|
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') }}";
|
||||||
|
$('#kabkotaDropdown').empty().trigger('change');
|
||||||
|
$('#provinsiDropdown').select2({
|
||||||
|
placeholder: 'Pilih Provinsi',
|
||||||
|
allowClear: 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
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
document.addEventListener("DOMContentLoaded", (event) => {
|
||||||
|
$( '.select2' ).select2( {
|
||||||
|
theme: 'bootstrap-4'
|
||||||
|
} );
|
||||||
|
let total_dd_container = document.getElementById('tot_dd')
|
||||||
|
fetchTotDana('http://localhost:5000/api/desa/total-dana-desa')
|
||||||
|
fethTotSerapan('http://localhost:5000/api/desa/total-serapan-dana')
|
||||||
|
function fetchTotDana(url){
|
||||||
|
fetch(url)
|
||||||
|
.then(res => res.json())
|
||||||
|
.then(data => {
|
||||||
|
total_dd_container.textContent = parseDanBulatkanKeMiliar(data)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
function fethTotSerapan(url){
|
||||||
|
fetch(url)
|
||||||
|
.then(res => res.json())
|
||||||
|
.then(data => {
|
||||||
|
document.getElementById('tot_sr').textContent = parseDanBulatkanKeMiliar(data['serapan_per_m'])
|
||||||
|
document.getElementById('pr_sr').textContent = data['persentage'] + "%"
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
function parseDanBulatkanKeMiliar(input) {
|
||||||
|
// 1. Bersihkan input: hapus "Rp", ".", ganti koma dengan titik
|
||||||
|
let cleaned = input
|
||||||
|
.replace(/Rp/g, "")
|
||||||
|
.replace(/\./g, "")
|
||||||
|
.replace(",", ".");
|
||||||
|
|
||||||
|
// 2. Konversi ke angka
|
||||||
|
let angka = parseFloat(cleaned);
|
||||||
|
|
||||||
|
// 3. Bulatkan ke satuan miliar
|
||||||
|
let hasilBulat = Math.round(angka / 1e9);
|
||||||
|
|
||||||
|
// 4. Tambahkan format "x Miliar"
|
||||||
|
return "Rp" + hasilBulat.toLocaleString("id-ID") + " M";
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- Chart Script -->
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||||
|
<script>
|
||||||
|
var getRandomDataArray = function () {
|
||||||
|
var dataArray = [];
|
||||||
|
for (var i = 0; i < 7; i++) dataArray.push(Math.round(Math.random() * 100));
|
||||||
|
return dataArray;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getColorByStatus(value) {
|
||||||
|
return value > 15 ? '#006400' : // dark green
|
||||||
|
value > 12 ? '#32CD32' : // lime green
|
||||||
|
value > 10 ? '#ADFF2F' : // green-yellow
|
||||||
|
value > 8 ? '#FFFF00' : // yellow
|
||||||
|
value > 5 ? '#FFA500' : // orange
|
||||||
|
'#44704BFF'; // red
|
||||||
|
}
|
||||||
|
|
||||||
|
function getColorByValue(val) {
|
||||||
|
return val > 50 ? '#18D814' :
|
||||||
|
val > 40 ? '#50AF1C' :
|
||||||
|
val > 30 ? '#888523' :
|
||||||
|
val > 10 ? '#C05C2B' :
|
||||||
|
'#F73232';
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
window.onload = function(){
|
||||||
|
var chartOptions = { responsive : true };
|
||||||
|
var chartData = {
|
||||||
|
labels : ["January","February","March","April","May","June","July"],
|
||||||
|
datasets : [
|
||||||
|
{
|
||||||
|
fillColor : "#ffa500",
|
||||||
|
strokeColor : "rgba(220,220,220,0.8)",
|
||||||
|
highlightFill: "rgba(220,220,220,0.75)",
|
||||||
|
highlightStroke: "rgba(220,220,220,1)",
|
||||||
|
data : getRandomDataArray()
|
||||||
|
},
|
||||||
|
{
|
||||||
|
fillColor : "rgba(151,187,205,0.5)",
|
||||||
|
strokeColor : "rgba(151,187,205,0.8)",
|
||||||
|
highlightFill : "rgba(151,187,205,0.75)",
|
||||||
|
highlightStroke : "rgba(151,187,205,1)",
|
||||||
|
data : getRandomDataArray()
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
Loading…
Reference in New Issue
Block a user