[FIXED] How to pass leaflet current coordinate to a Laravel controller for use as a variable

Issue

I am currently stuck for days trying to make this work. I found a plugin for Leaflet that can filter data based on radius from coordinate (Leaflet-Coordinate). I tried hard-coding the coordinate into the controller, and it worked perfectly.

My question is how do I take the current coordinates from my Leaflet map and use it as the variable for the controller function?

Here is my main map JS code:

  var map = L.map('map', 15);
        L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
            attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
            maxZoom: 17,
            id: 'mapbox/streets-v11',
            tileSize: 512,
            zoomOffset: -1,
            accessToken: 'pk.eyJ1IjoiZGFuaWVscmFjaGV2YXNraSIsImEiOiJjbDFlZzBpN2wwcjE1M2ZuNHF3NXRvbGh5In0.U44yx8ueWFpYviMcI1U1Sw'
        }).addTo(map);

        map.locate({setView: true});

        map.on('locationfound', function(e) {
            console.log(e.latlng.lat, e.latlng.lng);
            var lat = e.latlng.lat;
            var lng = e.latlng.lng;
            //I want to take this coordinate to controller
        })

And here is the controller code:

 public function mainpagebenef(){
        //$lat = $request->get('lat');
        //$lng = $request->get('lng');
        $beneficiary = beneficiary::nearby([
            1.4701624933456898, //latitude, this is supposed to be coords for current location in leaflet
            110.42952010069433 //longitude, this is supposed to be coords for current location in leaflet
            ],0.5)->closest()
            ->where('status', '=', 'Mahu Bantuan')->get();
        $donor = DB::table('donor')->get();
        return view('mainpagebenef', ['beneficiary' => $beneficiary], ['donor' => $donor]);
    }

Here is the route:

 Route::get('/mainpagebenef', 'mainpagecontroller@mainpagebenef')->name('mainpagebenef');

I tried for days on end and searched countless tutorials, but to no avail. I'm quite new to Laravel and leaflet as a whole, so any help is really appreciated!

Solution

Your js Code should look like

map.on('locationfound', function(e) {
    console.log(e.latlng.lat, e.latlng.lng);
    
    var lat = e.latlng.lat;
    var lng = e.latlng.lng;
    
    axios.post('/myControllerPostMethod', {
       
        latitude: lat,
        longitude: lng
    })
        .then(function (response) {
            console.log(response);
        })
        .catch(function (error) {
            console.log(error);
        });
   
})

And in your controller should be a method accepting post request

public function myControllerPostMethod(){
   
   //$input = $request->all();

   $lat = $request->input('latitude');
   $lng = $request->input('longitud');

    
}

Answered By - Manuel Glez

Answer Checked By - Marie Seifert (PHPFixing Admin)