addImage method

dynamic addImage(
  1. String id,
  2. dynamic image, [
  3. Map<String, dynamic>? options
])

Add an image to the style. This image can be displayed on the map like any other icon in the style's sprite using the image's ID with icon-image, background-pattern, fill-pattern, or line-pattern. A {@link MapboxMap#error} event will be fired if there is not enough space in the sprite to add this image.

@param id The ID of the image. @param image The image as an HTMLImageElement, ImageData, or object with width, height, and data properties with the same format as ImageData. @param options @param options.pixelRatio The ratio of pixels in the image to physical pixels on the screen @param options.sdf Whether the image should be interpreted as an SDF image @param options.content [x1, y1, x2, y2] If icon-text-fit is used in a layer with this image, this option defines the part of the image that can be covered by the content in text-field. @param options.stretchX [[x1, x2], ...] If icon-text-fit is used in a layer with this image, this option defines the part(s) of the image that can be stretched horizontally. @param options.stretchY [[y1, y2], ...] If icon-text-fit is used in a layer with this image, this option defines the part(s) of the image that can be stretched vertically.

@example // If the style's sprite does not already contain an image with ID 'cat', // add the image 'cat-icon.png' to the style's sprite with the ID 'cat'. map.loadImage('https://upload.wikimedia.org/wikipedia/commons/thumb/6/60/Cat_silhouette.svg/400px-Cat_silhouette.svg.png', function(error, image) { if (error) throw error; if (!map.hasImage('cat')) map.addImage('cat', image); });

// Add a stretchable image that can be used with icon-text-fit // In this example, the image is 600px wide by 400px high. map.loadImage('https://upload.wikimedia.org/wikipedia/commons/8/89/Black_and_White_Boxed_%28bordered%29.png', function(error, image) { if (error) throw error; if (!map.hasImage('border-image')) { map.addImage('border-image', image, { content: 16, 16, 300, 384, // place text over left half of image, avoiding the 16px border stretchX: [16, 584], // stretch everything horizontally except the 16px border stretchY: [16, 384], // stretch everything vertically except the 16px border }); } });

@see Use HTMLImageElement: Add an icon to the map @see Use ImageData: Add a generated icon to the map

Implementation

addImage(String id, dynamic image, [Map<String, dynamic>? options]) {
  if (image is Map) {
    image = jsify(image);
  }
  return options == null
      ? jsObject.addImage(id, image)
      : jsObject.addImage(id, image, jsify(options));
}