Smart City 2D Mapping #5: Integrasi Peta Digital ke Website Portal Informasi Purbalingga

1. Latar Belakang

Peta digital dalam pengembangan portal informasi perlu diintegrasikan agar pengguna bisa mengaksesnya secara langsung tanpa keluar dari halaman utama. Oleh karena itu, peta tidak hanya dibuat sebagai halaman khusus, tetapi juga ditampilkan dalam bentuk preview sebagai bagian dari sistem. Artikel ini akan membahas tentang bagaimana cara mengintegrasikan peta yang sudah dibuat ke dalam aplikasi utama.

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 Konsep Integrasi Peta ke Website

Integrasi peta dilakukan dengan cara membagi tampilan menjadi dua bagian:

Mini Map (preview) : ditampilkan di halaman utama
Full Map : ditampilkan di halaman khusus (/peta)

Dengan konsep ini:

User bisa melihat gambaran peta secara cepat
User bisa membuka peta lengkap jika dibutuhkan

3.2 Implementasi Peta ke Aplikasi Utama

Peta ditampilkan dalam bentuk komponen React terpisah, yaitu MiniMap, lalu dipanggil sebagai preview di halaman utama yaitu portal informasinya.

src/components/MiniMap.jsx

import { useEffect, useRef } from 'react';

export default function MiniMap() {
    const mapRef = useRef(null);
    const instanceRef = useRef(null);

    useEffect(() => {
        if (instanceRef.current) return;
        
        const L = window.L;
        if (!L || !mapRef.current) return;

        const map = L.map(mapRef.current, {
            center: [-7.3906, 109.3647],
            zoom: 12,
            zoomControl: false,
            dragging: false,
            scrollWheelZoom: false,
            doubleClickZoom: false,
            touchZoom: false,
            keyboard: false,
            attributionControl: false,
        });

        L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
            maxZoom: 19,
        }).addTo(map);

        const dotIcon = L.divIcon({
            html: `<div style="background:#5d93c7;width:12px;height:12px;border-radius:50%;border:2px solid white;box-shadow:0 0 0 4px rgba(93,147,199,.3);"></div>`,
            iconSize: [12, 12],
            iconAnchor: [6, 6],
            className: '',
        });

        L.marker([-7.3906, 109.3647], { icon: dotIcon }).addTo(map);

        instanceRef.current = map;
    }, []);

    return (
        <div
            ref={mapRef}
            style={{ width: '100%', height: '100%', minHeight: 480 }}
        />
    );
}

3.3 Koneksi Data antara Peta dan Sistem

Agar peta terhubung dengan sistem, kita gunakan navigasi menuju halaman peta utama.

<div className="mengenal-left" style={{ padding: 0, overflow: 'hidden', position: 'relative', minHeight: 480 }}>
    <MiniMap />
        <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, zIndex: 500, background: 'linear-gradient(to top, rgba(10,29,61,.9) 0%, transparent 100%)', padding: '28px 28px 24px' }}>
              <div style={{ fontSize: 11, letterSpacing: 3, textTransform: 'uppercase', color: 'var(--teal-300)', fontWeight: 600, marginBottom: 6 }}>Smart City</div>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 22, color: 'white', fontWeight: 700, marginBottom: 8 }}>Purbalingga Digital & Terhubung</div>
              <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', marginTop: 12 }}>
                  {[['fa-video','CCTV Live'],['fa-map','Peta Informasi'],['fa-bell','Notifikasi']].map(([ico, lbl]) => (
                        <div key={lbl} style={{ display: 'flex', alignItems: 'center', gap: 6, background: 'rgba(255,255,255,.12)', padding: '7px 12px', borderRadius: 8, backdropFilter: 'blur(6px)' }}>
                              <i className={`fas ${ico}`} style={{ color: 'var(--teal-300)', fontSize: 12 }} />
                              <span style={{ fontSize: 12, color: 'rgba(255,255,255,.85)' }}>{lbl}</span>
                        </div>
                   ))}
         </div>
</div>

      // link ini akan mengarah ke halaman peta lengkap
      <Link to="/peta" style={{ position: 'absolute', inset: 0, zIndex: 600, cursor: 'pointer' }} title="Buka Peta Selengkapnya" />

3.4 Tampilan Peta

Untuk memperjelas informasi, minimap dan informasinya dibungkus di dalam card yang rapi.

<section className="mengenal-section section" id="mengenal">
      <div className="container">
          <FadeIn>
               <div className="mengenal-card">
                   {/* Kode minimap disini */}
               </div>
          </FadeIn>
      </div>
 </section>