addImage(
id:string,image:StyleImageSource,options?:Partial<StyleImageMetadata>):this
Defined in: ui/map.ts:3228
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 ErrorEvent event will be fired if the image parameter is invalid or there is not enough space in the sprite to add this image.
Parameters
| Parameter | Type | Description |
|---|---|---|
id |
string |
The ID of the image. |
image |
StyleImageSource |
The image as an HTMLImageElement, ImageData, ImageBitmap or object with width, height, and data properties with the same format as ImageData. |
options? |
Partial<StyleImageMetadata> |
Options object. |
Returns
this
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'.
const image = await map.loadImage('https://upload.wikimedia.org/wikipedia/commons/thumb/6/60/Cat_silhouette.svg/400px-Cat_silhouette.svg.png');
if (!map.hasImage('cat')) map.addImage('cat', image.data);
// Add a stretchable image that can be used with `icon-text-fit`
// In this example, the image is 600px wide by 400px high.
const image = await map.loadImage('https://upload.wikimedia.org/wikipedia/commons/8/89/Black_and_White_Boxed_%28bordered%29.png');
if (map.hasImage('border-image')) return;
map.addImage('border-image', image.data, {
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 - Use
ImageData: Add a generated icon to the map