0

I'm using svelte-geolocation in +layout.svelte to get the current position.

<script>
    import styles from '../styles.css';
    import Navbar from './Navbar.svelte';
    import Footer from './Footer.svelte';
    export let data;

    import Geolocation from 'svelte-geolocation';

    let coords = [];
</script>

<Navbar />

<main>
    <Geolocation getPosition bind:coords />

    {coords}

    <slot />
    <p>{console.log(data)}</p>
</main>

<Footer />

In the +layout.js I'm making an API call to get weather data and I want to use the coords I'm getting in the +layout.svelte.

import { PUBLIC_API_KEY } from '$env/static/public';

//coords are hardcoded for now
export async function load({ fetch }) {
  const weather_res = await fetch(
    `https://api.openweathermap.org/data/3.0/onecall?lat=53.994139&lon=-1.538713&units=imperial&exclude=minutely,hourly,daily,alerts&appid=${PUBLIC_API_KEY}`
    );
    const weather_data = weather_res.json();

    return {
        weather_data
    };
}

Tried a couple of things but I'm new to Svelte and I ran out of ideas.

H.B.
  • 166,899
  • 29
  • 327
  • 400
Casee
  • 1

1 Answers1

1

You can send the coordinates as either route parameters or as URL query parameters.

In the former case they will be part of the params of the load event, in the latter case you get the values from the url.searchParams.

To update the URL and trigger the load function again one can use goto.

H.B.
  • 166,899
  • 29
  • 327
  • 400