From 17ac6a643f5a9c2fb6624f6781d8898cabdc15bf Mon Sep 17 00:00:00 2001 From: ='fauz <='fauzgabriel@gmail.com> Date: Wed, 2 Jul 2025 21:27:29 +0700 Subject: [PATCH] second map --- app/__pycache__/mapController.cpython-313.pyc | Bin 6585 -> 6971 bytes app/__pycache__/routes.cpython-313.pyc | Bin 17388 -> 17786 bytes app/mapController.py | 60 +- app/routes.py | 7 + static/style.css | 4 +- templates/index.html | 38 +- templates/map.html | 933 ++++++++++++++++++ 7 files changed, 1017 insertions(+), 25 deletions(-) create mode 100644 templates/map.html diff --git a/app/__pycache__/mapController.cpython-313.pyc b/app/__pycache__/mapController.cpython-313.pyc index 709bb5a5329cf09dca3be0df63cadd4440083c83..57e6f3a3e65a182b670c2e0b9dc287368610d627 100644 GIT binary patch delta 1952 zcmah~Pi)&{6#txmjvYH`^S8;`<||a|pQWLH)*%X+=-O;$T3b=q^iYY)jor>9aU$Do zxJ45ZTH&xEUn)-HzJbU3j{ni@d^iUEZfzkW|s|BooxMWle%u*x*A&gc9 zkrG1IIG;^$qUSm_>*;#l0uOI{!Y_HU;E50q)nnb|2mG|?Tca(F%S2;n$v{X8ib0{* z51BN^I^ncCvu~%Sq56mH=&P&$O*~3M+*xnF$`5= zqzcGBSEgN=ape^vn*iu1iZGB52!naA77^*Sgq!<}5F?%97%lH16oLr}0g)Eyyk{5< zq0OESm_||-+T%B49g7g{&-e0FxEuAnD(5b=mus?eu}71t(gmK1WI9&p``MRPTiiRZvtMbR^2;N>>UB(TyvQ^h>`>JNBK=&Nr?&^Chc)zjbq%b8z z*-|xGDH|^$paQOGO-w40j&OnWOtf>EHkOKOMO>*h6n&IH4O24rj4`Zgcyy#HeY7`{ z1EI;Pu8xd#BlYXBG-(iqjokq^%Jw`#IO79_OlvAfh64{3ZI=jV9CZ~myL-~XmQ&Lm zgf$eM^fbyK(r;hhW?9-U*GvhzD?^t=benWE5^ud9O%h4#vxIK1rA6_bM!DoNEp@4u zY_7nsly~TYwE327!Z-&7Ks~!J$eXZ!i^aSUMD)TdxGE)>gelpphC~iw!h-C?rekOO zGdARV0Iw-|nC^^KcF4*duChZFH)NZtEeTaQZ_URtzJ+eHYp~Z9cdb=b?yj|f zyW7O;1Tr-_3H8z=ufoG2aKLZc*on)r+lpRRs@syb>qgA}UxcaXrmF4kN)zNSgG4sOSWgmuPeUf&IeSS}#njbu=Y^3KL&7j3vK2BZa(uUJ zBP_>#R5g=?TVE$0T>T>eXK5_Z@~CplN5Cx~Ip{k1%V>Gw*tERxI$O7r8}M!aGCAXE zd95Flw_Oo+LAwpNab(>~iOo0{;U0S18N_gpLI;W zj+yY|YdwUIB;-wvYe_~D1o86PvzW)T~C88HKh8}roD6#`kL9L&|vv)v@2 z#2f7-nl3yIKTn02cPXfu&RMVZeO5S5We%sl*gxUvE8!D56k{LK?LNfxK8hSf4(VTm z_+)`XJ%jBf3iS>j$NNwGUM|o^UVq^4zhC6BC delta 1017 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 X_!3>b5mm7Wzjc@7*`9561?Bw@qcLNn diff --git a/app/mapController.py b/app/mapController.py index f15711c..28e7537 100644 --- a/app/mapController.py +++ b/app/mapController.py @@ -93,33 +93,46 @@ def fetch_geojson(conn, level, parent_code=None): ) AS path 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': - cur.execute(""" SELECT id, kode, nama,lat,lng, - CONCAT( - REPEAT('[', 4 - (LENGTH(path) - LENGTH(REPLACE(path, '[', '')))), - path, - REPEAT(']', 4 - (LENGTH(path) - LENGTH(REPLACE(path, ']', '')))) - ) AS path - FROM wil_kabupatenkota WHERE provinsi_id = %s""", (parent_code,)) + cur.execute(""" SELECT wk.id, wk.kode, wk.nama,lat,wk.lng,wk.path, pik.persen_per_status as idx + FROM wil_kabupatenkota wk + JOIN vw_persentase_indeks_kabkota pik on pik.kode = wk.kode + WHERE provinsi_id = %s + """, (parent_code,)) elif level == 'kecamatan': cur.execute(""" - SELECT id, kode, nama,lat,lng, - CONCAT( - REPEAT('[', 4 - (LENGTH(path) - LENGTH(REPLACE(path, '[', '')))), - path, - REPEAT(']', 4 - (LENGTH(path) - LENGTH(REPLACE(path, ']', '')))) - ) AS path - FROM wil_kecamatan WHERE kabupatenkota_id = %s""", (parent_code,)) + SELECT wkc.id, wkc.kode, wkc.nama,wkc.lat,wkc.lng,wkc.path , pic.persen as idx + FROM wil_kecamatan wkc + JOIN vw_persentase_indeks_kecamatan as pic on pic.id = wkc.id + WHERE kabupatenkota_id = %s""", (parent_code,)) elif level == 'desa': cur.execute(""" - SELECT id, kode, nama, null as lat, null as lng, - CONCAT( - REPEAT('[', 4 - (LENGTH(path) - LENGTH(REPLACE(path, '[', '')))), - path, - REPEAT(']', 4 - (LENGTH(path) - LENGTH(REPLACE(path, ']', '')))) - ) AS path - FROM wil_desa WHERE kecamatan_id = %s""", (parent_code,)) + SELECT wd.id, wd.kode, wd.nama, wd.lat, wd.lng,wd.path, + CASE + WHEN lower(mid.status) = 'mandiri' THEN 100 + WHEN lower(mid.status) = 'maju' THEN 70 + WHEN lower(mid.status) = 'berkembang' THEN 50 + WHEN lower(mid.status) = 'tertinggal' THEN 20 + 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: return {"type": "FeatureCollection", "features": []} features = [] @@ -153,7 +166,8 @@ def fetch_geojson(conn, level, parent_code=None): "kode": row[1], "nama": row[2], "lat": row[3], - "lng": row[4] + "lng": row[4], + "idx": row[6] } } features.append(feature) diff --git a/app/routes.py b/app/routes.py index d092db8..522a7eb 100644 --- a/app/routes.py +++ b/app/routes.py @@ -48,6 +48,13 @@ def index(): print(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") def get_provinsi(): with get_connection() as conn: diff --git a/static/style.css b/static/style.css index 675dfc3..34c0d08 100644 --- a/static/style.css +++ b/static/style.css @@ -288,7 +288,7 @@ header { /*max-width: 1200px; */ margin: 10px auto 0px auto; background-color:rgb(188, 188, 188); - border-radius: 30px; + border-radius: 10px; box-shadow: 3px 3px 10px rgb(188, 188, 188); padding: 0px 20px 10px 0px; } @@ -319,6 +319,8 @@ header { flex: 3; /* 3 bagian dari 4 */ background-color: lightblue; padding: 1rem; + border-radius: 10px; + box-shadow: 3px 3px 10px rgb(188, 188, 188); } .side_container { diff --git a/templates/index.html b/templates/index.html index fba7f41..e000378 100644 --- a/templates/index.html +++ b/templates/index.html @@ -176,6 +176,16 @@ +
+
+ +
+
@@ -248,7 +258,16 @@ } 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) { let clickTimer = null; layer.on('click', async function (e) { @@ -864,6 +883,23 @@ 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 > 200 ? '#18D814' : + val > 100 ? '#50AF1C' : + val > 60 ? '#888523' : + val > 10 ? '#C05C2B' : + '#F73232'; + } window.onload = function(){ diff --git a/templates/map.html b/templates/map.html new file mode 100644 index 0000000..2427fe8 --- /dev/null +++ b/templates/map.html @@ -0,0 +1,933 @@ + + + + Peta Wilayah + + + + + + + + + +
+ +
+
+ +
+ search-button +
+
+ + + +
+
+ +
+
+
+

Total Dana Desa

+

Total Dana Desa

+

+
+ Views +
+ +
+
+

150

+

Total Serapan

+
+ + likes +
+ +
+
+

320

+

Persentase Serapan

+
+ + comments +
+ + +
+
+ +
+
+
+
+
+
+
+ + Provinsi + +
+ +
+
+
+
+
+
+
+ + Kabupaten/Kota + +
+ +
+
+
+
+
+
+
+ + Kecamatan + +
+ +
+
+
+ +
+ +
+
+
+
+ +
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file