Remote Popup Data

<MapLibre
  style="https://basemaps.cartocdn.com/gl/positron-gl-style/style.json"
  class={mapClasses}
  standardControls
  zoom={1}
  center={[-20, 0]}
>
  {#each markers as { lngLat, name }}
    <!-- Unlike the custom marker example, default markers do not have mouse events,
    and popups only support the default openOn="click" behavior -->
    <DefaultMarker {lngLat} draggable>
      <Popup
        offset={[0, -10]}
        on:open={async () => {
          if (!(name in cache)) {
            const resp = await fetch(`/examples/popup_remote/${name}`);
            const result = await resp.json();
            cache[name] = result;
            // trigger reactivity
            cache = cache;
          }
        }}
      >
        {#if name in cache}
          {@const result = cache[name]}
          <div class="text-lg font-bold">{name}</div>
          <img alt="kitten" src={`http://placekitten.com/${result.width}/${result.height}`} />
        {:else}
          <div>Loading...</div>
        {/if}
      </Popup>
    </DefaultMarker>
  {/each}
</MapLibre>

import { json } from '@sveltejs/kit';

const sleep = (ms: number) => new Promise((r) => setTimeout(r, ms));

/**
 * This is a very contrived example.
 */
export async function GET({ params }) {
  const { id } = params;
  // make this request take one second
  await sleep(1000);
  // return some meaningless data
  return json({
    id,
    width: 10 * id.length,
    height: 12 * id.length,
  });
}