Debugging Cross-origin Image Problem with Vega-Lite

Community Help
1

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,

Jon

2

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:

<image
  aria-label="city_center.lat: 40.955; city_center.lng: −74.03; City: oradell; Labels: 12355; Kilometers explored: 150.5"
  role="graphics-symbol"
  aria-roledescription="image mark"
  xlink:href="https://raw.githubusercontent.com/ProjectSidewalk/Design/master/Logos/Logo_Square/RGB/Final_Mark_Full_RGB_NoText2.png"
  transform="translate(235.45193056983175,76.87238050777931)"
  width="NaN"
  height="NaN"
  preserveAspectRatio="xMidYMid"></image>

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

1 Like
3

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!

Jon

1 Like
4

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:

image
image2314×894 211 KB

5

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

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

.data(mapCitiesToLocations.values())

to:

.data(Array.from(mapCitiesToLocations.values()))

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!).