Id Spot

Borja Portuondo

Hi to all!

I´m trying to get the right Id Spot for my location, but it´s being imposible at all.
Could someone help me?
The exact Spot is called Mundaka. Id??
Thanks!

Suty

@Borja-Portuondo Can you please let me know, what exactly do you mean by ID of the spot and where would you like to use the ID?

Borja Portuondo

@Ondřej-Šutera

I´m trying to do a Fetch to your API. The Id issue is ok, I changed the way I´m doing it. But know I have an error I cannot solve, and it seems is something with the ApiKey itself, wich is the good one provided by Windy.

I´m building a component in React to get some info, for personal training actaully.

This is the code I´m using,

import React, { useEffect, useState } from 'react';

export default function LaMar () {

const [seaConditions, setSeaConditions] = useState(null);
const [lowTide, setLowTide] = useState(null);
const [highTide, setHighTide] = useState(null);
const [waveConditions, setWaveConditions] = useState(null);

useEffect(() => {
const fetchData = async () => {
try {
const response = await fetch('https://api.windy.com/api/forecast/v2?lat=43.4094&lon=-2.6915&key=3dzxp6IkDLni8tjlwvflPvdmqRJhqPpS');
const data = await response.json();

    // Extract the sea conditions, low and high tide, and wave conditions
    const seaConditionsData = data.forecast.sea;
    const lowTideData = data.forecast.tides.tide[0];
    const highTideData = data.forecast.tides.tide[1];
    const waveConditionsData = data.forecast.waves;

    // Update the state with the retrieved information
    setSeaConditions(seaConditionsData);
    setLowTide(lowTideData);
    setHighTide(highTideData);
    setWaveConditions(waveConditionsData);
  } catch (error) {
    console.log('Error:', error);
  }
};

fetchData();

}, []);

return (

Sea Conditions: {seaConditions}

Low Tide: {lowTide}

High Tide: {highTide}

Wave Conditions: {waveConditions}

);
};

But I´m having this error :

LaMar.jsx:111 GET https://api.windy.com/api/forecast/v2?lat=43.4094&lon=-2.6915&key=3dzxp6IkDLni8tjlwvflPvdmqRJhqPpS 404
fetchData @ LaMar.jsx:111
(anonymous) @ LaMar.jsx:130
commitHookEffectListMount @ react-dom.development.js:23150
invokePassiveEffectMountInDEV @ react-dom.development.js:25154
invokeEffectsInDev @ react-dom.development.js:27351
commitDoubleInvokeEffectsInDEV @ react-dom.development.js:27330
flushPassiveEffectsImpl @ react-dom.development.js:27056
flushPassiveEffects @ react-dom.development.js:26984
commitRootImpl @ react-dom.development.js:26935
commitRoot @ react-dom.development.js:26682
performSyncWorkOnRoot @ react-dom.development.js:26117
flushSyncCallbacks @ react-dom.development.js:12042
(anonymous) @ react-dom.development.js:25651
LaMar.jsx:126 Error: SyntaxError: Unexpected token '

Borja Portuondo

And I was using this other way also, and here is the issue with the spotId, Line 04

// export default function LaMar() {
// const [waveData, setWaveData] = useState(null);
// const apiKey = '3dzxp6IkDLni8tjlwvflPvdmqRJhqPpS';
// const spotId = '621'; // ID del spot de Mundaka en Windy API

// useEffect(() => {
// fetch(https://api.windy.com/api/webcams/v2/list/spots/${spotId}?show=wind&key=${apiKey})
// .then(response => response.json())
// .then(data => {
// // Aquí puedes manejar los datos de respuesta
// setWaveData(data.result[0]); // Selecciona el primer resultado del array
// })
// .catch(error => {
// // Manejo de errores
// console.error(error);
// });
// }, []);

// if (!waveData) {
// return

Cargando...

;
// }

// return (
//

//

Estado del mar y olas en Mundaka

// {/* Aquí puedes mostrar los datos obtenidos, como la altura de las olas, dirección del viento, etc. /}
// {/ Ejemplo: /}
//
Altura de las olas: {waveData.waveHeight} metros

//
Dirección del viento: {waveData.windDirection}

// {/ Puedes personalizar cómo deseas mostrar los datos */}
//

// );
// }

Suty

Hi @Borja-Portuondo, I forwarded this to colleagues and they told me that you try to send the GET method, instead of POST, which should be there, more info about that here.

Borja Portuondo

@Ondřej-Šutera Yes, I´m doing a GET method cause I need that info, waves and sea conditions.
If I do a POST method, what I´m doing is updating your API, and that´s not my case.

Suty

@Borja-Portuondo Unfortunately, our API is used with POST request only. Here is the sample from our colleagues

curl -d '{"lat": 49.809, "lon": 16.787, "model": "gfs", "parameters": ["wind", "dewpoint", "rh", "pressure"], "levels": ["surface", "800h", "300h"], "key": "your_API_key"}' -H "Content-Type: application/json" -X POST https://api.windy.com/api/point-forecast/v2

If you mean anything else, please send your API request directly so colleagues can take a look at the real piece of API request.

Borja Portuondo

@Ondřej-Šutera Ah ok! I thought it was posible doing GET method.
I have found an other option which allows me so.
Thanks!