# MapboxImage

Add multiple images at once to be used used in icon-image, background-pattern, fill-pattern, and line-pattern. This component is a wrapper around the MapboxImage component.

Table of contents

# Examples

# Add multiple icons to the map








 
 
 
 
 







 
 
 
 
 
 
 
 
 
 
 
 










 









 










 








<template>
  <mapbox-map
    style="margin-top: 1em; height: 400px;"
    :access-token="MAPBOX_API_KEY"
    map-style="mapbox://styles/mapbox/streets-v11"
    :center="[0, 0]"
    :zoom="1">
    <mapbox-images :sources="iconSources">
      <mapbox-layer
        id="pois"
        :options="layerOptions" />
    </mapbox-images>
  </mapbox-map>
</template>

<script>
  export default {
    data() {
      return {
        iconSources: [
          {
            src:
              'https://upload.wikimedia.org/wikipedia/commons/thumb/7/70/Dog_silhouette.svg/429px-Dog_silhouette.svg.png',
            id: 'dog',
          },
          {
            src:
              'https://upload.wikimedia.org/wikipedia/commons/thumb/6/60/Cat_silhouette.svg/400px-Cat_silhouette.svg.png',
            id: 'cat',
          },
        ],
        layerOptions: {
          type: 'symbol',
          source: {
            type: 'geojson',
            data: {
              type: 'FeatureCollection',
              features: [
                {
                  type: 'Feature',
                  properties: {
                    icon: 'cat',
                  },
                  geometry: {
                    type: 'Point',
                    coordinates: [ -25, 0 ],
                  },
                },
                {
                  type: 'Feature',
                  properties: {
                    icon: 'dog',
                  },
                  geometry: {
                    type: 'Point',
                    coordinates: [ 25, 0 ],
                  },
                },
              ],
            },
          },
          layout: {
            'icon-image': [ 'get', 'icon' ],
            'icon-size': 0.25,
          },
        },
      };
    },
  };
</script>

# Props

# sources

  • Type Array
  • Required true

A list of images to add to the map.

# source.id

  • Type String
  • Required true

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

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

# source.options

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

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

# Events

# add

Emitted for each image being added to the map with the addImage (opens new window) method.

Properties

  • image (Object) The image's informations, directly passed from the add event of the `MapboxImage component
  • 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
  • index (Number) The index of the image which has been added
  • total (Number) The total number of images to add

# ready

Emitted when all images have been added to the map.

Properties

  • images (Array) An array containing all the added images' object emitted by the add event

# Slots

# default

The default slot will be rendered after the images have been added to the map — when the ready event is emitted.