Marker Layer

<script lang="ts">
  import MapLibre from 'svelte-maplibre/MapLibre.svelte';
  import GeoJSON from 'svelte-maplibre/GeoJSON.svelte';
  import { mapClasses } from '../styles.js';
  import code from './+page.svelte?raw';
  import CodeSample from '$site/CodeSample.svelte';
  import states from '$site/states.json?url';
  import MarkerLayer from 'svelte-maplibre/MarkerLayer.svelte';
  import Popup from 'svelte-maplibre/Popup.svelte';
</script>

<MapLibre
  style="https://basemaps.cartocdn.com/gl/positron-gl-style/style.json"
  class={mapClasses}
  standardControls
  center={[-98.137, 40.137]}
  zoom={4}
>
  <GeoJSON id="states" data={states} promoteId="STATEFP">
    <MarkerLayer interactive>
      {#snippet children({ feature })}
        <div class="rounded-full bg-gray-200 p-2 shadow">
          <div class="text-sm font-bold">{feature.properties?.NAME}</div>
        </div>
        <Popup openOn="hover">
          {feature.properties?.NAME} has FIPS code {feature.properties?.STATEFP}
        </Popup>
      {/snippet}
    </MarkerLayer>
  </GeoJSON>
</MapLibre>