MapboxMap

A Vue component that provides a wrapper around the Mapbox GL JS library for creating interactive maps.

Added since: v0.1.0

Last changed: 3 months ago

Overview

MapboxMap is a Vue component that provides a declarative way to create and manage interactive maps using Mapbox GL JS. It handles map initialization, viewport management, and provides a context for child components to interact with the map instance.

Key features:

Reactive viewport management
Feature clustering support
Custom marker support
Location tracking
Event handling

Usage

<template>
  <section class="h-120 relative overflow-hidden">
    <MapboxMap
      ref="mapboxMap"
      :features="features"
      :initialize-with="{
        padding: {
          top: 100,
          right: 100,
          bottom: 100,
          left: 100,
        },
      }"
    >
      <!-- Feature clustering -->
      <MapboxSupercluster>
        <!-- Individual markers -->
        <template #marker="ctx">
          <MapboxMarker
            :id="ctx.id"
            :feature="ctx.feature"
            class="size-10 bg-[cyan] rounded-full"
          >
            {{ ctx.feature.properties.ROAD_NAME }}
          </MapboxMarker>
        </template>
        
        <!-- Cluster markers -->
        <template #cluster="ctx">
          <MapboxClusterMarker
            :id="ctx.id"
            :feature="ctx.feature"
            class="flex items-center justify-center rounded-full size-10 bg-black text-bold text-white"
          />
        </template>
      </MapboxSupercluster>

      <!-- Location marker -->
      <template #location="ctx">
        <MapboxMarker
          :id="ctx.id"
          :feature="ctx.feature"
          class="size-10 bg-[cyan] rounded-full"
        >
          Location
        </MapboxMarker>
      </template>
    </MapboxMap>
  </section>
</template>

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

// Access map instance
onMounted(() => {
  // Example: Focus on features after a delay
  setTimeout(() => {
    mapboxMap.value?.focusFeatures(features.value);
  }, 2000);
});
</script>

API Reference

Props

Prop	Default	Type
`initializeWith`		`MapOptions & { bounds?: LngLatBounds; padding?: { left: number; top: number; right: number; bottom: number } }` Initial map configuration options
`features`	`[]`	`Array<Feature<Point, any>>` Array of GeoJSON features to display on the map
`location`		`Position` Current location coordinates as [longitude, latitude]

Emits

Prop	Default	Type
`loaded`		`(map: Map) => void` Emitted when the map is fully loaded and ready

Slots

Prop	Default	Type
`default`		`-` Default content to be rendered on the map
`location`		`{ id: string, feature: Feature }` Content for the location marker
`loader`		`-` Content to show while the map is loading

Exposed

Exposed	Type
`map`	`Ref<Map \| null>` The Mapbox map instance
`focusFeatures()`	`(features: MapboxFeatures) => void` Focus the map on specific features

Context

The component provides a context that can be injected by child components:

export type MapboxMapContext = {
  map: Ref<Map | null>;
  features: Ref<Array<Feature<Point, any>>>;
  viewport: Ref<MapboxViewport>;
}

export const [injectMapboxMapContext, provideMapboxMapContext]
  = createContext<MapboxMapContext>("MapboxMap");