<MapboxSource>

Usage

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.

MapComponent.vue

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

Type Definition

type MapboxSourceProps
 = {
    /**
     * Id of the source
     * @see {@link https://docs.mapbox.com/mapbox-gl-js/api/map/#instance-members-sources|Mapbox GL Docs - Sources}
     */
    id
: string;
    /**
     * Source specification
     * @defaultValue {}
     * @see {@link SourceSpecification|SourceSpecification}
     * @see {@link https://docs.mapbox.com/mapbox-gl-js/api/sources/#source-specification|Mapbox GL Docs - Source Specification}
     */
    source
: SourceSpecification
;
    /**
     * Options for the source
     *
     * Needs implementation
     * @defaultValue {}
     * @see {@link GeoJSONSourceSpecification|GeoJSONSourceSpecification}
     * @see {@link https://docs.mapbox.com/mapbox-gl-js/api/sources/#source-options|Mapbox GL Docs - Source Options}
     */
    options
?: GeoJSONSourceSpecification
;
};

API Reference

Prop	Default	Type
`id`*		`string` Unique identifier for the source See MapboxGL Instance members - sources for more information.
`source`*		`SourceSpecification` Source specification object that defines the source type and data See MapboxGL Source specification for more information. Or see the Source Types section for more information.
`options`	`{}`	`GeoJSONSourceSpecification` Additional options for GeoJSON sources ! Not Yet Implemented

Slot	Payload
`default`	Content to render inside the source

The component supports the following source types:

Used for GeoJSON data
Supports dynamic data updates

Example.json

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

Used for vector tile data
Supports URL or tiles array

Example.json

{
    "type": "vector",
    "url": "mapbox://mapbox.mapbox-streets-v8"
}

Used for raster tile data
Supports URL or tiles array

Example.json

{
    "type": "raster",
    "url": "mapbox://mapbox.satellite"
}

Used for single image overlays
Requires URL and coordinates

Example.json

{
    "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]
    ]
}