Menampilkan Lokasi Maps dengan Leaflet di Codeigniter 4

Menampilkan Lokasi Maps dengan Leaflet di Codeigniter 4

Membuat peta interaktif di aplikasi CodeIgniter 4 menggunakan Leaflet.js adalah solusi yang fleksibel dan mudah untuk menampilkan data lokasi sesuai yang Anda kehendaki baik itu statik ataupun dynamic. Artikel ini akan memandu Anda langkah demi langkah dalam menampilkan peta interaktif menggunakan Leaflet.js di framework CodeIgniter 4.

Mengapa Menggunakan Leaflet.js di CodeIgniter 4?

Gratis dan Open Source: Leaflet.js menggunakan OpenStreetMap, sehingga Anda tidak perlu membayar lisensi peta.
Ringan dan Mudah: Leaflet.js memiliki ukuran file kecil dan sangat mudah digunakan.
Interaktif: Menyediakan berbagai fitur seperti marker, popup, poligon, dan lainnya untuk meningkatkan pengalaman pengguna.

Langkah-Langkah Menampilkan Lokasi Maps dengan Leaflet.js di CodeIgniter 4

1. Instalasi CodeIgniter 4

Jika belum memiliki proyek CodeIgniter 4, buat proyek baru:

composer create-project codeigniter4/appstarter leaflet-map

cd leaflet-map

2. Buat Database dan Konfigurasi

Buat database baru, misalnya leaflet_db.
Konfigurasi Database: Edit file .env di proyek Anda:

database.default.hostname = localhost
database.default.database = leaflet_db
database.default.username = root
database.default.password =
database.default.DBDriver = MySQLi

3. Buat Migration untuk Data Lokasi

Buat migration untuk tabel lokasi:
php spark make:migration CreateLocations
Edit file app/Database/Migrations/xxxx-xx-xx-xxxxxx_CreateLocations.php:
public function up()
{
$this->forge->addField([
'id' => [
'type' => 'INT',
'constraint' => 5,
'unsigned' => true,
'auto_increment' => true,
],
'name' => [
'type' => 'VARCHAR',
'constraint' => '100',
],
'latitude' => [
'type' => 'DECIMAL',
'constraint' => '10,7',
],
'longitude' => [
'type' => 'DECIMAL',
'constraint' => '10,7',
],
'created_at' => [
'type' => 'DATETIME',
'null' => true,
],
'updated_at' => [
'type' => 'DATETIME',
'null' => true,
],
]);
$this->forge->addKey('id', true);
$this->forge->createTable('locations');
}

public function down()
{
$this->forge->dropTable('locations');
}
Jalankan migration:
php spark migrate
Tambahkan Data Lokasi ke Database: Gunakan Tinker atau langsung melalui PHPMyAdmin untuk menambahkan data lokasi:
INSERT INTO locations (name, latitude, longitude) VALUES
('Jakarta', -6.2088, 106.8456),
('Surabaya', -7.2575, 112.7521);

4. Buat Model dan Controller

Buat Model untuk Lokasi: Buat file app/Models/LocationModel.php:
Buat Controller untuk Lokasi: Buat file app/Controllers/LocationController.php:
namespace App\Controllers;

use App\Models\LocationModel;

class LocationController extends BaseController
{
public function index()
{
$model = new LocationModel();
$locations = $model->findAll();

return view('locations/index', ['locations' => $locations]);
}
}
Tambahkan Route: Edit file app/Config/Routes.php:
$routes->get('/locations', 'LocationController::index');

5. Buat View untuk Menampilkan Peta

Buat file app/Views/locations/index.php:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Peta Lokasi</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<style>
#map {
height: 500px;
width: 100%;
}
</style>
</head>
<body>
<h1>Peta Lokasi</h1>
<div id="map"></div>

<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script>
const map = L.map('map').setView([-6.2088, 106.8456], 5);

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

// Tambahkan marker dari data lokasi
const locations = <?= json_encode($locations) ?>;

locations.forEach(location => {
L.marker([location.latitude, location.longitude])
.addTo(map)
.bindPopup(location.name);
});
</script>
</body>
</html>
Penjelasan Kode:

Leaflet.js diintegrasikan melalui CDN.
json_encode($locations) mengonversi data lokasi dari PHP ke JavaScript.
L.marker() menambahkan marker di peta untuk setiap lokasi.

6. Testing

Jalankan server lokal:
```
bash
php spark serve
```

Akses aplikasi melalui browser:

bash
http://localhost:8080/locations

Menampilkan Lokasi Maps dengan Leaflet di Codeigniter 4