Mapbox

<template>
  <Mapbox
    :features="features"
    :initialize-with="mapOptions"
    @loaded="onMapLoaded"
  >
    <!-- Custom marker template -->
    <template #marker="{ id, feature }">
      <MapboxMarker
        :id="id"
        :feature="feature"
        class="custom-marker"
      >
        {{ feature.properties.name }}
      </MapboxMarker>
    </template>

    <!-- Custom cluster marker template -->
    <template #cluster="{ id, feature }">
      <MapboxClusterMarker
        :id="id"
        :feature="feature"
        class="custom-cluster"
      >
        {{ feature.properties.point_count }}
      </MapboxClusterMarker>
    </template>
  </Mapbox>
</template>

<script setup lang="ts">
const features = ref([
  {
    type: 'Feature',
    geometry: {
      type: 'Point',
      coordinates: [-74.5, 40]
    },
    properties: {
      name: 'Location 1'
    }
  }
]);

const mapOptions = {
  zoom: 12,
  center: [-74.5, 40]
};

const onMapLoaded = (map) => {
  console.log('Map loaded:', map);
};
</script>