MapboxMarker

Display a marker on the map.

• Marker API reference

Table of contents

• Examples
• Props
• Events
• Slots

Examples

Basic usage

<script setup>
  import { MapboxMap, MapboxMarker } from '@studiometa/vue-mapbox-gl';
</script>

<template>
  <MapboxMap
    style="height: 400px"
    access-token="..."
    map-style="mapbox://styles/mapbox/streets-v11">
    <MapboxMarker :lng-lat="[0, 0]" />
  </MapboxMap>
</template>

Custom HTML

<script setup>
  import { ref } from "vue";
  import { MapboxMap, MapboxMarker } from '@studiometa/vue-mapbox-gl';

  const mapCenter = ref([0, 0]);
</script>

<template>
  <MapboxMap
    style="height: 400px"
    :access-token="MAPBOX_API_KEY"
    map-style="mapbox://styles/mapbox/streets-v11"
    :center="mapCenter"
    :zoom="1">
    <MapboxMarker :lng-lat="[0, 0]">
      <p class="custom-marker">Hello world!</p>
    </MapboxMarker>
  </MapboxMap>
</template>

<style scoped>
  .custom-marker {
    padding: 1em;
    background-color: #fff;
    border-radius: 5px;
  }
</style>

Linked popup

<script setup>
  import { ref } from "vue";
  import { MapboxMap, MapboxMarker } from '@studiometa/vue-mapbox-gl';

  const mapCenter = ref([0, 0]);
</script>

<template>
  <MapboxMap
    style="height: 400px"
    :access-token="MAPBOX_API_KEY"
    map-style="mapbox://styles/mapbox/streets-v11"
    :center="mapCenter"
    :zoom="1">
    <MapboxMarker :lng-lat="[0, 0]" popup>
      <template v-slot:popup>
        <p>Hello world!</p>
      </template>
    </MapboxMarker>
  </MapboxMap>
</template>

<style scoped>
  p {
    color: #333;
  }
</style>

Props

lngLat

• Type Array
• Required: true

popup

• Type [ Object, Boolean ]
• Default: false

element

• Type HTMLElement
• Default: null

offset

• Type [ Point, Array ]
• Default: null

anchor

• Type String
• Default: 'center'

color

• Type String
• Default: null

scale

• Type Number
• Default: 1

draggable

• Type Boolean
• Default: false

rotation

• Type: Number
• Default: 0

pitchAlignment

• Type: String
• Default: 'auto'

rotationAlignment

• Type: String
• Default: 'auto'

Events

All events available on the Marker class are also available on the MapboxMarker component, prefixed by mb-.

mb-dragstart

Mapped to the dragstart event of the Marker class.

mb-drag

Mapped to the drag event of the Marker class.

mb-dragend

Mapped to the dragend event of the Marker class.

Slots

default

The default slot is used for marker with custom HTML.

popup

The popup slot will be rendered inside the attached popup.