# 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







 
 
 


<mapbox-map
  style="height: 400px"
  access-token="..."
  map-style="mapbox://styles/mapbox/streets-v11"
  :center="[0, 0]"
  :zoom="1">
  <mapbox-image
    src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/60/Cat_silhouette.svg/400px-Cat_silhouette.svg.png"
    id="cat" />
</mapbox-map>

# 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.

Properties

  • 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.