Debugging Cross-origin Image Problem with Vega-Lite

This question is, perhaps, too niche for this forum as it involves both Observable and Vega-Lite; however, I wanted to try to get help nonetheless :slight_smile:

I can’t seem to get a Vega-Lite image mark to show on a map. I originally suspected it was due to CORS; however, I am able to get some examples to work but not others so not sure.

  • Here’s the map working in the Vega-Lite editor with the images (link).
  • Here’s the same map in Observable but the images are not showing (link) :frowning:

Thanks in advance for the help,


I’d recommend to switch from the canvas renderer to the SVG renderer so that you can inspect the elements, by changing .render() to .render({renderer: "svg"}).

If you then inspect the SVG you’ll notice that all <image> elements have an invalid width and height:

  aria-label=" 40.955; city_center.lng: −74.03; City: oradell; Labels: 12355; Kilometers explored: 150.5"
  aria-roledescription="image mark"

Sadly I don’t know enough about Vega-Lite to offer a solution, but maybe this will help you get going?

1 Like

This is amazingly helpful @mootari. Thank you!

I’m gonna communicate with the Vega-Lite team and see if we can track down what’s going on!


1 Like

Another thing to try is to call to .toSpec() instead of .render() and then compare the JSON.

Using JSON.stringify(spec, null, " ") and diff from this notebook, the most notable difference seems to be that in your version the data is wrapped in the transform:

Wow, what a cool tool. And great idea to compare these two approaches.

I’m able to “fix” this by changing the line (link):




And now the JSON appears more similar but it still isn’t working.

Thanks for your continued help. I did file a ticket here on the Vega-Lite GitHub but I’m still not so sure it’s a Vega-Lite problem or if it’s an Observable issue or just me being silly and messing something up (typical, typical, ha!).