MapboxSource

A component for adding and managing data sources in a Mapbox map.

Added since: v0.1.0

Last changed: 8 months ago

This is generally only needed if you want to use custom layers.

Overview

MapboxSource is a component that allows you to add and manage data sources in your Mapbox map. It supports various source types including GeoJSON, Vector Tiles, Raster Tiles, and Image sources. The component handles source lifecycle management, including adding, updating, and removing sources.

Usage

<template>
  <MapboxMap>
    <MapboxSource
      id="my-source"
      :source="{
        type: 'geojson',
        data: {
          type: 'FeatureCollection',
          features: [...]
        }
      }"
    />
  </MapboxMap>
</template>

API Reference

Props

Prop	Default	Type
`id`*		`string` Unique identifier for the source
`source`*		`SourceSpecification` Source specification object that defines the source type and data
`options`		`GeoJSONSourceSpecification` Additional options for GeoJSON sources

Source Types

The component supports the following source types:

GeoJSON Source

Used for GeoJSON data
Supports dynamic data updates
Example:

{
  type: 'geojson',
  data: {
    type: 'FeatureCollection',
    features: [...]
  }
}

Vector Tile Source
- Used for vector tile data
- Supports URL or tiles array
- Example:
```
{
  type: 'vector',
  url: 'mapbox://mapbox.mapbox-streets-v8'
}
```
Raster Tile Source
- Used for raster tile data
- Supports URL or tiles array
- Example:
```
{
  type: 'raster',
  url: 'mapbox://mapbox.satellite'
}
```

Image Source

Used for single image overlays
Requires URL and coordinates
Example:

{
  type: 'image',
  url: 'https://example.com/image.png',
  coordinates: [
    [-76.54, 39.18],
    [-76.52, 39.18],
    [-76.52, 39.17],
    [-76.54, 39.17]
  ]
}