cara Melacak dan Menampilkan Lokasi Maps dengan Leaflet di Laravel beserta penjelasannya

0




Cara Melacak dan Menampilkan Lokasi Maps dengan Leaflet di Laravel beserta penjelasannya

 untuk melacak dan menampilkan lokasi pada peta menggunakan Leaflet di Laravel. Panduan ini meliputi langkah-langkah mulai dari setup Laravel, instalasi Leaflet, hingga menampilkan lokasi di peta.

Langkah 1: Setup Laravel

  1. Buat Proyek Laravel (jika belum ada):

    bash
    composer create-project laravel/laravel lokasi-maps

  2. Jalankan Proyek:

    bash
    php artisan serve

    Akses aplikasi melalui http://127.0.0.1:8000.

Langkah 2: Install dan Siapkan Leaflet

  1. Tambahkan Library Leaflet:

    • Tambahkan Leaflet CSS dan JS di file resources/views/layouts/app.blade.php atau layout yang digunakan.
    html
    <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>

  2. Tambahkan Div untuk Map:

    • Tambahkan elemen HTML untuk menampilkan peta dengan ukuran yang diinginkan.
    html
    <style>
    #map {
        height: 500px;
        width: 100%;
    }
</style>

Langkah 3: Membuat View untuk Menampilkan Peta

  1. Buat Route: Tambahkan route di routes/web.php:

    php
    use App\Http\Controllers\MapController;

Route::get('/lokasi', [MapController::class, 'index'])->name('lokasi');

  2. Buat Controller: Jalankan perintah untuk membuat controller:

    bash
    php artisan make:controller MapController

    Isi method index di MapController.php:

    php
    namespace App\Http\Controllers;

use Illuminate\Http\Request;

class MapController extends Controller
{
    public function index()
    {
        // Kirim koordinat lokasi awal ke view
        return view('lokasi', [
            'latitude' => -6.200000, // Koordinat default (contoh: Jakarta)
            'longitude' => 106.816666
        ]);
    }
}

  3. Buat View resources/views/lokasi.blade.php:

    html
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lokasi Maps</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 Anda</h1>
    <div id="map"></div>

    <script>
        // Koordinat dari server (default atau berdasarkan lokasi pengguna)
        var latitude = {{ $latitude }};
        var longitude = {{ $longitude }};

        // Inisialisasi map
        var map = L.map('map').setView([latitude, longitude], 13);

        // Tambahkan tile layer
        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([latitude, longitude]).addTo(map)
            .bindPopup('Lokasi Anda').openPopup();
    </script>
</body>
</html>

Langkah 4: Tambahkan Pelacakan Lokasi (Opsional)

Untuk melacak lokasi pengguna secara dinamis menggunakan Geolocation API:

  1. Tambahkan Geolocation Script:

    javascript
    if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function (position) {
        var userLat = position.coords.latitude;
        var userLng = position.coords.longitude;

        // Update peta dengan lokasi pengguna
        map.setView([userLat, userLng], 13);
        marker.setLatLng([userLat, userLng])
            .bindPopup('Lokasi Anda Sekarang').openPopup();
    }, function (error) {
        console.log("Geolocation tidak diizinkan: " + error.message);
    });
} else {
    alert("Browser Anda tidak mendukung Geolocation.");
}

  2. Tambahkan kode ini di bagian bawah script peta.

Hasil Akhir

  1. Ketika pengguna mengakses http://127.0.0.1:8000/lokasi, peta akan ditampilkan dengan lokasi default (Jakarta).
  2. Jika menggunakan Geolocation API, peta akan memperbarui lokasi berdasarkan posisi pengguna.

Penjelasan

  1. Leaflet: Digunakan untuk menampilkan peta interaktif.

    • L.map('map'): Membuat peta di elemen dengan ID map.
    • L.tileLayer: Menambahkan layer peta (misalnya, OpenStreetMap).
    • L.marker: Menambahkan marker untuk menandai lokasi tertentu.

  2. Laravel:

    • Controller (MapController): Mengatur data (koordinat lokasi) yang dikirim ke view.
    • Route: Mengarahkan URL /lokasi ke method index pada MapController.

  3. Geolocation API: Melacak posisi pengguna secara langsung dari browser, dengan izin dari pengguna.


Tags

You may like these posts

Previous Post Next Post

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