# MapboxMarker

Display a marker on the map.

Table of contents

# Examples

# Basic usage





 


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

# Custom HTML








 
 
 



 
 
 
 
 
 
 

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

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

# Linked popup








 
 
 
 
 



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

# Props

# lngLat

  • Type Array
  • Required: true
  • 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 (opens new window) of the Marker class.

# mb-drag

Mapped to the drag event (opens new window) of the Marker class.

# mb-dragend

Mapped to the dragend event (opens new window) of the Marker class.

# Slots

# default

The default slot is used for marker with custom HTML.

The popup slot will be rendered inside the attached popup.