# MapboxImage

Add an image to be used used in icon-image, background-pattern, fill-pattern, and line-pattern.

Table of contents

# Examples

# Add an icon to the map


  style="height: 400px"
  :center="[0, 0]"
    id="cat" />

# Props

# id

  • Type String
  • Required true

The ID of the image. This will be used to refer to this image.

# src

  • Type [ String, HTMLImageElement, ImageData, Object ]
  • Required true

The image as String, an HTMLImageElement, ImageData, or object with width, height, and data properties with the same format as ImageData.

# options

  • Type Object
  • Default { pixelRatio: 1, sdf: false }

This options object will be passed directly to the addImage method.

# Events

# add

Emitted when the image has been added to the map with the addImage (opens new window) method.


  • image (Object) The image's informations
  • image.id (String) The ID given to the image
  • image.src (HTMLImageElement | ImageData | Object) The generated source of the image when the given source is a string; the given source otherwise
  • image.options (Object) The options object used with the addImage method

# Slots

# default

The default slot will be rendered after the image has been added to the map — when the add event is emitted.