Using Leaflet map I retrieve the altitude basing on coordinates, then I need to fill both input fields (coordinates, altitude). I can retrieve the coordinates without problem but the I can't retrieve the altitude.
I have this error:
plantObservedsMap.js:217 GET https://calefeno.arca.buzz/getElevation?lat=46.156589&lng=8.978877 500
and then this:
plantObservedsMap.js:231 Error fetching altitude: SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON
This is the js code:
// on click (or tap), populate the fields: coordinates and altitude
map.on('click', function (e) {
var lat = e.latlng.lat.toFixed(6);
var lng = e.latlng.lng.toFixed(6);
// Update coordinates field
document.getElementById('coordinates').value = `${lat},${lng}`;
// print lat and lng in console log
console.log("You clicked the map at " + lat + ", " + lng);
// Fetch elevation data from your Laravel backend
fetch(`/getElevation?lat=${lat}&lng=${lng}`) // Update the URL to your Laravel route
.then(response => response.json())
.then(data => {
if (data && data.results && data.results.length > 0) {
var altitude = data.results[0].elevation.toFixed(2); // Altitude to two decimal places
console.log('Altitude:', altitude);
// Update altitude field in the view
document.getElementById('altitude').value = altitude;
// Update coordinates field
//document.getElementById('coordinates').value = `${lat},${lng}`;
}
})
.catch(error => console.error('Error fetching altitude:', error));
});
This is the Controller code:
use App\Models\PlantObserved;
class ElevationController extends Controller
{
public function __construct()
{
//CORS policy
$this->middleware('cors');
}
public function getElevation(Request $request)
{
Log::info("getElevation method called.");
$lat = $request->input('lat');
$lng = $request->input('lng');
// Call the OpenTopoData API
$response = Http::get("https://api.opentopodata.org/v1/eudem25m", [
'locations' => "$lat,$lng"
]);
return response()->json($response->json());
}
}
and this is the view code (only the part interested):
<div class="form-group">
<label for="altitude">{{ trans('cruds.plantObserved.fields.altitude') }}</label>
<input class="form-control {{ $errors->has('altitude') ? 'is-invalid' : '' }}" type="text"
name="altitude" id="altitude" value="{{ old('altitude', '') }}">
@if ($errors->has('altitude'))
<div class="invalid-feedback">
{{ $errors->first('altitude') }}
</div>
@endif
<span class="help-block">{{ trans('cruds.plantObserved.fields.altitude_helper') }}</span>
</div>
<div class="form-group">
<label for="coordinates">{{ trans('cruds.plantObserved.fields.coordinates') }}</label>
<input class="form-control {{ $errors->has('coordinates') ? 'is-invalid' : '' }}" type="text"
placeholder="Clicca sulla mappa per ricevere le coordinate" name="coordinates" id="coordinates"
value="{{ old('coordinates', '') }}">
@if ($errors->has('coordinates'))
<div class="invalid-feedback">
{{ $errors->first('coordinates') }}
</div>
@endif
<span class="help-block">{{ trans('cruds.plantObserved.fields.coordinates_helper') }}</span>
</div>
I need to populate two fields in the view with coordinates and altitude. I retrieve the coordinates using Leaflet map and then I pass the data to an API.
The API works (you can try): https://api.opentopodata.org/v1/eudem25m?locations=46,9 but not in my code. I create the project with quick admin panel and laravel 10.
I'm new in Laravel so please have mercy.