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
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)
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
If you then inspect the SVG you’ll notice that all
<image> elements have an invalid width and height:
aria-label="city_center.lat: 40.955; city_center.lng: −74.03; City: oradell; Labels: 12355; Kilometers explored: 150.5"
Sadly I don’t know enough about Vega-Lite to offer a solution, but maybe this will help you get going?
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!
Another thing to try is to call to
.toSpec() instead of
.render() and then compare the JSON.
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!).