<Mapbox>

Usage

The Mapbox component is a high-level wrapper that combines MapboxMap and MapboxSupercluster components to provide a complete Mapbox GL JS integration with built-in clustering support. It handles the initialization of the map and manages the clustering of markers automatically.

MapComponent.vue

<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>

<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>

type MapboxProps = { /** * The class to apply to the cluster marker. */ clusterMarkerClass ?: string; /** * The class to apply to the cluster cluster marker. */ clusterClusterMarkerClass ?: string; };

API Reference

Prop	Default	Type
`clusterMarkerClass`		`string` The class to apply to the cluster marker.
`clusterClusterMarkerClass`		`string` The class to apply to the cluster cluster marker.