singkawang_dashboard_story

Dashboard Story Deforestasi Singkawang Timur — Flask

Mode Storytelling / Scrollytelling

Halaman utama (/) sekarang menggunakan pola scrollytelling: narasi bergerak saat pengguna scroll, sementara peta tetap menempel di layar dan otomatis berubah mengikuti bab. Urutannya adalah Overview → Forest → Deforestasi 2023 → Planted 2025 → Citra Multitemporal → Mill & POD → Konteks Berita → Temuan Utama.

Fitur storytelling utama:

• peta sticky yang mengikuti scroll;
• layer berubah otomatis per bab;
• fokus deforestasi tahun 2023 dan planted tahun 2025;
• replay citra Wayback 2015, 2020, 2023, 2025 hingga Google Satellite Current;
• popup atribut tetap aktif;
• Mill/POD, garis jarak, dan buffer 50 km muncul pada bab rantai spasial;
• berita asli ditempatkan sebagai konteks lapangan;
• halaman /overview tetap tersedia sebagai ringkasan analitik dan /map sebagai mode eksplorasi bebas.

Project ini adalah dashboard story berbasis Flask + Bootstrap 5 + Leaflet + Chart.js untuk membaca data:

• Batas administrasi Singkawang Timur
• Forest
• Planted
• Deforestasi
• Mill & POD
• Jarak lokasi kasus ke Mill/POD
• Buffer 50 km
• Citra Google Satellite Current
• Esri Wayback 2015, 2020, 2023, 2025
• Berita pendukung beserta og:image dari sumber asli jika dapat diakses

1. Struktur folder

singkawang_dashboard_story/
├── app.py
├── requirements.txt
├── README.md
├── templates/
│   ├── base.html
│   ├── overview.html
│   ├── map.html
│   └── 404.html
└── static/
    ├── css/style.css
    ├── js/overview.js
    ├── js/map.js
    ├── img/news-placeholder.svg
    └── data/
        ├── stats.json
        ├── administrasi.geojson
        ├── forest.geojson
        ├── planted.geojson
        ├── deforestasi.geojson
        ├── mill_pod.geojson
        ├── jarak_mill_pod.geojson
        └── buffer_50km.geojson

2. Instalasi di Windows (disarankan untuk VS Code)

A. Pastikan Python terpasang

Download Python 3.11 atau lebih baru dari situs resmi Python. Saat instalasi, centang Add Python to PATH.

Cek melalui Command Prompt atau terminal VS Code:

python --version

B. Buka project

Ekstrak ZIP, lalu buka folder singkawang_dashboard_story di VS Code.

Di VS Code pilih:

Terminal > New Terminal

C. Buat virtual environment

python -m venv venv

Aktifkan pada PowerShell:

.\venv\Scripts\Activate.ps1

Jika memakai CMD:

venv\Scripts\activate.bat

Jika PowerShell menolak menjalankan script, gunakan CMD atau jalankan PowerShell sebagai user dan gunakan kebijakan yang sesuai dengan komputer Anda.

D. Install library

pip install -r requirements.txt

E. Jalankan aplikasi

python app.py

Jika berhasil, terminal akan menampilkan alamat seperti:

http://127.0.0.1:5000

Buka alamat tersebut di browser.

• Overview: http://127.0.0.1:5000/
• Peta: http://127.0.0.1:5000/map

3. Instalasi Mac / Linux

python3 -m venv venv
source venv/bin/activate
pip install -r requirements.txt
python app.py

4. Cara menggunakan dashboard

Overview

Halaman Overview menampilkan:

1. KPI luas administrasi, forest, planted, deforestasi, dan Mill/POD.
2. Peta pratinjau.
3. Grafik deforestasi per tahun.
4. Grafik planted berdasarkan actor.
5. Insight awal.
6. Kartu berita.

Peta Interaktif

Pada halaman /map:

