Each state is filled with the landscape it is known for: saguaro and mesa over Arizona, wheat under a big sky over Kansas, snow peaks over Colorado, cypress and still water over Louisiana, conifers over Oregon and Maine, a skyline over New York. The feature's own border does the clipping, and the image is pinned to the ground rather than the screen, so it scales with the state as you zoom in.
Illustrative imagery. Drawn in the page as data URIs, so the gallery needs no network and looks the same on every load. Nine scenes, assigned to states by landscape. Geometry US states 1:10m, built-in registry
src runs once per feature, which is the useful form: it is how each region gets
its own picture. Returning null declines, and a declined feature stays on its
flat colour, so a partial image set degrades to a choropleth instead of to holes.
series: [{
data,
fill: {
image: {
src: ({ key, name, value, datum }) => `/scenes/${key.toLowerCase()}.jpg`,
fit: 'cover', // 'contain' fits it all in; 'fill' stretches
background: '#eef', // shows under a 'contain' fit, and while loading
},
},
}]
Fit. 'cover' fills the feature's bounding box and crops the overflow,
which is what a photograph wants. 'contain' fits the whole image inside the
box and leaves the background colour visible around it, which is what a logo or a crest
wants. Try both above on Florida and Idaho, whose boxes are the least square on the map.
Labels stay legible. A photograph is a busy backdrop, so the halo behind data labels is doing real work here. Toggle the labels to see the difference, and note that the collision pass still drops the names that would overlap.
PNG export and CORS. Exporting to PNG rasterises the map through a canvas, and a
browser refuses to read back a canvas that an image from another origin has touched.
Same-origin files, or a host sending Access-Control-Allow-Origin, export
cleanly. SVG export is unaffected either way, and these data URIs are same-origin by
construction.
Cost. Unlike a pattern, an image fill is inherently one
<pattern> per feature, because the tile is positioned on that feature's
own box. Fifty-one states is fifty-one defs. It is the wrong tool for three thousand
counties.