Pictures, icons and maps

An answer can show pictures and maps, and none of it loads from a host your app didn't choose. We don't supply photos: an answer shows your own pictures, or photos found on your own photo key.

#Your own pictures

An app with pictures of its own (a shop's products, a listing's rooms) sends them with the request, and the model shows them by id:

{
  "images": [
    { "id": "3", "url": "https://cdn.shop.example/mugs/blue.jpg", "alt": "Blue mug", "credit": "Photo: [Shop](https://shop.example)" }
  ]
}

The model is told each id and its alt, never the address, and writes ![The blue one](img:3). The API puts the address in, with the credit under the picture, and allows the picture's host. Up to 200 a request.

#Photos on your own key

With photos set to your own Pexels, Unsplash or Openverse key, the model may ask for a photo of a real place, dish, animal, plant or artwork by describing it:

{ "photos": { "pexels": "<your Pexels key>" } }
{ "photos": { "unsplash": { "key": "<access key>", "app": "<your app's name on Unsplash>" } } }
{ "photos": { "openverse": { "client_id": "...", "client_secret": "..." } } }

![Belém Tower on the Tagus](find)

As the answer streams, the API searches that provider on your key and quota and points the picture straight at the provider's address, with its credit. The reader's browser loads it from the provider; we never fetch or keep the photo. Some requests get no photo on purpose and show their description instead: people, things the answer made up ("Customer 9"), and anything no result matches well enough. A wrong photo is worse than none.

Without photos, the model isn't told it can ask for any.

#Where pictures may load from

The SDK loads pictures only from the hosts you list. Any other address, a model-written one included, shows the picture's description instead: loading it would tell that host who is reading.

createAnswer(el, { core, imageHosts: ["cdn.shop.example", "images.pexels.com"] });

List your photo provider's image host when you give a photo key: images.pexels.com, images.unsplash.com, or live.staticflickr.com and upload.wikimedia.org for Openverse.

#Icons

Stat and Button take an icon: one of 229 Phosphor names. The names models write from other sets (location, MapPin, trending_up) are understood too. The core sends the drawing with the component, so there's no icon font to load. An unknown name shows nothing and never fails the answer.

#Maps

A Map's places are drawn at the zoom that fits them. The map under the pins comes from your own map provider, on your key, straight from the provider:

createAnswer(el, { core, maps: { provider: "stadia", key: "..." } });
// { provider: "google", key: "...", language: "en-GB", region: "GB" }   Google's Map Tiles API
// { provider: "maptiler", key: "..." }
// { provider: "thunderforest", key: "..." }
// { provider: "tiles", url: "https://tiles.example/{z}/{x}/{y}.png", credit: "© ..." }

Each provider's credit shows under the map, as its terms ask. Without a provider a map is its pins on a plain ground, with each place linking to OpenStreetMap, and nothing loads.

For a live map you can pan and zoom, pass MapLibre GL 6.16 or later as maplibre too. It starts its worker from maplibre-gl-worker.mjs beside its script, so serve that file with your bundle; a page with a content security policy allows it as worker-src 'self', and allows the provider's host for images.