Usage

<script setup lang="ts">
const mapbox = ref<Map | null>(null);
const mapboxFeatureCollection = ref<Array<Feature<Point, any>> | null>(null);
</script>

<template>
    <MapboxMap
        ref="mapbox"
        :features="mapboxFeatureCollection"
        :location="mapboxFeatureCollection[0]"
      >
        <MapboxSupercluster>
            <!-- Slot for rendering individual markers -->
            <template #marker="ctx">
                <MapboxMarker :id="ctx.id" :feature="ctx.feature" />
            </template>

            <!-- Slot for rendering grouped markers e.g. clusters -->
            <template #cluster="ctx">
                <MapboxClusterMarker :id="ctx.id" :feature="ctx.feature" />
            </template>
        </MapboxSupercluster>

        <!-- Slot for rendering a single marker -->
        <template #location="ctx">
            <MapboxMarker :id="ctx.id" :feature="ctx.feature" />
        </template>
    </MapboxMap>
</template>