MapboxLayer

Usage

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>

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
`onMousedown`		`Function` Event handler for mousedown events on the layer
`onMouseup`		`Function` Event handler for mouseup events on the layer
`onMouseover`		`Function` Event handler for mouseover events on the layer
`onMousemove`		`Function` Event handler for mousemove events on the layer
`onMouseenter`		`Function` Event handler for mouseenter events on the layer
`onMouseleave`		`Function` Event handler for mouseleave events on the layer
`onClick`		`Function` Event handler for click events on the layer
`onDblclick`		`Function` Event handler for double-click events on the layer

Emit	Payload
`mousedown`	`MapEventOf<'mousedown'>` Emitted when the mouse is pressed down on the layer
`mouseup`	`MapEventOf<'mouseup'>` Emitted when the mouse is released on the layer
`mouseover`	`MapEventOf<'mouseover'>` Emitted when the mouse moves over the layer
`mousemove`	`MapEventOf<'mousemove'>` Emitted when the mouse moves within the layer
`mouseenter`	`MapEventOf<'mouseenter'>` Emitted when the mouse enters the layer
`mouseleave`	`MapEventOf<'mouseleave'>` Emitted when the mouse leaves the layer
`click`	`MapEventOf<'click'>` Emitted when the layer is clicked
`dblclick`	`MapEventOf<'dblclick'>` Emitted when the layer is double-clicked

Example

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

const handleClick = (e) => {
  console.log('Layer clicked:', e);
};
</script>

<template>
  <MapboxMap>
    <MapboxSource 
      id="points-source" 
      :source="{ 
        type: 'geojson', 
        data: pointsData 
      }" 
    />
    <MapboxLayer 
      :layer="layerSpec"
      @click="handleClick"
    />
  </MapboxMap>
</template>

<script setup lang="ts">
const baseLayer = {
  id: 'base-layer',
  type: 'fill',
  source: 'base-source',
  paint: {
    'fill-color': '#088',
    'fill-opacity': 0.4
  }
};

const highlightLayer = {
  id: 'highlight-layer',
  type: 'line',
  source: 'base-source',
  paint: {
    'line-color': '#000',
    'line-width': 2
  }
};
</script>

<template>
  <MapboxMap>
    <MapboxSource 
      id="base-source" 
      :source="{ 
        type: 'geojson', 
        data: areaData 
      }" 
    />
    <MapboxLayer :layer="baseLayer" />
    <MapboxLayer 
      :layer="highlightLayer"
      before-layer-id="base-layer"
    />
  </MapboxMap>
</template>