<MapboxLayer>

Usage

MapboxLayer is a component that allows you to add and manage layers in a Mapbox map. It provides a convenient way to add layers with proper event handling and lifecycle management.

The component is used to add layers to your Mapbox map. It requires a layer specification and can optionally specify where to position the layer relative to other layers.

MapComponent.vue

<script setup lang="ts">
const layerSpec = {
  id: 'my-layer',
  type: 'circle',
  source: 'my-source',
  paint: {
    'circle-radius': 6,
    'circle-color': '#B42222'
  }
};
</script>

<template>
  <MapboxMap>
    <MapboxSource id="my-source" :source="{ type: 'geojson', data: myData }" />
    <MapboxLayer :layer="layerSpec" />
  </MapboxMap>
</template>

Type Definition

type MapboxLayerProps
 = {
    /**
     * The layer specification.
     * @see {@link LayerSpecification|LayerSpecification}
     * @see {@link https://docs.mapbox.com/mapbox-gl-js/api/map/#map#addlayer|Mapbox GL Docs - addLayer}
     * @see {@link https://docs.mapbox.com/mapbox-gl-js/style-spec/#layers|Mapbox GL Docs - layers}
     */
    layer
: LayerSpecification
;
    /**
     * The ID of an existing layer to insert the new layer before.
     * @see {@link https://docs.mapbox.com/mapbox-gl-js/api/map/#addlayer-parameters-beforeid|Mapbox GL Docs - addLayer beforeId}
     */
    beforeLayerId
?: string;
    /**
     * Event handler for the mousedown event.
     * @see {@link https://docs.mapbox.com/mapbox-gl-js/api/map/#map.event:mousedown|Mapbox GL Docs - mousedown event}
     */
    onMousedown
?: (event
: MapEventOf
<"mousedown">) => void;
    /**
     * Event handler for the mouseup event.
     * @see {@link https://docs.mapbox.com/mapbox-gl-js/api/map/#map.event:mouseup|Mapbox GL Docs - mouseup event}
     */
    onMouseup
?: (event
: MapEventOf
<"mouseup">) => void;
    /**
     * Event handler for the mouseover event.
     * @see {@link https://docs.mapbox.com/mapbox-gl-js/api/map/#map.event:mouseover|Mapbox GL Docs - mouseover event}
     */
    onMouseover
?: (event
: MapEventOf
<"mouseover">) => void;
    /**
     * Event handler for the mousemove event.
     * @see {@link https://docs.mapbox.com/mapbox-gl-js/api/map/#map.event:mousemove|Mapbox GL Docs - mousemove event}
     */
    onMousemove
?: (event
: MapEventOf
<"mousemove">) => void;
    /**
     * Event handler for the mouseenter event.
     * @see {@link https://docs.mapbox.com/mapbox-gl-js/api/map/#map.event:mouseenter|Mapbox GL Docs - mouseenter event}
     */
    onMouseenter
?: (event
: MapEventOf
<"mouseenter">) => void;
    /**
     * Event handler for the mouseleave event.
     * @see {@link https://docs.mapbox.com/mapbox-gl-js/api/map/#map.event:mouseleave|Mapbox GL Docs - mouseleave event}
     */
    onMouseleave
?: (event
: MapEventOf
<"mouseleave">) => void;
    /**
     * Event handler for the mouseout event.
     * @see {@link https://docs.mapbox.com/mapbox-gl-js/api/map/#map.event:mouseout|Mapbox GL Docs - mouseout event}
     */
    onMouseout
?: (event
: MapEventOf
<"mouseout">) => void;
    /**
     * Event handler for the click event.
     * @see {@link https://docs.mapbox.com/mapbox-gl-js/api/map/#map.event:click|Mapbox GL Docs - click event}
     */
    onClick
?: (event
: MapEventOf
<"click">) => void;
    /**
     * Event handler for the dblclick event.
     * @see {@link https://docs.mapbox.com/mapbox-gl-js/api/map/#map.event:dblclick|Mapbox GL Docs - dblclick event}
     */
    onDblclick
?: (event
: MapEventOf
<"dblclick">) => void;
    /**
     * Event handler for the contextmenu event.
     * @see {@link https://docs.mapbox.com/mapbox-gl-js/api/map/#map.event:contextmenu|Mapbox GL Docs - contextmenu event}
     */
    onContextmenu
?: (event
: MapEventOf
<"contextmenu">) => void;
    /**
     * Event handler for the touchstart event.
     * @see {@link https://docs.mapbox.com/mapbox-gl-js/api/map/#map.event:touchstart|Mapbox GL Docs - touchstart event}
     */
    onTouchstart
?: (event
: MapEventOf
<"touchstart">) => void;
    /**
     * Event handler for the touchend event.
     * @see {@link https://docs.mapbox.com/mapbox-gl-js/api/map/#map.event:touchend|Mapbox GL Docs - touchend event}
     */
    onTouchend
?: (event
: MapEventOf
<"touchend">) => void;
    /**
     * Event handler for the touchcancel event.
     * @see {@link https://docs.mapbox.com/mapbox-gl-js/api/map/#map.event:touchcancel|Mapbox GL Docs - touchcancel event}
     */
    onTouchcancel
?: (event
: MapEventOf
<"touchcancel">) => void;
};

API Reference

Prop	Default	Type
`layer`*		`LayerSpecification` Layer specification object that defines the layer properties
`beforeLayerId`		`string` The ID of an existing layer to insert the new layer before

Event	Payload
`click`	`(event: MapEventOf<'click'>) => void` Event handler for the `click` event. See Mapbox GL Docs - click event for more information.
`contextmenu`	`(event: MapEventOf<'contextmenu'>) => void` Event handler for the `contextmenu` event. See Mapbox GL Docs - contextmenu event for more information.
`dblclick`	`(event: MapEventOf<'dblclick'>) => void` Event handler for the `dblclick` event. See Mapbox GL Docs - dblclick event for more information.
`mousedown`	`(event: MapEventOf<'mousedown'>) => void` Event handler for the `mousedown` event. See Mapbox GL Docs - mousedown event for more information.
`mouseenter`	`(event: MapEventOf<'mouseenter'>) => void` Event handler for the `mouseenter` event. See Mapbox GL Docs - mouseenter event for more information.
`mouseleave`	`(event: MapEventOf<'mouseleave'>) => void` Event handler for the `mouseleave` event. See Mapbox GL Docs - mouseleave event for more information.
`mousemove`	`(event: MapEventOf<'mousemove'>) => void` Event handler for the `mousemove` event. See Mapbox GL Docs - mousemove event for more information.
`mouseout`	`(event: MapEventOf<'mouseout'>) => void` Event handler for the `mouseout` event. See Mapbox GL Docs - mouseout event for more information.
`mouseover`	`(event: MapEventOf<'mouseover'>) => void` Event handler for the `mouseover` event. See Mapbox GL Docs - mouseover event for more information.
`mouseup`	`(event: MapEventOf<'mouseup'>) => void` Event handler for the `mouseup` event. See Mapbox GL Docs - mouseup event for more information.
`touchcancel`	`(event: MapEventOf<'touchcancel'>) => void` Event handler for the `touchcancel` event. See Mapbox GL Docs - touchcancel event for more information.
`touchend`	`(event: MapEventOf<'touchend'>) => void` Event handler for the `touchend` event. See Mapbox GL Docs - touchend event for more information.
`touchstart`	`(event: MapEventOf<'touchstart'>) => void` Event handler for the `touchstart` event. See Mapbox GL Docs - touchstart event for more information.