MapboxImage

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

• addImage documentation
• Add an icon to the map example
• Add a generated icon to the map

Table of contents

• Examples
• Props
• Events
• Slots

Examples

Add an icon to the map

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

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

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

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