<MapboxMarker>
Usage
MapboxMarker is a Vue component that provides a convenient way to add markers to a Mapbox map. It supports custom rendering through slots, dynamic element types, and automatic positioning based on GeoJSON features.
The component can be used to add markers to your map with custom content and behavior.
Basic example
<script setup lang="ts">
import type { Feature, Point } from 'geojson';
const markerFeature: Feature<Point> = {
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [-74.5, 40]
},
properties: {}
};
</script>
<template>
<MapboxMarker
id="my-marker"
:feature="markerFeature"
as="button"
@click="handleMarkerClick"
>
<div class="custom-marker">
<span>📍</span>
</div>
</MapboxMarker>
</template>
Type Definition
type MapboxMarkerProps = {
/**
* Unique identifier for the marker
*/
id: string;
/**
* GeoJSON feature containing marker coordinates
* @see {@link PointFeature|PointFeature}
*/
feature: PointFeature<any>;
/**
* Mapbox marker options
* @defaultValue { anchor: "center" }
* @see {@link mapboxgl.MarkerOptions|MarkerOptions}
* @see {@link https://docs.mapbox.com/mapbox-gl-js/api/markers/#marker-parameters|Mapbox GL Docs - Marker parameters}
*/
options?: MarkerOptions;
/**
* The destination to link to
*
* When the `to` prop is provided, the component will render as a `NuxtLink` component.
*
* _(The `as` prop will override this behavior when provided.)_
*/
to?: string;
/**
* The element or component this component should render as.
*
* Will prioritize components over elements when the name for both is the same.
* @defaultValue "div"
* @see {@link AsTag|AsTag}
* @see {@link Component|Component}
* @example
* ```vue
* <template>
* <MapboxMarker as="span" />
* </template>
* ```
*/
as?: AsTag | Component;
} & Pick<PrimitiveProps, "asChild">;
type MapboxMarkerContext = {
/**
* The Marker instance
* @see {@link mapboxgl.Marker|Marker}
* @see {@link https://docs.mapbox.com/mapbox-gl-js/api/markers/#marker|Mapbox GL Docs - Marker}
*/
marker: Ref<Marker | null | undefined>;
};
API Reference
Props
| Prop | Default | Type |
|---|---|---|
id* | stringUnique identifier for the marker. | |
options | { anchor: 'center' } | MarkerOptionsMapbox marker options. |
feature | Feature<Point, any>GeoJSON feature containing marker coordinates. | |
as | div | stringThe element or component this component should render as. |
to | stringThe destination to link to. |
Slots
| Slot | Payload |
|---|---|
default | Content to render inside the marker element |
Attributes
| Attribute | Value | Type |
|---|---|---|
data-type | mapbox-marker | string |
Exposed
| Exposed | Type |
|---|---|
marker | Marker |
markerElement | ComponentPublicInstanceThe marker element instance |
Context
The component provides a context that can be injected by child components to access the marker instance.
| Context | Type |
|---|---|
marker | Ref<Marker>The marker instance |
<script setup lang="ts">
const { marker } = injectMapboxMarkerContext();
</script>
<template>
<div>{{ marker }}</div>
</template>