1. Pilih citra dasar.
2. Aktif/nonaktifkan setiap layer.
3. Geser Filter Tahun untuk melihat planted dan deforestasi per periode.
4. Klik Putar untuk auto replay perubahan tahun.
5. Gunakan slider transparansi untuk melihat citra di bawah polygon.
6. Klik polygon/titik untuk membuka popup atribut.
7. Gunakan tombol 2015, 2020, 2023, 2025, atau Current untuk mengganti citra dengan cepat.
8. Gunakan Fokus Cepat untuk zoom ke administrasi, deforestasi, atau Mill/POD.

5. Mengganti / menambahkan GeoJSON

Masukkan file baru ke:

static/data/

Kemudian ubah konfigurasi pada:

static/js/map.js

Cari variabel:

const layerConfig = { ... }

Contoh layer baru:

sungai: {
  label: 'Sungai',
  file: 'sungai.geojson',
  color: '#1c77c3',
  fill: '#1c77c3',
  default: true
}

Jika struktur atribut layer berbeda, tambahkan popup-nya pada fungsi makeGeoLayer().

6. Mengubah citra / basemap

Edit BASEMAPS pada app.py.

Saat ini project berisi:

Google Satellite (Current)
Wayback 2015
Wayback 2020
Wayback 2023
Wayback 2025

Wayback menggunakan struktur tile Leaflet:

.../tile/<snapshot-id>/{z}/{y}/{x}

7. Berita dan gambar asli

Daftar berita berada pada NEWS_ITEMS di app.py.

Aplikasi mencoba mengambil:

<meta property="og:image" ...>

serta deskripsi dari halaman sumber.

Jika situs tidak bisa diakses, memblokir request, atau sedang offline, dashboard memakai:

static/img/news-placeholder.svg

Untuk menambah berita:

{
    "title": "Judul berita",
    "source": "Nama media",
    "date": "Tanggal",
    "category": "Kategori",
    "summary": "Ringkasan singkat",
    "url": "https://alamat-artikel"
}

8. Catatan penting

• Internet diperlukan untuk memuat Bootstrap, Leaflet, Chart.js, citra Google/Esri, serta gambar berita eksternal.
• Penggunaan tile Google dan Esri harus mengikuti ketentuan layanan masing-masing penyedia.
• Data berita berfungsi sebagai konteks pendukung, bukan otomatis membuktikan hubungan sebab-akibat antara aktivitas tertentu dan deforestasi.
• Buffer dari file awal sudah dikonversi dari EPSG:3395 ke EPSG:4326 agar kompatibel dengan Leaflet.
• Jangan membuka overview.html langsung dengan double-click. Jalankan melalui Flask dengan python app.py.

9. Troubleshooting

python is not recognized

Python belum masuk PATH. Install ulang Python dan centang Add Python to PATH.

ModuleNotFoundError: No module named 'flask'

Aktifkan venv, lalu:

pip install -r requirements.txt

Peta abu-abu / citra tidak tampil

Periksa koneksi internet dan buka Developer Tools (F12) untuk melihat error tile. Snapshot Wayback dapat berubah kebijakan aksesnya.

GeoJSON tidak tampil

Pastikan file berada di static/data/ dan koordinatnya sudah WGS84 / EPSG:4326.

Gambar berita tidak tampil

Sebagian media memblokir hotlink atau request otomatis. Dashboard akan memakai placeholder. Anda dapat menyimpan foto berita secara manual ke static/img/ dan mengganti sumber gambar jika diperlukan.

10. Cara tercepat di Windows

Project juga dilengkapi:

• install_windows.bat → membuat venv dan menginstall dependency.
• run_windows.bat → mengaktifkan environment, membuka browser, dan menjalankan Flask.
• CARA_INSTALL_DAN_PENGGUNAAN.txt → panduan singkat Bahasa Indonesia.

Untuk pengguna yang tidak ingin mengetik perintah satu per satu, cukup jalankan kedua file .bat tersebut secara berurutan.

Update Storytelling Foto Lapangan

• Menambahkan 19 foto lapangan pengguna ke dalam folder static/img/field/.
• Halaman Story sekarang memiliki bab Temuan Lapangan dengan auto play random.
• Menambahkan floating photo spotlight di atas peta agar story map terasa lebih menarik.
• Foto akan berganti otomatis mengikuti bab yang aktif (forest, deforestasi, planted, mill, context, field, conclusion).