Cara Menampilkan Lokasi Maps dengan Leaflet di Codeigniter 4 beserta penjelasannya

0

 Cara Menampilkan Lokasi Maps dengan Leaflet di Codeigniter 4 beserta penjelasannya

langkah-langkah untuk menampilkan lokasi pada peta menggunakan Leaflet.js di CodeIgniter 4.

Langkah 1: Setup CodeIgniter 4

  1. Install CodeIgniter 4: Jika belum memiliki CodeIgniter 4, instal menggunakan Composer:

    bash
    composer create-project codeigniter4/appstarter lokasi-maps

  2. Jalankan Proyek:

    bash
    php spark serve

    Akses aplikasi di http://localhost:8080.

Langkah 2: Tambahkan Leaflet.js ke View

  1. Tambahkan Leaflet: Di view yang akan digunakan untuk menampilkan peta, tambahkan Leaflet CSS dan JS.

    Buat file view baru, misalnya app/Views/map_view.php:

    html
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Leaflet Map</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    <style>
        #map {
            height: 500px;
            width: 100%;
        }
    </style>
</head>
<body>
    <h1>Lokasi Maps dengan Leaflet</h1>
    <div id="map"></div>

    <script>
        // Inisialisasi peta
        var map = L.map('map').setView([-6.200000, 106.816666], 13); // Koordinat Jakarta

        // Tambahkan tile layer (OpenStreetMap)
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 19,
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);

        // Tambahkan marker
        var marker = L.marker([-6.200000, 106.816666]).addTo(map)
            .bindPopup('Jakarta, Indonesia')
            .openPopup();
    </script>
</body>
</html>

Langkah 3: Buat Controller

  1. Buat controller baru, misalnya MapController:

    bash
    php spark make:controller MapController

  2. Isi file app/Controllers/MapController.php:

    php
    <?php

namespace App\Controllers;

class MapController extends BaseController
{
    public function index()
    {
        // Tampilkan view map_view.php
        return view('map_view');
    }
}

Langkah 4: Tambahkan Route

Tambahkan route baru di file app/Config/Routes.php:

php
$routes->get('/map', 'MapController::index');

Langkah 5: Jalankan Aplikasi

  1. Akses aplikasi di http://localhost:8080/map.
  2. Peta dengan lokasi Jakarta akan ditampilkan.

Penjelasan

  1. Leaflet.js:

    • Library ini digunakan untuk membuat peta interaktif.
    • L.map('map'): Membuat elemen peta dengan ID map.
    • L.tileLayer: Menambahkan layer peta dari OpenStreetMap.
    • L.marker: Menambahkan marker ke peta dengan popup.

  2. CodeIgniter 4:

    • Controller (MapController): Mengarahkan ke view yang berisi peta.
    • View (map_view.php): Berisi kode HTML untuk peta dan script Leaflet.js.
    • Routes: Menentukan URL /map yang diarahkan ke controller.

  3. Konfigurasi Koordinat:

    • Default koordinat diatur ke Jakarta (-6.200000, 106.816666).
    • Koordinat dapat diubah sesuai kebutuhan, misalnya untuk lokasi dinamis.

Pengembangan Lebih Lanjut

  1. Lokasi Dinamis:

    • Gunakan database untuk menyimpan koordinat lokasi dan tampilkan marker berdasarkan data tersebut.

    • Contoh data di database:

      sql
      CREATE TABLE locations (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(100),
    latitude DECIMAL(10, 8),
    longitude DECIMAL(11, 8)
);

    • Ambil data dengan Query Builder di Controller dan kirim ke view:

      php
      public function index()
{
    $db = \Config\Database::connect();
    $query = $db->query("SELECT * FROM locations");
    $locations = $query->getResult();

    return view('map_view', ['locations' => $locations]);
}

    • Di map_view.php, tambahkan marker untuk setiap lokasi:

      javascript
      var locations = <?php echo json_encode($locations); ?>;
locations.forEach(function(location) {
    L.marker([location.latitude, location.longitude])
        .addTo(map)
        .bindPopup(location.name);
});

  2. Geolocation:

    • Tambahkan script untuk mendeteksi lokasi pengguna:
      javascript
      if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function (position) {
        var userLat = position.coords.latitude;
        var userLng = position.coords.longitude;

        L.marker([userLat, userLng]).addTo(map)
            .bindPopup("Lokasi Anda").openPopup();

        map.setView([userLat, userLng], 13);
    });
} else {
    alert("Geolocation tidak didukung oleh browser Anda.");
}
Tags

You may like these posts

Previous Post Next Post

نموذج الاتصال