Point Images

Cosmograph can render image textures on points using URL columns from your dataset.

Basic Setup

Use pointImageUrlBy to provide image URLs.

const config = {
  points: [
    { id: '1', avatar: 'https://example.com/a.png' },
    { id: '2', avatar: 'https://example.com/b.png' },
  ],
  pointImageUrlBy: 'avatar',
}

Image Size Control

You can set image size globally or per point:

• pointImageSize: default size for all point images
• pointImageSizeBy: data column with per-point numeric sizes

const config = {
  pointImageUrlBy: 'avatar',
  pointImageSize: 24,
  pointImageSizeBy: 'avatarSize',
}

When pointImageSizeBy is present, its values override pointImageSize for each point.

Shapes Behind Images

By default, Cosmograph hides underlying shapes for points whose images are loaded:

• hidePointShapesForLoadedImages: true by default

const config = {
  pointImageUrlBy: 'avatar',
  hidePointShapesForLoadedImages: true,
}

Set it to false if you want the shape marker to remain visible behind loaded images.

Notes

• Point image URLs must be accessible by the browser.
• If your image host uses CORS restrictions, make sure cross-origin requests are allowed.
• For large datasets, use compact images and avoid overly large image sizes to reduce memory pressure.