Cannot retrieve the altitude using leaflet map and JavaScript

44 Views Asked by At

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.

0

There are 0 best solutions below