Pengolahan Data Spasial dengan VueJs, Leaflet dan PostGIS

Sebelumnya kita sudah membahas bagaimana pentingnya peran data spasial, maka pada post kali ini kita akan belajar bagaimana implementasinya secara real dengan menggunakan:

• VueJs (versi 3) dengan Composition API
• Leaflet.js untuk visualisasi peta
• PostgreSQL with PostGIS untuk penyimpanan dan query data spasial

Sebelum mulai, pastikan kita sudah:

• Punya basic knowledge VueJs 3
• Sudah install Node.js & npm
• Sudah setup PostgreSQL + PostGIS
• Backend untuk mengirimkan data GeoJSON

1. Set Up Project VueJs 3

npm init vue@latest my-gis-app
cd my-gis-app
npm install

Pilih:

• Vue 3
• TypeScript (optional)
• Pinia or Vuex (optional)

Kemudian install Leaflet:

npm install leaflet

Import Leaflet CSS ke main.js:

import 'leaflet/dist/leaflet.css'

---

2. Membuat Component Map

Buat file baru: components/MapView.vue

<template>
  <div ref="mapContainer" class="w-full h-screen" />
</template>

<script setup>
import { ref, onMounted } from 'vue'
import L from 'leaflet'

const mapContainer = ref(null)

onMounted(() => {
  const map = L.map(mapContainer.value).setView([-8.65, 115.2], 9)

  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; OpenStreetMap contributors',
  }).addTo(map)

  // Example: Add marker
  const marker = L.marker([-8.65, 115.2]).addTo(map)
  marker.bindPopup('Hello from Bali!').openPopup()
})
</script>

<style scoped>
.leaflet-container {
  width: 100%;
  height: 100%;
}
</style>

---

3. Menghubungkan ke PostGIS

Kita bisa menggunakan bantuan backend untuk mengolah data spasial dengan format GeoJSON.

Contoh SQL Query:

SELECT id, name, ST_AsGeoJSON(geom)::json AS geometry
FROM locations;

Pastikan response dari backend merupakan format GeoJSON FeatureCollection yang valid.

---

4. Memasukkan Data GeoJSON ke Leaflet

Update component map untuk fetch dan menampilkan GeoJSON:

onMounted(async () => {
  const map = L.map(mapContainer.value).setView([-8.65, 115.2], 9)

  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© OpenStreetMap contributors',
  }).addTo(map)

  const res = await fetch('http://localhost:3000/api/geojson')
  const geojson = await res.json()

  L.geoJSON(geojson, {
    onEachFeature: (feature, layer) => {
      if (feature.properties?.name) {
        layer.bindPopup(feature.properties.name)
      }
    },
  }).addTo(map)
})

---

5. Beberapa Tips Untuk PostGIS

• Fungsi ST_Intersects atau ST_Within dapat digunakan pada SQL untuk filter berdasarkan wilayah/area.
• Simpan data geometri dalam format yang cukup umum, seperti geometry(Point, 4326) atau sejenisnya
• Gunakan fungsi ST_AsGeoJSON() agar dapat langsung digunakan oleh frontend

---

✅ Kesimpulan

Kini working space untuk memulai pengolahan data spasial sudah siap digunakan untuk:

• Melakukan filter wilayah/area/provinsi
• Mengubah styling layer berdasarkan atribut
• Menambahkan fungsi interaktif pada peta seperti popup dan tooltip