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 © <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)
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.