Smart City 2D Mapping #2: Membuat Peta Digital dengan Leaflet - Perwira Learning Center

1. Latar Belakang

    Kadang kita berpikir, bagaimana cara membuat peta digital seperti Google Maps yang dapat diakses melalui website? Pertanyaan sederhana ini menjadi dasar dalam pengembangan proyek Smart City Purbalingga yang sedang saya kerjakan. Tidak hanya menampilkan data dalam bentuk teks, tetapi juga bagaimana informasi tersebut dapat divisualisasikan secara lebih interaktif dan mudah dipahami oleh pengguna. Untuk menjawab hal tersebut, saya mulai melakukan implementasi peta digital menggunakan teknologi berbasis web, yaitu dengan memanfaatkan library Leaflet. Pada tahap ini, fokus utama adalah membangun peta dasar sebagai fondasi awal yang nantinya akan dikembangkan lebih lanjut menjadi sistem informasi kota yang terintegrasi dalam satu platform.

2. Alat dan Bahan

A. Perangkat Lunak

- Sistem Operasi Linux (atau yang lainnya)

- Visual Studio Code (atau text editor lainnya)

- Laravel

- React (opsional)

- Library Leaflet

- OpenStreetMap

B. Perangkat Keras

- Laptop / PC

3. Pembahasan

3.1 Struktur Folder

    Dalam proses pengembangan Smart City Purbalingga, proyek dibagi menjadi dua bagian utama, yaitu backend dan frontend. Backend menggunakan Laravel 12 yang berfungsi untuk mengelola data dan logika sistem, sedangkan frontend menggunakan React yang berfungsi untuk menampilkan UI.

Untuk sementara, bentuk struktur folder yang saya miliki adalah sebagai berikut.

SMARTCITY/

│

├── backend/ (Laravel 12)

│   ├── app/

│   ├── routes/

│   ├── database/

│   └── resources/

│

├── frontend/ (React)

│   ├── src/

│   │   ├── assets/ 

│   │   ├── components/ -> Untuk komponen react

│   │   └── pages/ -> Untuk halaman website

│   ├── App.css

│   ├── App.jsx -> Routing website

│   ├── index.css

│   ├── main.jsx

│   └── package.json

3.2 Implementasi Peta Dasar dengan Leaflet

    Pada tahap ini dilakukan implementasi peta dasar menggunakan Leaflet dengan bantuan library React Leaflet. Peta akan ditampilkan dalam bentuk komponen React sehingga dapat dengan mudah diintegrasikan ke dalam sistem website Smart City Purbalingga.

frontend/src/components/Minimap.jsx

import { MapContainer, TileLayer } from 'react-leaflet';
import 'leaflet/dist/leaflet.css';

function MapComponent() {
  return (
    // Kode akan ditulis disini
  );
}

export default MapComponent;

    Kode tersebut merupakan struktur kode dasar untuk memulai membuat komponen.

3.3 Penentuan Lokasi Awal Peta

    Lokasi awal peta akan saya tentukan pada pusat daerah Purbalingga yaitu Alun-alun purbalingga, dengan koordinat -7.3906, 109.3647. Koordinat ini diperoleh dari layanan peta digital yaitu Google Maps. Kode berikut dapat ditulis di dalam return.

const CENTER = [-7.3906, 109.3647];

const map = L.map(mapRef.current, {
    center: CENTER,
    zoom: 12,
});

Penjelasan:

CENTER -> menyimpan koordinat pusat kota (Purbalingga)

L.map() -> digunakan untuk menginisialisasi peta

center -> menentukan titik awal tampilan peta

zoom: 12 -> mengatur tingkat zoom awal agar wilayah kota terlihat jelas

3.4 Penambahan Tile Layer (Sumber Peta)

    Untuk sementara, kita gunakan sumber peta dari OpenStreetMap agar data dapat muncul di map yang sedang kita buat.

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

Penjelasan:

L.tileLayer() -> digunakan untuk menambahkan tampilan peta

URL tile -> mengambil data peta dari OpenStreetMap

attribution -> memberikan kredit kepada penyedia data

.addTo(map) -> menampilkan layer ke dalam peta

3.5 Hasil Kode

import { MapContainer, TileLayer } from 'react-leaflet';
import 'leaflet/dist/leaflet.css';

function MapComponent() {
  return (
    <MapContainer
      center={[-7.3905, 109.3639]}
      zoom={13}
      style={{ height: "500px", width: "100%" }}
    >
      <TileLayer
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        attribution="&copy; OpenStreetMap contributors"
      />
    </MapContainer>
  );
}

4. Daftar Pustaka

Google. (n.d.). Purbalingga, Central Java. https://www.google.com/maps

OpenStreetMap contributors. (n.d.). Peta wilayah Purbalingga. https://www.openstreetmap.org/