Melacak dan Menampilkan Lokasi Maps dengan Leaflet di Laravel

Melacak dan Menampilkan Lokasi Maps dengan Leaflet di Laravel

Laravel saat ini menjadi trend framework dalam membuat system kecil ataupun menenga bahkan banyak diminati banyak orang.

Membuat fitur peta interaktif di aplikasi Laravel menggunakan Leaflet.js adalah langkah yang bagus untuk meningkatkan pengalaman pengguna. Dalam tutorial ini, Anda akan belajar cara mengintegrasikan Leaflet.js ke dalam Laravel untuk menampilkan lokasi di peta.

Mengapa Menggunakan Leaflet.js di Laravel?

Interaktif dan Responsif: Leaflet.js adalah pustaka yang ringan dan mendukung peta interaktif untuk aplikasi modern.
Open Source: Tidak membutuhkan lisensi tambahan, karena menggunakan data peta dari OpenStreetMap.
Fleksibel: Leaflet.js mudah diintegrasikan dengan Laravel untuk menampilkan data lokasi atau fitur GIS.

Langkah-Langkah Menampilkan Lokasi Maps dengan Leaflet.js di Laravel

1. Instalasi Laravel

Jika belum memiliki proyek Laravel, instal terlebih dahulu:

bash
composer create-project laravel/laravel leaflet-map

2. Siapkan Data Lokasi

Kita akan menyimpan data lokasi (latitude dan longitude) di database.

Buat Migration untuk Tabel Lokasi:

bash
php artisan make:migration create_locations_table

Tambahkan struktur tabel pada file migration di database/migrations:

php
public function up()
{
    Schema::create('locations', function (Blueprint $table) {
        $table->id();
        $table->string('name');
        $table->decimal('latitude', 10, 7);
        $table->decimal('longitude', 10, 7);
        $table->timestamps();
    });
}

Jalankan migration:
```
bash
php artisan migrate
```

Tambahkan Data Lokasi: Gunakan seeder atau langsung input data di database menggunakan Tinker:

php
DB::table('locations')->insert([
    ['name' => 'Jakarta', 'latitude' => -6.2088, 'longitude' => 106.8456],
    ['name' => 'Surabaya', 'latitude' => -7.2575, 'longitude' => 112.7521]
]);

3. Buat Route dan Controller

Tambahkan Route: Di routes/web.php:

php
use App\Http\Controllers\LocationController;

Route::get('/locations', [LocationController::class, 'index']);

Buat Controller: Buat controller untuk mengambil data lokasi:
```
bash
php artisan make:controller LocationController
```

Tambahkan kode di LocationController:

php
namespace App\Http\Controllers;

use App\Models\Location;

class LocationController extends Controller
{
    public function index()
    {
        $locations = Location::all();
        return view('locations.index', compact('locations'));
    }
}

4. Buat View untuk Menampilkan Peta

Buat File View: Buat file resources/views/locations/index.blade.php dan tambahkan kode berikut:

html
<!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); // Koordinat Jakarta sebagai pusat

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

        // Tambahkan Marker untuk setiap lokasi
        const locations = @json($locations);

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

Penjelasan Kode:

Leaflet.js: Ditambahkan melalui CDN.
@json($locations): Mengonversi data lokasi dari backend ke format JavaScript.
L.marker(): Menambahkan marker pada peta.

5. Testing

Buka aplikasi Anda di browser:

bash
php artisan serve

Akses URL: http://127.0.0.1:8000/locations untuk melihat peta dengan lokasi yang ditampilkan.

Dengan mengikuti langkah-langkah di atas, Anda dapat dengan mudah menampilkan lokasi di peta menggunakan Leaflet.js di Laravel. Tutorial ini mencakup persiapan database, integrasi Leaflet.js, dan optimasi SEO untuk memastikan aplikasi Anda dapat ditemukan oleh pengguna lebih banyak.

Jika Anda ingin menambahkan fitur lain seperti routing, heatmap, atau GeoJSON, Leaflet.js memiliki berbagai plugin untuk kebutuhan tersebut. Selamat mencoba!

Melacak dan Menampilkan Lokasi Maps dengan Leaflet di Laravel