Smart City 2D Mapping #1: Konsep Peta Digital untuk Portal Informasi Kota - Perwira Learning Center

1. Latar Belakang

    Perkembangan teknologi digital membuat penyajian informasi kota tidak lagi terbatas pada teks dan gambar, tetapi juga dapat ditampilkan dalam bentuk peta interaktif. Melalui peta digital, pengguna dapat memahami lokasi dan persebaran informasi secara lebih jelas dan visual. Oleh karena itu, diperlukan pemahaman mengenai konsep dasar peta digital, khususnya 2D mapping, serta teknologi yang digunakan untuk membangunnya sebagai dasar dalam pengembangan portal informasi kota.

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

B. Perangkat Keras

- Laptop / PC

3. Pembahasan

3.1 Pengertian 2D Mapping

    2D Mapping memiliki keterkaitan dengan suatu objek atau gambar yang hanya memiliki dua dimensi, yaitu panjang dan lebar. Umumnya tampak datar dan digunakan untuk aplikasi pemetaan tradisonal seperti peta jalan dan denah bangunan.

Gambaran peta jalan

Gambaran denah bangunan

3.2 Pengenalan Teknologi 2D Mapping

1. OpenLayers

    OpenLayers adalah library JavaScript untuk membuat map dinamis berbasis web yang dapat menampilkan map tiles, data vektor (atau data spasial seperti titik koordinat suatu tempat), dan markers atau penanda yang dapat di ubah dari sumber manapun. 

2. Google Maps API

    Merupakan layanan peta dari Google yang bisa diintegrasikan ke website atau aplikasi, namun tidak 100% gratis.

3. Mapbox GL JS

    Mapbox dapat menciptakan dan menggabungkan data untuk menyediakan peta, navigasi, dan layanan pencarian lokasi yang terus diperbarui pada platform cloud sehingga ramah untuk pengembang.

4. HERE Maps API

    Merupakan platform mapping yang sering digunakan di industri, terutama untuk navigasi dan transportasi. Data navigasinya kuat sehingga lebih cocok untuk aplikasi transportasi/logistik, terdapat fitur real-time traffic juga namun tidak sepopuler teknologi Leaflet.

3.3 Pengenalan Leaflet

    Seperti yang sudah sempat di singgung pada artikel sebelumnya, Leaflet merupakan salah satu teknologi 2D Mapping yang umumnya digunakan untuk menampilkan peta interaktif dan ringan. Memiliki markers dan popup yang mudah untuk di kostumisasi dan juga dapat mengubah tema/style peta sesuai keinginan pengembang.

3.4 Cara Menggunakan Leaflet

A. Menggunakan Leaflet di Laravel (Blade)

1. Siapkan Leaflet

    Karena Leaflet berbasis CDN, kita tidak perlu menginstallnya. Tambahkan CDN berikut di file Blade, misalnya resources/views/map.blade.php.

<!-- CSS Leaflet -->
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css"/>

<!-- JS Leaflet -->
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>

2. Siapkan Container Peta

Tambahkan div untuk menampilkan peta.

<div id="map" style="height: 500px;"></div>

3. Inisialisasi Peta

<script>
    var map = L.map('map').setView([-7.3905, 109.3639], 13); // Koordinat Purbalingga
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; OpenStreetMap contributors'
    }).addTo(map);
</script>

B. Menggunakan Leaflet di React (Framework untuk Frontend)

1. Install Leaflet

    Buka terminal dan ketik kode berikut.

npm install leaflet react-leaflet

2. Import CSS Leaflet

    Tambahkan ini di file utama (misalnya main.jsx atau App.jsx), paling atas kode:

import 'leaflet/dist/leaflet.css';

3. Buat Komponen Map

Contohnya MapComponent.jsx:

import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';

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

4. Gunakan di App.jsx

import MapComponent from './MapComponent';

function App() {
  return (
    <div>
      <h1>Peta Purbalingga</h1>
      <MapComponent />
    </div>
  );
}
export default App;

4. Daftar Pustaka

Draw and Code. (2023, 31 Juli). What is the difference between 2D and 3D Mapping. Diakses dari: https://drawandcode.com/learning-zone/what-is-the-difference-between-2d-and-3d-mapping/

OpenLayers. (n.d.). OpenLayers documentation. Diakses dari: https://openlayers.org/

MapBox. (n.d.). MapBox documentation. Diakses dari: https://www.mapbox.com/about/maps